all things javascript - smc
TRANSCRIPT
![Page 1: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/1.jpg)
All Things JavaScriptSu Liferay DXP 7.x e Liferay Portal CE 7.x
Carlo CervellinFront-End Engineer
Pier Paolo RamonHead of Digital
![Page 2: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/2.jpg)
Liferay DXP è una pia;aforma
per realizzare Composite Applica.ons
![Page 3: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/3.jpg)
Liferay DXP è una pia;aforma
per realizzare Composite Applica.ons
![Page 4: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/4.jpg)
Liferay DXP è una pia;aforma
per realizzare Composite Applica.ons
!!
![Page 5: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/5.jpg)
La cara1eris3ca principale delle Composite Applica3ons
è non avere un Single Point of Build
![Page 6: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/6.jpg)
Sfide da tenerein considerazione
Minificazionee peso della pagina
Concatenazione e Bundling
Caricamentoe Lazy Loading
Ordine di esecuzionee dipendenze
Coordinazionetra componen9
Scriptse Moduli
![Page 7: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/7.jpg)
Concatenazione Combo Loader
Caching Sta9c Resource URLs + CDN Configura9on
Minificazione Minificatore automa9co(Google Closure Compiler)
Turbolinks SPA Framework(Senna.js)
Bundling Liferay AMD Loader+ Combo Loader
![Page 8: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/8.jpg)
Registrazione come dipendenza di Portlet
![Page 9: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/9.jpg)
Registrazione come dipendenza di Portlet
@Component( service = Portlet.class, properties = { "com.liferay.portlet.header-portlet-css=/css/main.css", "com.liferay.portlet.header-portlet-javascript=/js/main.js"
} ) public class AwesomePortlet extends MVCPortlet { … }
![Page 10: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/10.jpg)
Registrazione come dipendenza di Portlet
<head> header-portlet-javascript
!</head>
<body> Contenuto della pagina footer-portlet-javascript
!</body>
![Page 11: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/11.jpg)
Registrazione come dipendenza di Portlet
Vengono concatenate in Combo Load?
Quando viene caricata?
Quando viene eseguita?
Viene eseguita ogni navigazione?
Sì
Solo una volta e solo quando la portlet è in pagina
Subito prima / dopo del corpo
Sì — è uno “script”
![Page 12: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/12.jpg)
Caricamento manuale via <script>
![Page 13: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/13.jpg)
Caricamento manuale via <script>
<script src="/o/awesome-portlet-web/js/utility.js">!</script>
Nei frammen9 JSPdei Dynamic Include
Web Content Templates Applica9on Display Templates
Fragments
Nei frammen9 JSPdelle Portlet
FTL del tema
![Page 14: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/14.jpg)
Caricamento manuale via <script>
<script src="<%= request.getContextPath() + "/js/utility.js"
%>">!</script>
Questo ci perme\e di evitare di dover conoscere
il Web Context Path del bundle OSGi
![Page 15: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/15.jpg)
Caricamento manuale via <script>
<script src="<%= PortalUtil.getPathContext(request) + "/js/utility.js"
%>">!</script>
ATTENZIONE! L’ordine di «Path» e «Context»è al contrario rispe\o a prima!
Questo ci perme\e di supportare casi in cui il portale non è nella
root del server. Il 9pico /portal
![Page 16: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/16.jpg)
Caricamento manuale via <script>
<script src="<%= PortalUtil.getStaticResourceURL(
request, PortalUtil.getPathContext(request) + "/js/utility.js", ""...
) %>">!</script>
Aggiunge i parametri in query string necessari ad abvare il minificatore
automa9co
Ci sono alcuneconfigurazioni
possibili. Per scoprirle…
…leggete il sorgentedi PortalImpl :)
![Page 17: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/17.jpg)
Caricamento manuale via <script>
<script src="<%= PortalUtil.getStaticResourceURL(
request, themeDisplay.getCDNDynamicResourcesHost() + PortalUtil.getPathContext(request) + "/js/utility.js", !!...
) %>">!</script> Se configurata una CDN
dinamica (capace di fare cache on-demand delle
risorse) questo ci perme\e di sfru\arla.
![Page 18: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/18.jpg)
<head> header-portlet-javascript
!</head>
<body> Contenuto della pagina
Script manuali footer-portlet-javascript
!</body>
Caricamento manuale via <script>
![Page 19: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/19.jpg)
Vengono concatenate in Combo Load?
Quando viene caricata?
Quando viene eseguita?
Viene eseguita ogni navigazione?
No
N volte, nel corpo della pagina
N volte, ad ogni presenza nella pagina
Sì — è uno “script”
Caricamento manuale via <script>
![Page 20: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/20.jpg)
Caricamento manuale via <script> e a1ributo data-senna-track
![Page 21: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/21.jpg)
<script data-senna-track="permanent" src="<%= PortalUtil.getStaticResourceURL(
request, themeDisplay.getCDNDynamicResourcesHost() + PortalUtil.getPathContext(request) + "/js/utility.js", !!...
) %>">!</script>
Caricamento manuale via <script> e a1ributo data-senna-track
![Page 22: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/22.jpg)
Vengono concatenate in Combo Load?
Quando viene caricata?
Quando viene eseguita?
Viene eseguita ogni navigazione?
No
N volte, nel corpo della pagina
N volte, ad ogni presenza nella pagina
No! Viene tra;ato come modulo!
Caricamento manuale via <script> e a1ributo data-senna-track
![Page 23: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/23.jpg)
Caricamento manuale via <script> e <liferay-util:html-top/bottom>
![Page 24: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/24.jpg)
Caricamento manuale via <script> e <liferay-util:html-top/bottom>
<liferay-util:html-top> <script src="!!.../js/utility.js">!</script>
"</liferay-util:html-top>
<liferay-util:html-bottom> <script src="!!.../js/utility.js">!</script>
"</liferay-util:html-bottom>
Questo porta nella <head>
Questo porta a fondo <body>
![Page 25: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/25.jpg)
<head> header-portlet-javascriptliferay-util:html-top
!</head>
<body> Contenuto della pagina
Script manuali footer-portlet-javascriptliferay-util:html-bottom
!</body>
Caricamento manuale via <script> e <liferay-util:html-top/bottom>
![Page 26: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/26.jpg)
Vengono concatenate in Combo Load?
Quando viene caricata?
Quando viene eseguita?
Viene eseguita ogni navigazione?
No
N volte, inizio o fine pagina
N volte, inizio o fine pagina
Sì — è uno “script”
Caricamento manuale via <script> e <liferay-util:html-top/bottom>
![Page 27: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/27.jpg)
Caricamento manuale via <script> e <liferay-util:html-top/bottom>
e a1ributo outputKey="..."
![Page 28: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/28.jpg)
Caricamento manuale via <script> e <liferay-util:html-top/bottom>
e a1ributo outputKey="..."
<liferay-util:html-top> <script src="!!.../js/utility.js">!</script>
!</liferay-util:html-top>
![Page 29: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/29.jpg)
Caricamento manuale via <script> e <liferay-util:html-top/bottom>
e a1ributo outputKey="..."
<liferay-util:html-top outputKey="awesome-key"> <script src="!!.../js/utility.js">!</script>
!</liferay-util:html-top>
Assicura che il frammento incluso nel tag <liferay-u2l:html-top>venga riportato nella pagina finale una sola volta
![Page 30: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/30.jpg)
Vengono concatenate in Combo Load?
Quando viene caricata?
Quando viene eseguita?
Viene eseguita ogni navigazione?
No
1 volta, inizio o fine pagina
1 volta, inizio o fine pagina
Sì — è uno “script”
Caricamento manuale via <script> e <liferay-util:html-top/bottom>
e a1ributo outputKey="..."
![Page 31: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/31.jpg)
Caricamento via Theme Contributor
![Page 32: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/32.jpg)
Caricamento via Theme Contributor
bnd.bnd Liferay-Theme-Contributor-Type: some-unique-name
Nessuna relazione con i temi! Da non confondere con i Template Context Contributor!
TuG i file staIci (.js e .css) del modulovengono carica9 in tu;e le pagine.
![Page 33: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/33.jpg)
<head> header-portlet-javascriptliferay-util:html-top Theme Contributor resources
!</head>
<body> Contenuto della pagina
Script manuali footer-portlet-javascriptliferay-util:html-bottom
!</body>
Caricamento via Theme Contributor
![Page 34: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/34.jpg)
Vengono concatenate in Combo Load?
Quando viene caricata?
Quando viene eseguita?
Viene eseguita ogni navigazione?
Sì
1 volta, ad inizio pagina
1 volta, alla prima navigazione
No! Vengono tra;aI come moduli!
Caricamento via Theme Contributor
![Page 35: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/35.jpg)
Caricamento via Liferay AMD Loader
![Page 36: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/36.jpg)
Caricamento via Liferay AMD Loader
Liferay.Loader.require( 'some-module', function (someModule) { !// :) } );
Liferay.Loader.define( 'some-module', function () { return { … } } );
1 2
Asynchronous Module Defini9on
Prima deve essere eseguito questo… …poi questo. Non molto asincrono :(
![Page 37: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/37.jpg)
Caricamento via Liferay AMD Loader
Liferay.Loader.require( 'some-module', function (someModule) { !// :) } );
Liferay.Loader.define( 'some-module', function () { return { … } } );
1 2
Asynchronous Module Defini9on
Prima deve essere eseguito questo… …poi questo. Non molto asincrono :(
![Page 38: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/38.jpg)
Caricamento via Liferay AMD Loader
Liferay.Loader.require( 'some-module', function (someModule) { !// :) } );
Liferay.Loader.define( 'some-module', function () { return { … } } );
Liferay.Loader.addModule({ name: 'some-module', path: '/o/blahblah/some-module.js' });
1
2
![Page 39: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/39.jpg)
Caricamento via Liferay AMD Loader
Liferay.Loader.require( 'some-module', function (someModule) { !// :) } );
Liferay.Loader.define( 'some-module', function () { return { … } } );
Liferay.Loader.addModule({ name: 'some-module', path: '/o/blahblah/some-module.js' });
1
2
![Page 40: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/40.jpg)
Caricamento via Liferay AMD Loader
Liferay.Loader.require( 'some-module', function (someModule) { !// :) } );
Liferay.Loader.define( 'some-module', function () { return { … } } );
Liferay.Loader.addModule({ name: 'some-module', path: '/o/blahblah/some-module.js' });
LAZY LOADED
1
2
ASYNC!
![Page 41: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/41.jpg)
bnd.bnd (Liferay Modules) Liferay-JS-Config: /js/config.js
liferay-plugin-package.properties (Themes) Liferay-JS-Config=/js/config.js
/src/main/resources/META-INF/resources/js/config.js Liferay.Loader.addModule({ …… }); Liferay.Loader.addModule({ …… });
Caricamento via Liferay AMD Loader
![Page 42: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/42.jpg)
<head> Liferay-JS-Config
header-portlet-javascriptliferay-util:html-top Theme Contributor resources
!</head>
<body> Contenuto della pagina
Script manuali footer-portlet-javascriptliferay-util:html-bottom
!</body>
Caricamento via Liferay AMD Loader
![Page 43: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/43.jpg)
Caricamento via Liferay AMD Loader
Liferay.Loader.addModule({ name: 'named-module', path: '/o/!!.../named-module.js', anonymous: false, });
Liferay.Loader.define( 'named-module', function () { return { … } } );
Liferay.Loader.addModule({ name: 'named-module', path: '/o/!!.../anon-module.js', anonymous: true, });
Liferay.Loader.define( "// nessun nome :( function () { return { … } } );
Named Module Defini2on Anonymous Module Defini2on
Combo Loading?Nessun problema!
Combo Loading?Assolutamente NO!
![Page 44: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/44.jpg)
Vengono concatenate in Combo Load?
Quando viene caricata?
Quando viene eseguita?
Viene eseguita ogni navigazione?
Sì, ma non per gli anonymous
1 volta, al primo require()
1 volta, al primo require()
No!!!! Sono moduli!!!
Caricamento via Liferay AMD Loader
![Page 45: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/45.jpg)
Caricamento via Liferay npm Bundler
![Page 46: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/46.jpg)
Caricamento via Liferay npm Bundler
Liferay.Loader.require('react', function (React) { !!... });
my-awesome-web/!!.../main.es.js import React from 'react';
![Page 47: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/47.jpg)
Caricamento via Liferay npm Bundler
Liferay.Loader.require('[email protected]', function (React) { !!... });
my-awesome-web/!!.../main.es.js import React from 'react';
![Page 48: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/48.jpg)
Caricamento via Liferay npm Bundler
Liferay.Loader.require('[email protected]', function (React) { !!... });
my-awesome-web/!!.../main.es.js import React from 'react';
my-awesome-web/package.json "dependencies": { "react": "^16.0.0" }
![Page 49: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/49.jpg)
Caricamento via Liferay npm Bundler
Liferay.Loader.require('[email protected]', function (React) { !!... });
node_modules/react-redux/main.js import React from 'react';
my-awesome-web/!!.../main.es.js import { connect } from 'react-redux';
![Page 50: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/50.jpg)
bundle.js
App sviluppata
con un framework
front-end moderno
Compilazione
tradizionale
file per file (Babel)
Liferay
npm Bundler
Liferay
AMD Loader
+
Combo Loader
Compilazione
unificata
(CRA, Vue CLI, Angular CLI)
????
(Lasciamo alle;ore il piacere
di deciderlo)
ES2018+ ES5 + AMD Liferay AMD+ Config
ES2018+ ES5 Caricamento…
![Page 51: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/51.jpg)
bundle.js
Compilazione
tradizionale
file per file (Babel)
Liferay
npm Bundler
Liferay
AMD Loader
+
Combo Loader
Compilazione
unificata
(CRA, Vue CLI, Angular CLI)
✅ Componibile ✅ Dipendenze de-duplicate " Molte richieste dal client " Nessuna dead-code elimina8on
✅ Molto o9mizzato ✅ Integrabile a tu<o il tooling " Output opaco " Complessità di integrazione
????
(Lasciamo alle;ore il piacere
di deciderlo)
![Page 52: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/52.jpg)
my-awesome-react-app/build ├── asset-manifest.json ├── index.html └── static/js ├── 1.4e00e461.chunk.js ├── main.3ff68361.chunk.js └── runtime~main.696ab712.js
![Page 53: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/53.jpg)
my-awesome-react-app/build ├── asset-manifest.json ├── index.html └── static/js ├── 1.4e00e461.chunk.js ├── main.3ff68361.chunk.js └── runtime~main.696ab712.js
my-awesome-react-app/build/asset-manifest.json { "main.js": "/static/js/main.3ff68361.chunk.js", }
![Page 54: All Things JavaScript - SMC](https://reader031.vdocuments.us/reader031/viewer/2022020916/61b224f579866e32ad25ddfb/html5/thumbnails/54.jpg)
Carlo CervellinFront-End Engineer
GitHub @crcarlo
Pier Paolo RamonHead of Digital
GitHub @yuchi
TwiBer @_pier
+39 340 1755621
Domande?
Grazie!
#LRBC19