Building Modern Web Apps: Framework is not a four letter word

JSCamp.asia 2012 presentation discussing the benefits of client-side frameworks, when to use them and why you should use Ember.js for your next web application.

Transcript

1. Building Modern Web Apps Framework is not a four letter word Bradley Priest @bradleypriest bradley@tradegecko.com
2. CoffeeScript + EmberJS 2982 loc Handlebars 5683 loc CoffeeScript + libraries
3. What I'll cover - Existing options when building for the web - When you should use a framework - My recommendation: Ember.js
4. It's no longer good enough to build web apps around full page loads and then "progressively enhance" them to behave more dynamically. Building apps which are fast, responsive and modern require you to completely rethink your approach. This is a big transition to make and it is further complicated by the plethora of great options out there. Don't just sit around and wait for things to shake out. ThroneOfJS
5. Option 1: Just a sprinkle
7. Option 2: Server-Side Rendering Twitter: Improving performance on twitter.com Basecamp Next: How Basecamp Next got to be so damn fast without using much client-side UI
8. Server-Side - By hand
9. Server-Side - PJAX/Turbolinks ... it keeps the current page instance alive and replaces only the body and the title in the head.
10. Option 3: Client-Side Rendering Send JSON... or BSON or XML or ... Cons - May duplicate logic Pros - Less data - Reusable API - More flexible
11. Client-side - By hand
12. Client-side - By hand
13. Client-side - By hand
14. A Little Structure If you're building something substantial, use a framework (or write your own...*) * I'm kidding please don't write a new framework, every time someone writes a new JS MVC framework god kills a kitten. Seriously, there's plenty of existing frameworks that would love your help.
15. But which one?
16. Short Answer: It depends (Lame right?) Not all frameworks are equal And that's not a bad thing
17. What are you building? Traditional Website - Basic user interaction - JS mostly presentational - Little/No AJAX
18. What are you building?
19. What are you building? Interactive Website - Some user-interaction - Page reflects interactive data - Multiple areas can change
21. What are you building? Web Application - Lots of user-interaction - Frequent data communication - Could constitute a desktop/mobile app
26. Source: https://speakerdeck.com/tomdale/your-website-is-just-an-app
27. Source: https://speakerdeck.com/tomdale/your-website-is-just-an-app
28. Ember - Convention over Configuration - Laziness is a virtue Manage the complex, boring stuff for you and leaves you free to work on the exciting problems
29. Laziness is a Virtue - Don't update the DOM unnecessarily - Truth in JS, Not in DOM
30. { todos: [ { name: "Get out of bed", isDone: false }, { name: "Brush Teeth", isDone: false }, { name: "Put on pants", isDone: false }, ] itemsLeft: 3, completedItems: 0 }
31. { todos: [ { name: "Get out of bed", isDone: true }, { name: "Brush Teeth", isDone: false }, { name: "Put on pants", isDone: false }, ] itemsLeft: 2, completedItems: 1 } Dom Changes: 3
32. { todos: [ { name: "Get out of bed", isDone: true }, { name: "Brush Teeth", isDone: true }, { name: "Put on pants", isDone: false }, ] itemsLeft: 1, completedItems: 2 } Dom Changes: 6
33. { todos: [ { name: "Get out of bed", isDone: true }, { name: "Brush Teeth", isDone: true }, { name: "Put on pants", isDone: true }, ] itemsLeft: 0, completedItems: 3 } Dom Changes: 9
34. Vs
35. { todos: [ { name: "Get out of bed", isDone: false }, { name: "Brush Teeth", isDone: false }, { name: "Put on pants", isDone: false }, ] itemsLeft: 3, completedItems: 0 }
36. { todos: [ { name: "Get out of bed", isDone: true }, { name: "Brush Teeth", isDone: false }, { name: "Put on pants", isDone: false }, ] itemsLeft: -, completedItems: - } Dom Changes: 0
37. { todos: [ { name: "Get out of bed", isDone: true }, { name: "Brush Teeth", isDone: true }, { name: "Put on pants", isDone: false }, ] itemsLeft: -, completedItems: - } Dom Changes: 0
38. { todos: [ { name: "Get out of bed", isDone: true }, { name: "Brush Teeth", isDone: true }, { name: "Put on pants", isDone: true }, ] itemsLeft: -, completedItems: - } Dom Changes: 0
39. { todos: [ { name: "Get out of bed", isDone: true }, { name: "Brush Teeth", isDone: true }, { name: "Put on pants", isDone: true }, ] itemsLeft: 0, completedItems: 3 } Dom Changes: 5
40. The Run Loop Source: https://speakerdeck.com/tomdale/your-website-is-just-an-app
41. The Run Loop - Triggered by Browser Events touchstart touchmove touchend touchcancel keydown keyup keypress mousedown mouseup contextmenu click dblclick mousemove focusin focusout mouseenter mouseleave submit input change dragstart drag dragenter dragleave dragover drop dragend
42. Ember - Convention over Configuration Application Structure - View Lifecycle management - Setup/teardown of bindings/observers - Event handling
43. Ember.Router - View setup post: Ember.Route.extend({ route: "/post", show: Ember.Route.extend({ route: ":post_id", goToEdit: Ember.Route.transitionTo('edit'), connectOutlets: function(router, context){ router.get('applicationController').connectOutlet({ viewClass: App.PostShowView, controller: router.get('postController'), context: App.Post.find(context) }) }, }) edit: Ember.Route.extend({ }) })
44. View teardown - Parent views are aware of their child views - Automatic binding/observer teardown
45. View Setup/Teardown - 3rd Party Libraries App.DateFieldView = Ember.TextField.extend({ didInsertElement: function(){ this.$().datepicker({ autoclose: true, format: moment.formats.picker }).on("changeDate", function(context){ this.set("date", context.date) }) } }) didInsertElement/willDestroyElement
46. Event Handling - Ember.EventDispatcher - Remember: Laziness is a virtue. - jQuery .on()
47. Event Handling <div class="post"> {{bodyText}} <div> <a {{action goToEdit this}}>Edit Post</a> </div> </div>
48. Event Handling post: Ember.Route.extend({ route: "/post", show: Ember.Route.extend({ route: ":post_id", goToEdit: Ember.Route.transitionTo('edit'), connectOutlets: function(router, context){ router.get('applicationController').connectOutlet({ viewClass: App.PostShowView, controller: router.get('postController'), context: App.Post.find(context) }) }, }) edit: Ember.Route.extend({ }) })
49. Convention over Configuration Data Persistence - Identity Map - Object lifecycle management
50. Convention over Configuration Other goodies - ES5 polyfills where possible - Object model with mixins and super()
51. It's here to stay 169 Committers 2651 Commits Last commit: 1 day ago
52. It's here to stay
53. Thanks Questions? @bradleypriest
54. Bonus Slide Model Model Model Persistence Router Browser Controller Controller View View View Events