adaptive templating in spa(s) and/or other corporate environments
DESCRIPTION
Presentation about how to apply in an adaptive-responsive way multiple javascript templates for different clients in a single page application.TRANSCRIPT
![Page 1: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/1.jpg)
Adaptive Templatingin SPA(s) and/or other corporate environments
![Page 3: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/3.jpg)
This presentation is...• part (imaginary) case study!
• part lessons learned!
• part future-thinking
![Page 4: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/4.jpg)
• 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 :-(
![Page 5: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/5.jpg)
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
![Page 6: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/6.jpg)
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
![Page 7: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/7.jpg)
What is responsive?
![Page 8: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/8.jpg)
What is responsive?
![Page 9: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/9.jpg)
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
![Page 10: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/10.jpg)
What is adaptive?
![Page 11: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/11.jpg)
What is adaptive?
![Page 12: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/12.jpg)
Comparing RWD & AWD• Mostly CSS only!
• Slightly different in approach
![Page 13: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/13.jpg)
![Page 14: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/14.jpg)
![Page 15: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/15.jpg)
+ all the “normal” usual suspects
Mobile
Desktop
![Page 16: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/16.jpg)
=== (too) many combinations
![Page 17: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/17.jpg)
Imagine you have this
![Page 18: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/18.jpg)
And you need to support this
![Page 19: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/19.jpg)
Really? Is this all the space?
![Page 20: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/20.jpg)
An example of a case study
1
2
![Page 21: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/21.jpg)
An example of the case study2 31
![Page 22: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/22.jpg)
With a couple of extra requirements
![Page 23: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/23.jpg)
With a couple of extra requirements
![Page 24: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/24.jpg)
With a couple of extra requirements
![Page 25: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/25.jpg)
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?
![Page 26: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/26.jpg)
You can’t get there from here• Development of only single HTML-views makes it
difficult near-impossible to then think adaptive
![Page 27: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/27.jpg)
How
![Page 28: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/28.jpg)
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)
![Page 29: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/29.jpg)
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
![Page 30: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/30.jpg)
How does JS TPL work
![Page 31: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/31.jpg)
Having more JS TPL, for different devices and the
advisor
![Page 32: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/32.jpg)
• You’ve got (the perfect) conditions, to make your life easy
The best My favourite ideal conditions
![Page 33: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/33.jpg)
The SPA architecture concept
![Page 34: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/34.jpg)
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!
![Page 35: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/35.jpg)
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
![Page 36: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/36.jpg)
The solution in code
![Page 37: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/37.jpg)
The page
![Page 38: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/38.jpg)
Bootstrap
![Page 39: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/39.jpg)
The component
https://github.com/FrontMen/curl-adaptive-handlebars
![Page 40: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/40.jpg)
The advisor
![Page 41: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/41.jpg)
The templates
![Page 42: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/42.jpg)
![Page 43: Adaptive templating in SPA(s) and/or other corporate environments](https://reader038.vdocuments.us/reader038/viewer/2022110308/557f16b7d8b42aea318b4959/html5/thumbnails/43.jpg)
Questions?