do more with less, handlebars, coffeescript and other web resources in aem
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!TRANSCRIPT
![Page 1: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/1.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM
![Page 2: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/2.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
tBob Paulin
Independent Consultant Web Centric Platforms Adobe AEM 5.X Continuous Delivery
Chicago Java Users Group (CJUG) Community LeaderNeed a Mentor? [email protected] to Present in Chicago? [email protected]
Proud Father/Husband with 3 kids
@bobpaulin/[email protected]/http://bobpaulin.com
![Page 3: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/3.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Where are we now?
![Page 4: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/4.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
AEM has great support for:OptimizedCacheable
User ManagedPages
![Page 5: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/5.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
The world has changed!
![Page 6: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/6.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Users want:Performance
Context
Responsive
![Page 7: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/7.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Our view of data has changed:Real Time
Eventually Consistent
Static
![Page 8: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/8.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
![Page 9: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/9.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
But wait this doesn't mean we need to open up the dispatcher cache does it?
![Page 10: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/10.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
How do we support this without diluting the secret sauce?
![Page 11: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/11.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Needs:
Provide Scalable Context
Responsive
Match Data Volatility with Cache Strategy
![Page 12: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/12.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
We've already tried to do this on the server.
Look to the Browser for solutions.
![Page 13: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/13.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
So what's out there?
![Page 14: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/14.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Well a lot actually!
![Page 15: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/15.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Handlebars
![Page 16: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/16.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
![Page 17: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/17.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
![Page 18: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/18.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Coffeescript
![Page 19: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/19.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Coffee → JS
![Page 20: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/20.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
class Person work: -> “do something”
class Developer extends Person work: -> “code”
class Manager extends Person work: -> “nothing”
bob = new Developersam = new Manager
console.log “Bob creates “ + bob.work()console.log “Sam creates “ + sam.work()
Output:
Bob creates codeSam creates nothing
![Page 21: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/21.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
LESS
![Page 22: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/22.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
LESS → CSS
![Page 23: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/23.jpg)
CIRCUIT – An Adobe Developer EventPresented 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;}
![Page 24: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/24.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Backbone
![Page 25: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/25.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Backbone provides Models and Views to Websites
![Page 26: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/26.jpg)
CIRCUIT – An Adobe Developer EventPresented 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”}
![Page 27: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/27.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Ok so we're buzzword compliant. How does this solve any of our problems?
![Page 28: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/28.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
All of these parts are used to build Single Page Applications
![Page 29: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/29.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
![Page 30: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/30.jpg)
CIRCUIT – An Adobe Developer EventPresented 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”
![Page 31: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/31.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
How do I use all this in AEM?
![Page 32: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/32.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Design Considerations
![Page 33: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/33.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Deciding on where templating should happen
Frontend vs Backend
![Page 34: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/34.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
What should be authorable
![Page 35: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/35.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Deciding on where data should be stored
![Page 36: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/36.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Static Cacheable data could be stored in AEM's JCR
![Page 37: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/37.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
More volatile data should be stored in separate services
![Page 38: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/38.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Deciding on page layout standards
Columns/RowsDevice Breakpoints
![Page 39: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/39.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Packaging in AEM
![Page 40: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/40.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Approach #1
Node/Rhino Build and Package
![Page 41: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/41.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Approach #2
Web Resource Framework
![Page 42: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/42.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
![Page 43: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/43.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
![Page 44: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/44.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Demo Time!
![Page 45: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/45.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
References
Sling Web ResourceHandlebarsJS
LESSCoffeescriptBackboneJS
Chaplin
![Page 46: Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM](https://reader034.vdocuments.mx/reader034/viewer/2022052505/554f606bb4c905bb178b46bb/html5/thumbnails/46.jpg)
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Bob Paulin@bobpaulin/[email protected]/http://bobpaulin.com