Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM

  • CategoryInternet

  • View88919

Report
  • 1.CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM
2. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. tBob Paulin Independent Consultant Web Centric Platforms Adobe AEM 5.X Continuous Delivery Chicago Java Users Group (CJUG) Community Leader Need a Mentor? mentors@cjug.org Want to Present in Chicago? present@cjug.org Proud Father/Husband with 3 kids @bobpaulin/bob@bobpaulin.com/http://bobpaulin.com 3. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. Where are we now? 4. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. AEM has great support for: Optimized Cacheable User Managed Pages 5. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. The world has changed! 6. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. Users want: Performance Context Responsive 7. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. Our view of data has changed: Real Time Eventually Consistent Static 8. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. 9. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. But wait this doesn't mean we need to open up the dispatcher cache does it? 10. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. How do we support this without diluting the secret sauce? 11. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. Needs: Provide Scalable Context Responsive Match Data Volatility with Cache Strategy 12. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. We've already tried to do this on the server. Look to the Browser for solutions. 13. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. So what's out there? 14. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. Well a lot actually! 15. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. Handlebars 16. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. 17. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. 18. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. Coffeescript 19. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. Coffee → JS 20. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. class Person work: -> “do something” class Developer extends Person work: -> “code” class Manager extends Person work: -> “nothing” bob = new Developer sam = new Manager console.log “Bob creates “ + bob.work() console.log “Sam creates “ + sam.work() Output: Bob creates code Sam creates nothing 21. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. LESS 22. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. LESS → CSS 23. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. .scope { @var: 99px; .mixin () { width: @var; } } .class { .scope > .mixin; } .overwrite { @var: 0px; .scope > .mixin; } .nested { @var: 5px; .mixin () { width: @var; } .class { @var: 10px; .mixin; } } .class { width: 99px; } .overwrite { width: 99px; } .nested .class { width: 5px; } 24. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. Backbone 25. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. Backbone provides Models and Views to Websites 26. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. var blog = new Backbone.Model({ urlRoot: “/blog” title: "My Blog", body: "Cool stuff happening at Circuit" }); blog.save(); book.save({body: "Cool stuff happening at Circuit Conference"}); POST /blog/1 { title: “My Blog”, body: “Cool stuff happening at Circuit” } PUT /blog/1 { title: “My Blog”, body: “Cool stuff happening at Circuit Conference” } 27. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. Ok so we're buzzword compliant. How does this solve any of our problems? 28. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. All of these parts are used to build Single Page Applications 29. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. 30. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. Common Single Page Blockers “I heard it will hurt SEO” “They're all very slow” “My Java Developers don't understand JavaScript” 31. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. How do I use all this in AEM? 32. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. Design Considerations 33. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. Deciding on where templating should happen Frontend vs Backend 34. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. What should be authorable 35. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. Deciding on where data should be stored 36. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. Static Cacheable data could be stored in AEM's JCR 37. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. More volatile data should be stored in separate services 38. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. Deciding on page layout standards Columns/Rows Device Breakpoints 39. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. Packaging in AEM 40. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. Approach #1 Node/Rhino Build and Package 41. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. Approach #2 Web Resource Framework 42. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. 43. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. 44. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. Demo Time! 45. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. References Sling Web Resource HandlebarsJS LESS Coffeescript BackboneJS Chaplin 46. CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. Bob Paulin @bobpaulin/bob@bobpaulin.com/http://bobpaulin.com
Description
In the last few years there has been an explosion in productivity tools for web development. Tools like Less, Handlebars, and CoffeeScript can be used to build rich, interactive…