Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM
46
CIRCUIT – An Adobe Developer Event Presented by CITYTECH, Inc. Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM
-
Upload
bob-paulin -
Category
Internet
-
view
88.925 -
download
0
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 of Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Do more with LESS, Handlebars, Coffeescript and other Web Resources in AEM
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
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Where are we now?
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
AEM has great support for:OptimizedCacheable
User ManagedPages
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
The world has changed!
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Users want:Performance
Context
Responsive
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Our view of data has changed:Real Time
Eventually Consistent
Static
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
But wait this doesn't mean we need to open up the dispatcher cache does it?
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
How do we support this without diluting the secret sauce?
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Needs:
Provide Scalable Context
Responsive
Match Data Volatility with Cache Strategy
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
We've already tried to do this on the server.
Look to the Browser for solutions.
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
So what's out there?
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Well a lot actually!
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Handlebars
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Coffeescript
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Coffee → JS
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
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
LESS
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
LESS → CSS
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;}
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Backbone
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Backbone provides Models and Views to Websites
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”}
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Ok so we're buzzword compliant. How does this solve any of our problems?
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
All of these parts are used to build Single Page Applications
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
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”
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
How do I use all this in AEM?
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Design Considerations
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Deciding on where templating should happen
Frontend vs Backend
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
What should be authorable
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Deciding on where data should be stored
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Static Cacheable data could be stored in AEM's JCR
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
More volatile data should be stored in separate services
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Deciding on page layout standards
Columns/RowsDevice Breakpoints
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Packaging in AEM
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Approach #1
Node/Rhino Build and Package
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Approach #2
Web Resource Framework
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Demo Time!
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
References
Sling Web ResourceHandlebarsJS
LESSCoffeescriptBackboneJS
Chaplin
CIRCUIT – An Adobe Developer EventPresented by CITYTECH, Inc.
Bob Paulin@bobpaulin/[email protected]/http://bobpaulin.com
