Client Side Templating using JavaScript

Transcript

1. Client-Side Templating with JavaScript SPA (Single Page Apps) Jake Rutter
2. What it isn’t It’s not a replacement for JSP / JAVA It’s not suitable for all types of website pages Trying to be something it’s not, it knows its place in the STACK.
3. What it IS!!! Bleeding Edge Technology! UI team has more ownership over front-end to move faster! A better customer experience - NO page reloads. Real-time apps… A new way of thinking…
4. Examples we have done today BazaarVoice Ratings Landing Page - DEMO LINK WSET Training Application - DEMO LINK Project Zulu Wine Cellar - DEMO LINK Real-Time Voting App - DEMO LINK
5. Which Framework suits us best? VS. Angular JS Backbone JS
6. AngularJS gives us more out of the gate and has a better support community AngularJS is a MVC open-source framework built by Google. Out of the box features include: filtering, sorting, routing, conditional templating. It has really good support, an active development roadmap and has been around since 2009. Companies using Angularjs: Netflix, Youtube, Salesforce.
7. Backbone.js leaves more to the imagination, un-opinionated software Backbone.js as it’s name suggests is just a backbone, you need to build everything on top of it. It’s great for bigger teams who need to build specific components to fit in with their application architecture. Backbone has been around since 2010. Companies using backbone: USA Today, Hulu, Gilt.
8. Client Side Templating Pros Page Load is Faster* Separation business logic from UI With the right team/skills, more can be done faster in the front-end Front-end team has full ownership of UI and dependent on what’s available in REST. Less hand holding from developers req’d. Templates can be cached via Akamai CDN The backend primarily serves as a JSON-serving API service, cleaner.
9. Client Side Templating Cons Risk as more JS Bundles on page can slow down load times if optimization is not top of mind when deploying to Production. Web bots cannot crawl your JavaScript web app, making SEO a huge risk. New Technology - learning curve.
10. Key principles to doing it right Modularity - Being more organized to provide modules that can be used across countries and brands. DRY “Dont Repeat Yourself”. Optimization - Use tools such as GruntJS to create development and build versions of code for optimization. Unit Testing - JavaScript Unit Testing using GruntJS, similar to the Back- end Jenkins Continuous Integration JavaScript Knowledge - Need more spread across teams. JavaScript becoming more than just a scripting language for DOM manipulation. Node.js is really pushing the boundaries of what can be done in JavaScript.
11. How do we roll-out? Educate the front-end development teams. Need a more robust API to be able to support different areas of the websites. Need to have the right people in place to support this. Any other ideas?