Evolve 19 | Gordon Pike | Prepping for Tomorrow - Creating a Flexible AEM Architecture

Information about Evolve 19 | Gordon Pike | Prepping for Tomorrow - Creating a Flexible...

Published on August 15, 2019

Author: evolve_conference

Source: slideshare.net

Content

1. #evolve19 PREPPING FOR TOMORROW Gordon Pike August 06, 2019 CREATING A FLEXIBLE AEM ARCHITECTURE

2. #evolve19 2 WHY ARCHITECTURE MATTERS FAILING TO PLAN IS PLANNING TO FAIL

3. #evolve19 3 • Takes too long upfront • Delays any real progress • Limits creativity • Not part of an Agile process MYTHS OF ARCHITECTURE LIES WE TELL OURSELVES ABOUT ARCHITECTURE

4. #evolve19 4 START FAST - OR - FINISH FAST WHY ARCHITECTURE TURBO CHARGES YOUR EFFORTS

5. #evolve19 5 Projects have finish lines, architectures don’t.

6. #evolve19 6 “Continuous Improvement is better than delayed perfection” Mark Twain

7. #evolve19 7 Architecture Goals Reliability Agility Reduce Costs Retire Technical Debt Operational Excellence Innovate GOALS WHAT A GREAT ARCHITECTURE SHOULD MAXIMIZE

8. #evolve19 8 Discipline Consistency Creative Constraint Repetition Governance IMPLEMENTATION HOW TO IMPLEMENT A CLEAN ARCHITECTURE

9. #evolve19 9 ARCHITECTURE IS MAKING THE MOST OF OUR CONSTRAINTS “The more constraints one imposes, the more one frees one’s self. And the arbitrariness of the constraint serves only to obtain precession of execution.” Igor Stravinsky (Composer)

10. #evolve19 10 AEM IN THE ENTERPRISE HOW AEM FITS IN AN ENTERPRISE ARCHITECTURE

11. #evolve19 11

12. #evolve19 12

13. #evolve19 13 • Client Layer • All clients access data through presentation layer • Content Layer • AEM • Sling Models • Content Fragments • Content Models • Data Layer • Services • Databases • Third Party AEM AS A CONTENT SERVICE AEM AT THE CENTER NOT THE CORNER A c c e s s

14. #evolve19 14 • Export Content • Content Fragments • Sling Models • Content Models • DAM • Multiple Renderings • Copy • Translation • Personalization • Analytics AEM AS A HYBRID CMS AEM THE CONTENT SERVICE LAYER

15. #evolve19 15 APPLICATION TYPES CHOOSING AN APPLICATION STRATEGY

16. #evolve19 16 DEVICE MARKET SHARE BY OS JUNE 2019 • Mobile lead is increasing • Design for mobile • Users want a first class mobile experience that is: – Fast – Reliable – Engaging • Design for Desktop • Browser • Windows App Store

17. #evolve19 17 APPLICATION TYPES Multi Page App Granite UI AMP Single Page App Traditional SPA AEM SPA PWA Native IOS Android Windows EXE Mac OSX Specialized Chatbot Voice

18. #evolve19 18 MPA AND SPA APPLICATION STRATEGIES USING WEB TECHNOLOGIES TO DELIVER APPLICATIONS Strengths • Authorability • Speed to production Weaknesses • Limited channel coverage Granite UI Strengths • Performance • Google Cache Weaknesses • Limited Html elements • No JavaScript AMP Strengths • Authorability • AEM Layout • SPA Components Weaknesses • Not as flexible as external SPA AEM SPA Strengths • Performance • Client side Weaknesses • SEO SPA Strengths • Fast • Reliable • Engaging • Diverse deployment targets Weaknesses • SEO • Authorability PWA Authorability

19. #evolve19 19 APPLICATION TYPE TARGET DEPLOYMENT PWA HAS THE BROADEST POSSIBLE DEPLOYMENT FOOTPRINT Target Granite UI SPA PWA AMP IOS Native Android Native Windows EXE Mac OSX Web √ √ √ √ Tablet √ √ √ √ √ √ Mobile Web √ √ √ √ Windows Desktop √ √ Mac Desktop √ √ Chrome OS √ Android √ √ √ IOS √ √ √ Chrome Extensions √ Google Play Store √ √ Apple IOS Store √ √ Apple Mac Store √ √ Windows Store √ √ Total 3 5 13 3 2 2 3 3

20. #evolve19 20 A PWA IS SPA THAT FOLLOWS BEST PRACTICES SPA PWA Exemplar y PWA SPA BasicPWA ExemplaryPWA Site's content is indexed by Google Schema.org metadata is provided where appropriate Social metadata is provided where appropriate Canonical URLs are provided when necessary Pages use the History API Content doesn't jump as the page loads Pressing back from a detail page retains scroll position on the previous list page When tapped, inputs aren't obscured by the on screen keyboard Content is easily shareable from standalone or full screen mode Site is responsive across phone, tablet and desktop screen sizes Any app install prompts are not used excessively The Add to Home Screen prompt is intercepted First load very fast even on 3G Site uses cache-first networking Site appropriately informs the user when they're offline Provide context to the user about how notifications will be used UI encouraging users to turn on Push Notifications must not be overly aggressive. Site dims the screen when permission request is showing Push notifications must be timely, precise and relevant Provides controls to enable and disable notifications User is logged in across devices via Credential Management API User can pay easily via native UI from Payment Request API. •Site is served over https Pages are responsive on tablets and mobile devices All app URLs load while offline Metadata provided for Add To Home Screen First load fast even on 3G Site Works cross-browser Page transitions don’t feel like they block on the network Each page has a URL •Single Page Web Application JavaScript based WebSocket Ajax

21. #evolve19 21 WE’VE SEEN THE FUTURE AND IT’S PWA

22. #evolve19 22 Starbucks Doubled the number of users who order online. The PWA is 99.84% smaller than the old mobile app. Best Western River North Hotel Experienced a 300% increase in revenue due to new PWA. Trivago Saw a 150% increase in engagement for people who saved to home screen, which led to 97% increase in click outs to hotel offers.

23. #evolve19 23 HYBRID APPLICATION TYPES OVERLAP OF TYPES AEM (Granite) SPA PWA AMP

24. #evolve19 24 COMPONENT ARCHITECTURE HOW COMPONENTS FIT IN OUR ARCHITECTURE

25. #evolve19 25 • Design System • Page • Atomic • UI Framework • React • Vue • Angular • Component System • Web Components • React Components • AEM Component • Component Explorer • Storybook • Stencil COMPONENT REUSE ACHIEVING COMPONENT REUSE Design System UI Framework Component System Component Explorer

26. #evolve19 26 ATOMIC DESIGN SYSTEM FRAMEWORK FOR COMPONENT DESIGN BOTTOM UP TOP DOWN

27. #evolve19 27 ATOMIC COMPOSITION Html Elements • Basic building blocks that can’t be split any further without functioning • Examples: form labels, inputs, buttons Simple Groups of UI Elements • Basic components that have a single responsibility • Example: Search Form Component (Form Label, search input, button) Complex UI Components • Advanced components that combine multiple molecules • Example: Header Component (Search Form, Menu and Logo) Page Level Components • Page layout components • Examples: Home page template, product page Specific Instances of Templates • Pages addressable by a URL • Example: Dot.com Home Page

28. #evolve19 28 ATOMIC COMPOSITION

29. #evolve19 29 UI FRAMEWORK • Steep learning curve • SPA editor support • Directives, markers on DOM to attach behavior • 500+ KB Angular • Medium learning curve • SPA editor support • UI and behavior combined in component • 100 KB • Virtual DOM React • Easiest to learn • Not supported by SPA editor yet • UI and behavior combined in component • 80 KB • Virtual DOM • Smallest footprint Vue

30. #evolve19 30 COMPONENT SYSTEM • Shadow DOM • Custom Html elements • UI and Behavior Web Components • Virtual DOM • UI and Behavior React • Granite UI • Responsive Grid Adobe

31. #evolve19 31

32. #evolve19 32 COMPONENT EXPLORERS - TEST AND DOCUMENT Web Components Stencil JS Angular, React or Vue Storybook React, Vue Styleguidest Angular Angular Playground

33. #evolve19 33 COMPONENT EXPLORER - STORYBOOK

34. #evolve19 34 HEADLESS PWAHYBRID (PWA)CLASSIC (MPA) Atomic Atomic Atomic Granite UI React Granite UI React Coral UI Web Component Custom EXAMPLE STACKS Storybook Storybook Web Component

35. #evolve19 35 ABOUT US Facebook www.facebook.com/3share Mail [email protected] Twitter twitter.com/ 3SHARE twitter.com/gpike Linkedin www.linkedin.com/company/3- share-corporation www.linkedin.com/in/gordon- pikePhoto placeholder Gordon Pike Chief Architect 3|Share Contact Us www.3sharecorp.com Phone 720.608.7890

36. #evolve19 THANK YOU!

#evolve19 presentations

Related presentations


Other presentations created by evolve_conference