Presentation about how to apply in an adaptive-responsive way multiple javascript templates for different clients in a single page application.

1. Adaptive Templating
in SPA(s) and/or other corporate environments

2. P001
P002
Randy Daal
“randynamic”
!
randy@frontmen.nl
Volkert Paap
“paapster”
!
volkert@frontmen.nl

3. This presentation is...
• part (imaginary) case study!
• part lessons learned!
• part future-thinking

4. • 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 study
unfortunately not yet
public as of May 2014 :-(

5. 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

6. 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

7. What is responsive?

8. What is responsive?

9. 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

10. What is adaptive?

11. What is adaptive?

12. Comparing RWD & AWD
• Mostly CSS only!
• Slightly different in approach

15. + all the “normal” usual suspects
Mobile
Desktop

16. === (too) many combinations

17. Imagine you have this

18. And you need to support this

19. Really? Is this all the space?

20. An example of a case study
1
2

21. An example of the case study
2 31

22. With a couple of extra requirements

23. With a couple of extra requirements

24. With a couple of extra requirements

25. 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?

26. You can’t get there from here
• Development of only single HTML-views makes it
difficult near-impossible to then think adaptive

27. How

28. 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)

29. 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

30. How does JS
TPL work

31. Having more JS
TPL, for different
devices and the
advisor

32. • You’ve got (the perfect) conditions, to make your life
easy
The best My favourite ideal conditions

33. The SPA architecture
concept

34. 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!

35. 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

36. The solution in code

37. The page

38. Bootstrap

39. The component
https://github.com/FrontMen/curl-adaptive-handlebars

40. The advisor

41. The templates

43. Questions?

44. volkert@frontmen.nl
randy@frontmen.nl