APACHE SLING & FRIENDS TECH MEETUP SEPTEMBER Integrating a Modern Frontend Setup with AEM Natalia Venditto, Netcentric

Transcription

1 APACHE SLING & FRIENDS TECH MEETUP SEPTEMBER 2018 Integrating a Modern Frontend Setup with AEM Natalia Venditto, Netcentric

2 A modern frontend setup 2

3 How do we understand a modern setup? A modern setup...does not necessarily include the latest tool in the market it's standard enough that it can be easily maintained does not force everyone in the team to a high knowledge ramp up investment it implements industry (current) best practices...requires a strategy 3

4 / unsplash.com Defining a frontend strategy! 4

5 The `What?` and `How?` questions questions for your client HOW do we achieve? questions for your team / unsplash.com WHAT? browser support, performance reqs, http protocol (ie: http/2), accessibility, analytics, testing strategy, more productivity? 5

6 The `Which?` questions Which JS ECMAScript Spec Frameworks State Manag. 3rd party/apis Which CSS Which Build Tools/ Setup Which AEM features? Which Preprocessor? (SASS, LESS, PostCSS) Bundlers Task Runners Linters/Coverage Loaders/Plugins What version of AEM? What new features? Clientlibs strategy 6

7 The win/win results matrix increased performance (author + end user experience/roi, etc) enhanced productivity/flexibility (code quality, testability, maintenance, scalability) guaranteed innovation/creativity (browser feature support, accessibility) 7

8 Study case: directory structure 8

9 Directory structure. ~ -- [PROJECT-ID]-3rd-party/ -- [PROJECT-ID]-complete-package/ -- [PROJECT-ID]-components/[PROJECT-ID]-components-package/ -- src/main/jcr_root/apps/[project-id]/ -- commons/ -- components/ -- component1/ -- component2/ -- // as many components -- pages/ -- [PROJECT-ID]-configuration/ -- [PROJECT-ID]-demo-content/.pom.xml 9

10 Directory structure <?xml version="1.0" encoding="utf-8"?> <jcr:root xmlns:cq=" xmlns:jcr=" jcr:primarytype="cq:clientlibraryfolder" categories="[project-id.publish.component1 ]" jsprocessor= [min:gcc;obfuscate=true] cssprocessor= [min:gcc] /> -- components/component1/ -- clientlibs/ -- author/ -- publish/ --.content.xml -- component1.publish.entry.js -- component1.publish.entry.scss -- css.txt -- js.txt --.content.xml -- component1.html 10

11 Study case: tools and configuration 11

12 Tools and configuration 12

13 Tools and configuration File System Loaders Plugins Output configure webpack to configure webpack to read configure webpack to traverse our component files according to output files in designated folders, collect loaders, and perform targets, so that we are able [name-of-component].entry.js additional operations to minify them, [name-of-component].entry.scss files (webpack allows us to configure entry points per path or other params) (transpilation, tree-shaking and DCE, etc) aggregate them and compress them (in AEM with gcc) 13

14 Setup Tools nvm install --lts cd [PROJECT-ID]-components/[PROJECT-ID]-components-package mkdir frontend cd frontend npm init y // generates package.json npm install webpack - save-dev // maintain as dev dependency //successive installations npm install modulename --save --save-dev 14

15 Setup Tools test: /\.css$/, Transpiling Transpiling of ES (to JS ES5) of CSS pre processed code Linting Browser Support 15

16 Setup configuration. ~ -- [PROJECT-ID]-components/[PROJECT-ID]-components-package/ -- frontend/ last 2 version --.browserslistrc > 1% --.eslintignore maintained node versions --.eslintcache not dead --.eslintrc --.stylelintcache --.stylintrc --.gitignore --.npmrc -- package.json.pom.xml 16

17 Setup Tools test: /\.css$/, Transpiling Transpiling of ES (to JS ES5) of CSS pre processed code Linting Browser Support Minification Aggregation of JS and CSS 17

18 Directory structure <?xml version="1.0" encoding="utf-8"?> <jcr:root xmlns:cq=" xmlns:jcr=" jcr:primarytype="cq:clientlibraryfolder" categories="[project-id.publish.component1 ]" jsprocessor= [min:gcc;obfuscate=true] cssprocessor= min:gcc] /> -- components/component1/ -- clientlibs/ -- author/ -- publish/ --.content.xml -- component1.publish.entry.js -- component1.publish.entry.scss -- css.txt -- js.txt --.content.xml -- component1.html 18

19 Setup configuration. ~ -- [PROJECT-ID]-3rd-party/ -- [PROJECT-ID]-complete-package/ -- [PROJECT-ID]-components/[PROJECT-ID]-components-package/ -- frontend/ -- build/config/ -- webpack.config.dev.js -- webpack.config.prod.js -- whatever other configs (ie: unit testing, e2e...) -- package.json -- [PROJECT-ID]-configuration/ -- [PROJECT-ID]-demo-content/.pom.xml 19

20 Setup configuration for our frontend code build, we will favor webpack 4 optimized "mode" configuration, over OSGI environment definition, in order to leverage Webpacks caching and performance 20

21 Setup configuration 21

22 Setup configuration may need to update this (default) config for SplitChunkPlugin 22

23 Setup configuration edit the corresponding POM.xml, to make use of the frontend plugin for maven* -> n-plugin?repo=redhat-ga 23

24 Maven frontend plugin 24

25 Syncing with AEM webpack --watch 25

26 Setup configuration -- components/component1/ -- clientlibs/ -- author/ --.content.xml -- component1.author.entry.js -- component1.author.scss -- css.txt -- js.txt -- component1_dialog.js -- publish/ -- _cq_dialog/ --.content.xml -- component1.html 26

27 Setup configuration. ~ -- [PROJECT-ID]-components/[PROJECT-ID]-components-package/ -- frontend/ --.browserslistrc --.eslintignore *.bundle.js --.eslintcache node_modules --.eslintrc *_dialog.js --.stylelintcache build/shared/variabl --.stylintrc es/*.js --.gitignore node/* --.npmrc build/config -- package.json.pom.xml gulpfile.js 27

28 Study case: shipping the code (to the browser) 28

29 Loading styles via Content Policies 29

30 Loading techniques 30

31 Loading: Templating (Sightly, Handlebars...) -- components/component1/ -- clientlibs/ -- author/ -- publish/ -- additional-styles/ <!--/* component1.author */--> <sly data-sly-test="${wcmmode.edit}" data-sly-use.clientlib="${'/libs/granite/sightly/tem plates/clientlib.html'}" categories='[project-id].component1.author'}" />.content.xml component1.add-styles.entry.js component1.add-styles.scss <!--/* component1.publish */--> <sly css.txt data-sly-use.clientlib="${'/libs/granite/sightly/tem plates/clientlib.html'}" js.txt --.content.xml -- component1.html categories='[project-id].component1.publish'}" /> 31

32 Script loading attributes <script src="myproject.component1.js" defer></script> <script src="myproject.component1.js" async></script> <script src="myproject.component1.js" preload></script> <script... 32

33 Lazy Loading 33

34 Inline load + Lazy Loading strategy hero area/above the fold lazy loaded chunks (and resources, such as images) 34

35 Intersection Observers API // test for browser support if (!'IntersectionObserver' in window &&!'IntersectionObserverEntry' in window &&!'intersectionratio' in window.intersectionobserverentry.prototype) { // load polyfill now } 35

36 LazyLoading and SEO SSR (server side rendering techniques) Content Fragments Experience Fragments 36

37 Demo Time (added backup) 37

38 Loading styles via Content Policies 38

39 Loading styles via Content Policies 39

40 Loading styles via Content Policies clientlibs="some.c ategory" 40

41 Thank you! 41