[PROPOSAL] Replace Inline Javascript with External Javascript

[Aditya Sharma]

Hello all,

We are currently using inline javascript for various macros like
renderLookupField, makeHyperlinkString,shortDateInput etc in
HtmlFormMacroLibrary.ftl which can be replaced with a generic code written
as external javascript. We can add generic javascript code in OfbizUtil.js
and add appropriate classes or identifiers for applying that. Any
additional data can be passed with HTML 5 custom data attribute (
https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#embedding-custom-non-visible-data-with-the-data-attributes
).

Advantages of using external Javascript over inline javascript:

   - Better separation of concerns and maintainability.The separation of
   Javascript and HTML not only improves readability for the developer but
   also it is much easier to maintain.
   - Once an external script is downloaded. the browser stores it in the
   cache so no additional download is required if another page references it.
   - Instead of having same javascript code numerous times for
   multiple widget instances in the page, single instance code in an external
   file can be called and executed anywhere in the code
   - An inline script cannot be minified (converted to a shorter version
   through symbol reduction). Not a concern on broadband but consider a mobile
   device in a low bandwidth area, or users who are on global data roaming--
   every byte may count.
   - An inline script can be harder to debug because the line number
   associated with any error is meaningless.
   - An inline script cannot be tested independently of its page; external
   Javascript files can be run through independent testing, including
   automated tests.

Externalizing javascript is one of the Yahoo performance rules:
http://developer.yahoo.com/performance/rules.html#external

Thanks and Regards,

*Aditya Sharma* | Enterprise Software Engineer
HotWax Commerce <http://www.hotwax.co/> by HotWax Systems
<http://www.hotwaxsystems.com/>
Plot no. 80, Scheme no. 78 Part 2, Near Brilliant Convention Center, Indore,
M.P, India - 452010
Cell phone: [phone]

<https://www.linkedin.com/in/aditya-sharma-78291810a/>
<https://www.facebook.com/divinecreatureaaditya>
<https://www.instagram.com/iamaadi7/>

HotWax Systems recently received 8 mentions in *The Gartner Digital
Commerce Vendor Guide, 2016 *by Gartner, Inc., the world's leading IT
research and advisory company. Learn more about our research here
<https://www.gartner.com/technology/media-products/newsletters/HotWax/1-2UVLP6M/index.html>
.

<http://www.hotwax.co/>

[Jacques Le Roux]

Hi Aditya,

Good idea, I think we should also look at require.js as I suggested some time ago: https://s.apache.org/y8P1

Jacques


Le 08/07/2017 à 11:00, Aditya Sharma a écrit :

> Hello all,
>
> We are currently using inline javascript for various macros like
> renderLookupField, makeHyperlinkString,shortDateInput etc in
> HtmlFormMacroLibrary.ftl which can be replaced with a generic code written
> as external javascript. We can add generic javascript code in OfbizUtil.js
> and add appropriate classes or identifiers for applying that. Any
> additional data can be passed with HTML 5 custom data attribute (
> https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#embedding-custom-non-visible-data-with-the-data-attributes
> ).
>
> Advantages of using external Javascript over inline javascript:
>
>     - Better separation of concerns and maintainability.The separation of
>     Javascript and HTML not only improves readability for the developer but
>     also it is much easier to maintain.
>     - Once an external script is downloaded. the browser stores it in the
>     cache so no additional download is required if another page references it.
>     - Instead of having same javascript code numerous times for
>     multiple widget instances in the page, single instance code in an external
>     file can be called and executed anywhere in the code
>     - An inline script cannot be minified (converted to a shorter version
>     through symbol reduction). Not a concern on broadband but consider a mobile
>     device in a low bandwidth area, or users who are on global data roaming--
>     every byte may count.
>     - An inline script can be harder to debug because the line number
>     associated with any error is meaningless.
>     - An inline script cannot be tested independently of its page; external
>     Javascript files can be run through independent testing, including
>     automated tests.
>
> Externalizing javascript is one of the Yahoo performance rules:
> http://developer.yahoo.com/performance/rules.html#external
>
> Thanks and Regards,
>
> *Aditya Sharma* | Enterprise Software Engineer
> HotWax Commerce <http://www.hotwax.co/> by HotWax Systems
> <http://www.hotwaxsystems.com/>
> Plot no. 80, Scheme no. 78 Part 2, Near Brilliant Convention Center, Indore,
> M.P, India - 452010
> Cell phone: [phone]
>
> <https://www.linkedin.com/in/aditya-sharma-78291810a/>
> <https://www.facebook.com/divinecreatureaaditya>
> <https://www.instagram.com/iamaadi7/>
>
> HotWax Systems recently received 8 mentions in *The Gartner Digital
> Commerce Vendor Guide, 2016 *by Gartner, Inc., the world's leading IT
> research and advisory company. Learn more about our research here
> <https://www.gartner.com/technology/media-products/newsletters/HotWax/1-2UVLP6M/index.html>
> .
>
> <http://www.hotwax.co/>
>

[Michael Brohl-3]

+1, great idea, Aditya!

This seems to correspond partly with
https://issues.apache.org/jira/browse/OFBIZ-8300

Best regards,

Michael Brohl
ecomify GmbH
www.ecomify.de

Am 08.07.17 um 11:00 schrieb Aditya Sharma:

> Hello all,
>
> We are currently using inline javascript for various macros like
> renderLookupField, makeHyperlinkString,shortDateInput etc in
> HtmlFormMacroLibrary.ftl which can be replaced with a generic code written
> as external javascript. We can add generic javascript code in OfbizUtil.js
> and add appropriate classes or identifiers for applying that. Any
> additional data can be passed with HTML 5 custom data attribute (
> https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#embedding-custom-non-visible-data-with-the-data-attributes
> ).
>
> Advantages of using external Javascript over inline javascript:
>
>     - Better separation of concerns and maintainability.The separation of
>     Javascript and HTML not only improves readability for the developer but
>     also it is much easier to maintain.
>     - Once an external script is downloaded. the browser stores it in the
>     cache so no additional download is required if another page references it.
>     - Instead of having same javascript code numerous times for
>     multiple widget instances in the page, single instance code in an external
>     file can be called and executed anywhere in the code
>     - An inline script cannot be minified (converted to a shorter version
>     through symbol reduction). Not a concern on broadband but consider a mobile
>     device in a low bandwidth area, or users who are on global data roaming--
>     every byte may count.
>     - An inline script can be harder to debug because the line number
>     associated with any error is meaningless.
>     - An inline script cannot be tested independently of its page; external
>     Javascript files can be run through independent testing, including
>     automated tests.
>
> Externalizing javascript is one of the Yahoo performance rules:
> http://developer.yahoo.com/performance/rules.html#external
>
> Thanks and Regards,
>
> *Aditya Sharma* | Enterprise Software Engineer
> HotWax Commerce <http://www.hotwax.co/> by HotWax Systems
> <http://www.hotwaxsystems.com/>
> Plot no. 80, Scheme no. 78 Part 2, Near Brilliant Convention Center, Indore,
> M.P, India - 452010
> Cell phone: [phone]
>
> <https://www.linkedin.com/in/aditya-sharma-78291810a/>
> <https://www.facebook.com/divinecreatureaaditya>
> <https://www.instagram.com/iamaadi7/>
>
> HotWax Systems recently received 8 mentions in *The Gartner Digital
> Commerce Vendor Guide, 2016 *by Gartner, Inc., the world's leading IT
> research and advisory company. Learn more about our research here
> <https://www.gartner.com/technology/media-products/newsletters/HotWax/1-2UVLP6M/index.html>
> .
>
> <http://www.hotwax.co/>
>

[taher]

Big +1, thank you for the initiative.

I wish everyone reading this to take an active role too, there is so
much refactoring needed in the project and we need your help. It's not
hard to find an area you're comfortable with and start cleaning it up
a bit.

On Sat, Jul 8, 2017 at 12:16 PM, Michael Brohl <[hidden email]> wrote:

> +1, great idea, Aditya!
>
> This seems to correspond partly with
> https://issues.apache.org/jira/browse/OFBIZ-8300
>
> Best regards,
>
> Michael Brohl
> ecomify GmbH
> www.ecomify.de
>
> Am 08.07.17 um 11:00 schrieb Aditya Sharma:
>
>> Hello all,
>>
>> We are currently using inline javascript for various macros like
>> renderLookupField, makeHyperlinkString,shortDateInput etc in
>> HtmlFormMacroLibrary.ftl which can be replaced with a generic code written
>> as external javascript. We can add generic javascript code in OfbizUtil.js
>> and add appropriate classes or identifiers for applying that. Any
>> additional data can be passed with HTML 5 custom data attribute (
>>
>> https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#embedding-custom-non-visible-data-with-the-data-attributes
>> ).
>>
>> Advantages of using external Javascript over inline javascript:
>>
>>     - Better separation of concerns and maintainability.The separation of
>>     Javascript and HTML not only improves readability for the developer
>> but
>>     also it is much easier to maintain.
>>     - Once an external script is downloaded. the browser stores it in the
>>     cache so no additional download is required if another page references
>> it.
>>     - Instead of having same javascript code numerous times for
>>     multiple widget instances in the page, single instance code in an
>> external
>>     file can be called and executed anywhere in the code
>>     - An inline script cannot be minified (converted to a shorter version
>>     through symbol reduction). Not a concern on broadband but consider a
>> mobile
>>     device in a low bandwidth area, or users who are on global data
>> roaming--
>>     every byte may count.
>>     - An inline script can be harder to debug because the line number
>>     associated with any error is meaningless.
>>     - An inline script cannot be tested independently of its page;
>> external
>>     Javascript files can be run through independent testing, including
>>     automated tests.
>>
>> Externalizing javascript is one of the Yahoo performance rules:
>> http://developer.yahoo.com/performance/rules.html#external
>>
>> Thanks and Regards,
>>
>> *Aditya Sharma* | Enterprise Software Engineer
>> HotWax Commerce <http://www.hotwax.co/> by HotWax Systems
>> <http://www.hotwaxsystems.com/>
>> Plot no. 80, Scheme no. 78 Part 2, Near Brilliant Convention Center,
>> Indore,
>> M.P, India - 452010
>> Cell phone: [phone]
>>
>> <https://www.linkedin.com/in/aditya-sharma-78291810a/>
>> <https://www.facebook.com/divinecreatureaaditya>
>> <https://www.instagram.com/iamaadi7/>
>>
>> HotWax Systems recently received 8 mentions in *The Gartner Digital
>> Commerce Vendor Guide, 2016 *by Gartner, Inc., the world's leading IT
>> research and advisory company. Learn more about our research here
>>
>> <https://www.gartner.com/technology/media-products/newsletters/HotWax/1-2UVLP6M/index.html>
>> .
>>
>> <http://www.hotwax.co/>
>>
>
>

[Deepak Dixit-3]

+1 nice initiative Aditya.

Could you please open a ticket for this improvement?


Thanks & Regards
--
Deepak Dixit
www.hotwaxsystems.com
www.hotwax.co

On Sat, Jul 8, 2017 at 3:16 PM, Taher Alkhateeb <[hidden email]>
wrote:

> Big +1, thank you for the initiative.
>
> I wish everyone reading this to take an active role too, there is so
> much refactoring needed in the project and we need your help. It's not
> hard to find an area you're comfortable with and start cleaning it up
> a bit.
>
> On Sat, Jul 8, 2017 at 12:16 PM, Michael Brohl <[hidden email]>
> wrote:
> > +1, great idea, Aditya!
> >
> > This seems to correspond partly with
> > https://issues.apache.org/jira/browse/OFBIZ-8300
> >
> > Best regards,
> >
> > Michael Brohl
> > ecomify GmbH
> > www.ecomify.de
> >
> > Am 08.07.17 um 11:00 schrieb Aditya Sharma:
> >
> >> Hello all,
> >>
> >> We are currently using inline javascript for various macros like
> >> renderLookupField, makeHyperlinkString,shortDateInput etc in
> >> HtmlFormMacroLibrary.ftl which can be replaced with a generic code
> written
> >> as external javascript. We can add generic javascript code in
> OfbizUtil.js
> >> and add appropriate classes or identifiers for applying that. Any
> >> additional data can be passed with HTML 5 custom data attribute (
> >>
> >> https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#
> embedding-custom-non-visible-data-with-the-data-attributes
> >> ).
> >>
> >> Advantages of using external Javascript over inline javascript:
> >>
> >>     - Better separation of concerns and maintainability.The separation
> of
> >>     Javascript and HTML not only improves readability for the developer
> >> but
> >>     also it is much easier to maintain.
> >>     - Once an external script is downloaded. the browser stores it in
> the
> >>     cache so no additional download is required if another page
> references
> >> it.
> >>     - Instead of having same javascript code numerous times for
> >>     multiple widget instances in the page, single instance code in an
> >> external
> >>     file can be called and executed anywhere in the code
> >>     - An inline script cannot be minified (converted to a shorter
> version
> >>     through symbol reduction). Not a concern on broadband but consider a
> >> mobile
> >>     device in a low bandwidth area, or users who are on global data
> >> roaming--
> >>     every byte may count.
> >>     - An inline script can be harder to debug because the line number
> >>     associated with any error is meaningless.
> >>     - An inline script cannot be tested independently of its page;
> >> external
> >>     Javascript files can be run through independent testing, including
> >>     automated tests.
> >>
> >> Externalizing javascript is one of the Yahoo performance rules:
> >> http://developer.yahoo.com/performance/rules.html#external
> >>
> >> Thanks and Regards,
> >>
> >> *Aditya Sharma* | Enterprise Software Engineer
> >> HotWax Commerce <http://www.hotwax.co/> by HotWax Systems
> >> <http://www.hotwaxsystems.com/>
> >> Plot no. 80, Scheme no. 78 Part 2, Near Brilliant Convention Center,
> >> Indore,
> >> M.P, India - 452010
> >> Cell phone: [phone]
> >>
> >> <https://www.linkedin.com/in/aditya-sharma-78291810a/>
> >> <https://www.facebook.com/divinecreatureaaditya>
> >> <https://www.instagram.com/iamaadi7/>
> >>
> >> HotWax Systems recently received 8 mentions in *The Gartner Digital
> >> Commerce Vendor Guide, 2016 *by Gartner, Inc., the world's leading IT
> >> research and advisory company. Learn more about our research here
> >>
> >> <https://www.gartner.com/technology/media-products/
> newsletters/HotWax/1-2UVLP6M/index.html>
> >> .
> >>
> >> <http://www.hotwax.co/>
> >>
> >
> >
>

[Michael Brohl-3]

Hi developers,

good to see so much action today, thanks all!

Best regards,

Michael Brohl
ecomify GmbH
www.ecomify.de


Am 08.07.17 um 12:27 schrieb Deepak Dixit:

> +1 nice initiative Aditya.
>
> Could you please open a ticket for this improvement?
>
>
> Thanks & Regards
> --
> Deepak Dixit
> www.hotwaxsystems.com
> www.hotwax.co
>
> On Sat, Jul 8, 2017 at 3:16 PM, Taher Alkhateeb <[hidden email]>
> wrote:
>
>> Big +1, thank you for the initiative.
>>
>> I wish everyone reading this to take an active role too, there is so
>> much refactoring needed in the project and we need your help. It's not
>> hard to find an area you're comfortable with and start cleaning it up
>> a bit.
>>
>> On Sat, Jul 8, 2017 at 12:16 PM, Michael Brohl <[hidden email]>
>> wrote:
>>> +1, great idea, Aditya!
>>>
>>> This seems to correspond partly with
>>> https://issues.apache.org/jira/browse/OFBIZ-8300
>>>
>>> Best regards,
>>>
>>> Michael Brohl
>>> ecomify GmbH
>>> www.ecomify.de
>>>
>>> Am 08.07.17 um 11:00 schrieb Aditya Sharma:
>>>
>>>> Hello all,
>>>>
>>>> We are currently using inline javascript for various macros like
>>>> renderLookupField, makeHyperlinkString,shortDateInput etc in
>>>> HtmlFormMacroLibrary.ftl which can be replaced with a generic code
>> written
>>>> as external javascript. We can add generic javascript code in
>> OfbizUtil.js
>>>> and add appropriate classes or identifiers for applying that. Any
>>>> additional data can be passed with HTML 5 custom data attribute (
>>>>
>>>> https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#
>> embedding-custom-non-visible-data-with-the-data-attributes
>>>> ).
>>>>
>>>> Advantages of using external Javascript over inline javascript:
>>>>
>>>>      - Better separation of concerns and maintainability.The separation
>> of
>>>>      Javascript and HTML not only improves readability for the developer
>>>> but
>>>>      also it is much easier to maintain.
>>>>      - Once an external script is downloaded. the browser stores it in
>> the
>>>>      cache so no additional download is required if another page
>> references
>>>> it.
>>>>      - Instead of having same javascript code numerous times for
>>>>      multiple widget instances in the page, single instance code in an
>>>> external
>>>>      file can be called and executed anywhere in the code
>>>>      - An inline script cannot be minified (converted to a shorter
>> version
>>>>      through symbol reduction). Not a concern on broadband but consider a
>>>> mobile
>>>>      device in a low bandwidth area, or users who are on global data
>>>> roaming--
>>>>      every byte may count.
>>>>      - An inline script can be harder to debug because the line number
>>>>      associated with any error is meaningless.
>>>>      - An inline script cannot be tested independently of its page;
>>>> external
>>>>      Javascript files can be run through independent testing, including
>>>>      automated tests.
>>>>
>>>> Externalizing javascript is one of the Yahoo performance rules:
>>>> http://developer.yahoo.com/performance/rules.html#external
>>>>
>>>> Thanks and Regards,
>>>>
>>>> *Aditya Sharma* | Enterprise Software Engineer
>>>> HotWax Commerce <http://www.hotwax.co/> by HotWax Systems
>>>> <http://www.hotwaxsystems.com/>
>>>> Plot no. 80, Scheme no. 78 Part 2, Near Brilliant Convention Center,
>>>> Indore,
>>>> M.P, India - 452010
>>>> Cell phone: [phone]
>>>>
>>>> <https://www.linkedin.com/in/aditya-sharma-78291810a/>
>>>> <https://www.facebook.com/divinecreatureaaditya>
>>>> <https://www.instagram.com/iamaadi7/>
>>>>
>>>> HotWax Systems recently received 8 mentions in *The Gartner Digital
>>>> Commerce Vendor Guide, 2016 *by Gartner, Inc., the world's leading IT
>>>> research and advisory company. Learn more about our research here
>>>>
>>>> <https://www.gartner.com/technology/media-products/
>> newsletters/HotWax/1-2UVLP6M/index.html>
>>>> .
>>>>
>>>> <http://www.hotwax.co/>
>>>>
>>>

[Aditya Sharma]

Thanks everyone for the suggestions and appreciations. I have created the
ticket here <https://issues.apache.org/jira/browse/OFBIZ-9465>.

Thanks and Regards,

*Aditya Sharma* | Enterprise Software Engineer
HotWax Systems <http://www.hotwaxsystems.com/>

<https://www.linkedin.com/in/aditya-sharma-78291810a/>

On Sat, Jul 8, 2017 at 4:10 PM, Michael Brohl <[hidden email]>
wrote:

> Hi developers,
>
> good to see so much action today, thanks all!
>
> Best regards,
>
> Michael Brohl
> ecomify GmbH
> www.ecomify.de
>
>
> Am 08.07.17 um 12:27 schrieb Deepak Dixit:
>
> +1 nice initiative Aditya.
>>
>> Could you please open a ticket for this improvement?
>>
>>
>> Thanks & Regards
>> --
>> Deepak Dixit
>> www.hotwaxsystems.com
>> www.hotwax.co
>>
>> On Sat, Jul 8, 2017 at 3:16 PM, Taher Alkhateeb <
>> [hidden email]>
>> wrote:
>>
>> Big +1, thank you for the initiative.
>>>
>>> I wish everyone reading this to take an active role too, there is so
>>> much refactoring needed in the project and we need your help. It's not
>>> hard to find an area you're comfortable with and start cleaning it up
>>> a bit.
>>>
>>> On Sat, Jul 8, 2017 at 12:16 PM, Michael Brohl <[hidden email]
>>> >
>>> wrote:
>>>
>>>> +1, great idea, Aditya!
>>>>
>>>> This seems to correspond partly with
>>>> https://issues.apache.org/jira/browse/OFBIZ-8300
>>>>
>>>> Best regards,
>>>>
>>>> Michael Brohl
>>>> ecomify GmbH
>>>> www.ecomify.de
>>>>
>>>> Am 08.07.17 um 11:00 schrieb Aditya Sharma:
>>>>
>>>> Hello all,
>>>>>
>>>>> We are currently using inline javascript for various macros like
>>>>> renderLookupField, makeHyperlinkString,shortDateInput etc in
>>>>> HtmlFormMacroLibrary.ftl which can be replaced with a generic code
>>>>>
>>>> written
>>>
>>>> as external javascript. We can add generic javascript code in
>>>>>
>>>> OfbizUtil.js
>>>
>>>> and add appropriate classes or identifiers for applying that. Any
>>>>> additional data can be passed with HTML 5 custom data attribute (
>>>>>
>>>>> https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#
>>>>>
>>>> embedding-custom-non-visible-data-with-the-data-attributes
>>>
>>>> ).
>>>>>
>>>>> Advantages of using external Javascript over inline javascript:
>>>>>
>>>>>      - Better separation of concerns and maintainability.The separation
>>>>>
>>>> of
>>>
>>>>      Javascript and HTML not only improves readability for the developer
>>>>> but
>>>>>      also it is much easier to maintain.
>>>>>      - Once an external script is downloaded. the browser stores it in
>>>>>
>>>> the
>>>
>>>>      cache so no additional download is required if another page
>>>>>
>>>> references
>>>
>>>> it.
>>>>>      - Instead of having same javascript code numerous times for
>>>>>      multiple widget instances in the page, single instance code in an
>>>>> external
>>>>>      file can be called and executed anywhere in the code
>>>>>      - An inline script cannot be minified (converted to a shorter
>>>>>
>>>> version
>>>
>>>>      through symbol reduction). Not a concern on broadband but consider
>>>>> a
>>>>> mobile
>>>>>      device in a low bandwidth area, or users who are on global data
>>>>> roaming--
>>>>>      every byte may count.
>>>>>      - An inline script can be harder to debug because the line number
>>>>>      associated with any error is meaningless.
>>>>>      - An inline script cannot be tested independently of its page;
>>>>> external
>>>>>      Javascript files can be run through independent testing, including
>>>>>      automated tests.
>>>>>
>>>>> Externalizing javascript is one of the Yahoo performance rules:
>>>>> http://developer.yahoo.com/performance/rules.html#external
>>>>>
>>>>> Thanks and Regards,
>>>>>
>>>>> *Aditya Sharma* | Enterprise Software Engineer
>>>>> HotWax Commerce <http://www.hotwax.co/> by HotWax Systems
>>>>> <http://www.hotwaxsystems.com/>
>>>>> Plot no. 80, Scheme no. 78 Part 2, Near Brilliant Convention Center,
>>>>> Indore,
>>>>> M.P, India - 452010
>>>>> Cell phone: [phone]
>>>>>
>>>>> <https://www.linkedin.com/in/aditya-sharma-78291810a/>
>>>>> <https://www.facebook.com/divinecreatureaaditya>
>>>>> <https://www.instagram.com/iamaadi7/>
>>>>>
>>>>> HotWax Systems recently received 8 mentions in *The Gartner Digital
>>>>> Commerce Vendor Guide, 2016 *by Gartner, Inc., the world's leading IT
>>>>> research and advisory company. Learn more about our research here
>>>>>
>>>>> <https://www.gartner.com/technology/media-products/
>>>>>
>>>> newsletters/HotWax/1-2UVLP6M/index.html>
>>>
>>>> .
>>>>>
>>>>> <http://www.hotwax.co/>
>>>>>
>>>>>
>>>>
>
>