...

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

by bob-paulin

on

Report

Category:

Internet

Download: 0

Comment: 0

88,919

views

Comments

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 web applications quickly. These tools also focus on creating more extensible, productive, and performant code. However all of these tools require a JavaScript runtime environment such as Node.js or Rhino to compile to JavaScript or CSS. Some of these tools are supported Out of the Box in AEM and others need a little help. Learn about different strategies to make these tools available in your next or current AEM project. This session will include a demo and source code for all examples. No more excuses just better results!
Download Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM

Transcript

  • 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
  • Fly UP