Creating a Flexible AEM Architecture
•Download as PPTX, PDF•
2 likes•343 views
The document discusses creating flexible AEM architectures and implementing clean component-based architectures. It advocates starting with an architecture to guide development rather than delaying architecture. Progressive web apps are presented as having the broadest deployment footprint compared to other application types. The document also discusses using atomic design systems and component systems like React to achieve reuse.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Creating a Flexible AEM Architecture
Similar to Creating a Flexible AEM Architecture (20)
More from Evolve The Adobe Digital Marketing Community
More from Evolve The Adobe Digital Marketing Community (17)
Recently uploaded
Recently uploaded (20)
Creating a Flexible AEM Architecture
- 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
- 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 gordon.pike@3sharecorp.com 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
Editor's Notes
- Architectural planning is a crucial part of any development process. Not planning doesn’t mean you don’t have an architecture, it might not be the one you want. A house don’t get built without a plan Without it you may end up with a Winchester Mansion Sarah Winchester 161 rooms 34 years of construction Most from hand drawn sketches from Mrs .Winchester after a séance. Stair that go up until they reach the ceiling then just stop Doors and stairways that lead nowhere A closet door in the second floor séance room opens onto a first-floor sink several feet below. Mrs. Winchester usually covered up mistakes by building around them
- A delay in implementation upfront Can save time later Avoid pitfalls and wrong turns Having an Architectural design or plan "IS" progress .
- A little upfront planning can make the whole process more efficient. Saving time later Architecture doesn’t need to be complicated in fact it should be just enough but no more Architecture, testing, build processes all help you move with more confidence Without it you may make great progress at first But over time the weight of undesired tech debt can bring progress to a halt. It may take great effort to move inches where you used to move yards
- Architecture is an ongoing concern Production systems Changes in business or available systems change Architectures need to keep pace
- Instead of waiting for perfection Make a plan Change it as you learn more Refine it at will
- Architecture Goals Reliability Cloud first Always up Agility Never paint yourself in a corner Reduce Costs Keep it simple Retire old systems Retire Technical Debt Don’t write new functionality without ripping out the old Story of LQ v1 still having a couple of services while v3 was mainline Operational Excellence Planned and built in Plan on how to Support Troubleshoot – logs that help maintain Innovate Bring in new technology when it solves a problem Not when it scratches an itch
- Discipline Stick to the plan Consistency Creative Constraint Repetition Governance Validate the Architecture
- The paradox that constraint actually frees us Artist create in constraints There are over 87,000 drink combinations at Starbucks Too many choices can prolong or prevent decisions Think about that the next time you are stuck in line
- AEM should be an integral part of the enterprise not detached from it
- AEM is an investment Companies that only use it for marketing sites only scratch the surface of it's potential They have content in other systems for other apps When it can do more It shouldn't be relegated to the corner Rather be a central player in the architecture
- Centralize content so it can be used across the enterprise Some organizations have content in multiple silos Across departments Divisions Applications Mobile vs Desktop Marketing verses others Story about client who has content loaded to Google Drive Then downloaded to create different renderings Then dispersed across multiple systems Content in one place Integrated with creative tools Translation renderings Silos and Dante's circles of hell
- Content As A Service An abstraction layer over data sources Buffering caching Pulling data sources together Making it available across the enterprise Adding value in combining Integrated with creative suite Pulling in Analytics Personalization
- Hybrid CMS Classic Headless Content Media Text or copy Integrated With Analytics Campaign Target
- Building a strategy for how applications are built To cover the most targets Always expanding targets
- The mobile gap is growing Mobile should be a focus Users want mobile app experience Not a slower desktop browser The mobile strategy needs to be fast, reliable and engaging But no one downloads mobile apps anymore 65% of mobile users download 0 apps, 80% of apps that are downloaded, are uninstalled within a week and 25% are deleted after only one use. Given the investment, does it make sense to build something only 1 out of 10 people are going to use after one week?
- Multi Page Single Page Native Specific AMP Accelerated Mobile Pages
- Tradeoffs Authorability Flexibility AEM SPA Aem client lib generator Front End Maven plugin
- Only PWA Hits all 13 targets Can be upload to all stores Google Play Apple IOS and OX Windows Best Bang For Buck
- PWA is and SPA Service Workers Push notifications Save to home screen First class mobile experience
- Reliable Engaging Fast Save To Home Screen
- More than a replacement for a mobile app Has better results Companies seeing Increased profit Best Western River North 300% Mobify 20% Lancome 16% West Elm 9% Increase in recovered abandoned shopping carts Lancome 8% Jumia 9x Customer engagements increased Pinterest 60% increase Forbes 2 times increase in session length Lancome 53% MakeMyTrip 160% Twitter 25% Trivago 150% more repeat visits. Cost reduction in development and maintenance as much as 33% One team common skillset https://www.pwastats.com/
- Some types can be used together Granite UI and AMP PWA and AMP AMP for SEO Granite UI with SPA or PWA with SPA Editor
- Component strategy Reuse Consistency
- Design Systems not just for designers
- Bottom down verses Top down Not new but Brad Frost put a name to it: Atomic Design System
- Atomic Design Atoms HTML tags, such as a form label, an input or a button. Molecules A search component Organisms Page header Templates Page layout Pages Page instance
- Angular and React supported by SPA Editor React and Vue work well for components because of Virtual Dom Rendering is making changes in Virtual DOM and using that to render DOM changes
- Web Components Custom Elements Shadow DOM HTML templates Shadow DOM - Virtual DOM Shadow DOM is a browser technology designed primarily for scoping variables and CSS in web components. The virtual DOM is a concept implemented by libraries in JavaScript on top of browser APIs.
- Component reuse only happens when they are marketed Component Explorers help authors discover components As well as test and document
- Provide marketing of component Documentation of component Parameters Options etc. Testing of component Demonstration of edge cases etc.
- Example
- Pick a stack