Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Build single page applications using AngularJS on AEM

6.906 visualizaciones

Publicado el

  • Sé el primero en comentar

Build single page applications using AngularJS on AEM

  1. 1. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Build single page applications using AngularJS on AEM David Benge | Lead Computer Scientist
  2. 2. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. What Is a Single Page Application? wikipedia: “A single-page application (SPA), is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application. In a SPA, either all necessary code – HTML, JavaScript, and CSS – is retrieved with a single page load, or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions. The page does not reload at any point in the process, nor does control transfer to another page” 2
  3. 3. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Single Page Application Pro’s and Con’s Pro’s  Use of page fragments or partials speeds up the loading of secondary pages  Better mobile device experience  Reduced number of resource requests across the network greatly speeds up the applications page transitions  Lack of full page refresh creates a more app like smoothness leading to a richer user experience 3 Con’s  Has Search Engine Optimization issues due to the fact that pages/views rendering is driven via javascript.  Components and some core libs rely on the document Ready event to initialize  Speed of the initial load can be slow  Not social sharing friendly. Twitter and Facebook and others have issues when users try to share SPA pages.
  4. 4. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. The Technical Reasons Are Great But Why Did I really Choose To Do An SPA? 4 • The debate on my development team between web and native has become a religious war. It was time to see if we could get the experience we want on the mobile experience without building a native application. • Mobile applications have their place, but I believe a well built site can convey the same information. • Informational mobile apps without shared web content create data silos that make discoverability and interoperability difficult. • Responsive is a nice start but we wanted to take it further. We are also experimenting with a concept we call ReDaptive. Watch our GitHub and YouTube channels for more information in the future on this concept.
  5. 5. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.  Must have native application like smoothness on everything from the high resolution desktop to the smartphone.  Search and social friendly  Works with AEM authoring  Our development pattern needed to be easy to follow and understand  No JSP; all Sightly  Semantic html markup. Each page should be useable as a data record based on markup  Javascript needed to be balanced with markup. Avoid 500 js library include madness 5
  6. 6. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 6 Our Proof Of Concept Combine sling with Angular
  7. 7. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 7 • Custom base page component that allows pages to be either an Angular application entry point or rendered as a view partial • Angular JS code to control the application/site and its view navigation • Rewrite rule to help handle search engines by adding a selector • Based on runmode Base Page includes content or an Angular ui-view element • Responsive design • Custom video component that makes use of Adobe Dynamic Media and native HTML5 video tag markup. Selects best rendition to use based on the video element size and browser device group detected • Use of BrowseCap for device detection • Nearly all Sightly • Use of Less for style • Adobe Analytics for metrics • Uses AdobeAtAdobe boiler plate project - Available in our GIT repo • Creative Cloud Extract used to build site from XD comps • Photoshop used to develop the comps • Adobe Edge inspect used to debug on devices
  8. 8. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. High Level Technical Overview Of The Base Page Component  We created a standard page component that inherits from wcm/foundation/components/page.  This new base page component has a content.html include in the center. This is where our page views get loaded. We change the markup based on if the request was made on a publish or author environment.  If the request was on author we do a standard content include.  If it’s a page request on publish we don’t do the include and just insert the div with the angular ui-view <div class="page-content" ui-view data-sly-test="${teamsitePage.isPublisher && !teamsitePage.isSearchEngine}"></div> <div data-sly-include="content.html" class="page-content" data-sly-test="${!teamsitePage.isPublisher || teamsitePage.isSearchEngine}"></div>  In the base component we also include some meta data. We use this to tell angular and other components how to behave based on the environment. <meta name="publisher" content="${teamsitePage.isPublisher}"/> <meta name="wcmmode" content="${teamsitePage.metaWcmMode}"> 8
  9. 9. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. High Level Technical Overview Of The Standard Page Component  All the pages inherit from the base page  Each new page component includes their markup in a file named content.html  If needed they can include a controller like in this example  The controller code is stored in a client lib under the page component 9 <div class="contact-block" ng-controller="ContactController"> <div class="hi"><span>Hi. </span>How can we help you?</div> <div class="methods"> <div class="method"> <div class="title">Technology Questions</div> <div class="phone">+1 613 857 9233</div> <div class="email">adobe@adobe.com</div> </div> <div class="method"> <div class="title">Work with Us</div> <div class="phone">+1 613 857 9233</div> <div class="email">adobe@adobe.com</div> </div> <div class="method"> <div class="title">Everything Else</div> <div class="phone">+1 613 857 9233</div> <div class="email">adobe@adobe.com</div> </div> </div> </div> </div>
  10. 10. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. High Level Technical Overview Of The Base Page Component Partial Selector  Under the base page component we have a file named partial.html. This file handles any request for a page that has the partial selection appended to it. This file simply includes content.html with No header, No footer, No navigation, just the meaty center of the view in our case.  The partial also includes new metatags with data to replace the header meta data. The new tags are prefixed with partial for example partial:title. Its contents will replace the header metatag’s content for title. The replacement of the metadata is handled by the Angular application. <meta name="partial:keywords" content="${head.keywords}" id="partialKeywords"/> 10
  11. 11. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. High Level Technical Overview Of The Base Page Component Partial Selector We need to tell Angular about the site hierarchy because Angular will be handling navigation from view to view. Angular controls the view loading on the client side via a library called router.ui so it needs to know how map urls to view partials. Under the base page component we have a file named routes.json.jsp. This file provides us a endpoint for Angular’s ui.router to use to load the router and state provider on the fly on the first page load. One thing we do alter on the routes is the value of the templateUrl returned from our routes.json.jsp. On our page path we include a partial selector. Thanks to the magic that is sling when we make that request now we will get just the center conent of the page when we navigate from view to view. 11
  12. 12. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. High Level Technical Overview Of The Base Page Component Angular Router 12 Example output from our routes.json.jsp file is shown to the left. This is an example of how we are rewriting out our routes and re-writing the templateUrl to include the .partial selector. Example /content/teamsite/work.html becomes /content/teamsite/work.partial.html When the application/site is loaded in the browser any link or navigation to a url for example /content/teamsite/work/cmo.html is handled by the $location service. It will resolve the url to the templateUrl which is set to /content/teamsite/work/cmo.partial.html. The request to /content/teamsite/work/cmo.partial.html will be returned as just the center of the view and injected into the existing page.
  13. 13. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. So Far This Is What It Looks Like On The AEM Page Component Side 13
  14. 14. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. High Technical Overview Of The Proof Of Concept – Component Conclusion So that’s it for the AEM side of the application. Once the base component pattern was established it was easy to work with. Its all fairly normal AEM component and page development from that point on. With a few exceptions for stock components that make heavy use of the document ready event. Summary  In author runmode, it will do full page refreshes  Search engine friendly due to the fact there is a full page request  On social shares of a page, the path exists  In publish run mode, the client side will do partial page refresh Thanks to the magic of sling resolution we are able to serve full pages or partials as needed. Every path can be an entry point to our SPA base application. 14
  15. 15. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 15 The Angular Bits
  16. 16. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. The Angular Js bits we used to round out this solution are:  Controller – Controllers ended up being minimally used at the page level. Router.ui – used to load and control the routes. We also use the routing events to load page meta data  Service – We have a service that helps with pulling and setting meta data on the page  Directives – We have a few to provide functionality  Custom html5 video player directive  Explore page directive to help with the scrolling and other ui bits on the explore page  Angular Carousel which drives the image carousels 16
  17. 17. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Whats Next? 17 • We will be adding more functionality to the proof of concept site • We are really liking directives and plan to do more work in that area and investigate using polymer • Clean up of the header libs to remove some of the dependency on document ready event
  18. 18. © 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Code is located in out Github repo https://github.com/AdobeAtAdobe Live site can be found at http://www.adobeatadobe.com Twitter @AdobeAtAdobe Video sessions on this proof of concept will be posted on our YouTube channel https://www.youtube.com/user/AdobeAtAdobe

×