Embed Size (px)
DESCRIPTION
Presentation about how to apply in an adaptive-responsive way multiple javascript templates for different clients in a single page application.
Citation preview
Adaptive Templatingin SPA(s) and/or other corporate environments
This presentation is...• part (imaginary) case study!
• part lessons learned!
• part future-thinking
• Based on something new @dutch bank!
• It’s a new core product introducing a new way of personal banking!
• It’s technically based on an adaptive-responsive SPA(s) app
Case studyunfortunately not yet
public as of May 2014 :-(
Site goals of the client• Give end-users a personal (banking) environment!
• End-users will have access to their (bank) service everywhere!
• Experiment with new design to support multi device!
• Audience will be global and using a wide range of target devices
What is responsive?
• Responsive web design is a design approach aimed at crafting sites to provide an optimal viewing experience - easy reading and navigation with a minimum of resizing, panning, and scrolling - across a wide range of devices...
Shorthand “RWD”
http://en.wikipedia.org/wiki/Responsive_web_design
What is responsive?
What is responsive?
What is adaptive?
• Adaptive websites are designed to respond and adapt to different screen sizes, using responsive techniques, and to adapt to different User requirements based on different device capabilities.
Shorthand “AWD”
http://en.wikipedia.org/wiki/Adaptive_web_design
What is adaptive?
What is adaptive?
Comparing RWD & AWD• Mostly CSS only!
• Slightly different in approach
+ all the “normal” usual suspects
Mobile
Desktop
=== (too) many combinations
Imagine you have this
And you need to support this
Really? Is this all the space?
An example of a case study
1
2
An example of the case study2 31
With a couple of extra requirements
With a couple of extra requirements
With a couple of extra requirements
Where do RWD meets AWD?• At the point where you can optimise the most for the client!
• Where UX wants to have an optimised user experience
• Do you really want to send HTML/CSS/JS to the client which is not used?
You can’t get there from here• Development of only single HTML-views makes it
difficult near-impossible to then think adaptive
How
Something about JS template languages
• JS TPL help in many ways
• There are plenty languages to choose from (TPL chooser)
• It started with Mustache based on Ctemplate & ET
http://garann.github.io/template-chooser/http://www.jsdb.io/application-tools/templating/?sort=trending
Shorthand “JS TPL”
http://en.wikipedia.org/wiki/Mustache_(template_system)
Why do we benefit from JS TPL• Separation of concerns
• Logic-less
• DRY
• Run on client- and server side
• TPL can be precompiled to JS
• Fast
• Can be fed with different types of data
How does JS TPL work
Having more JS TPL, for different devices and the
advisor
• You’ve got (the perfect) conditions, to make your life easy
The best My favourite ideal conditions
The SPA architecture concept
Lessons learned• Not everybody is ready for it
• UX is overwhelmed with the amount of possibilities
• Developers….
• Component based building becomes almost a requirment
• But it’s great to use!
Future thinking• It’s just great and very useful
• The possibilities are endless
• But we need to be very careful, because overkill is created easily
The solution in code
The page
Bootstrap
The component
https://github.com/FrontMen/curl-adaptive-handlebars
The advisor
The templates
Questions?
