Lesson learnt building Single Page Application

Transcript

1. Lessons learnt BUILDING SPAS Sebastian Porto @sebasporto
2. Many small SPAs A few large SPAs MY EXPERIENCE
3. profile dashboard clients search new edit reports orders list search ... products list edit ... a large SPA ! deals with multiple concerns
4. MY EXPERIENCE
5. PERILS Memory leaks Consistency Loaders Feedback Deal with failure Vendor locking Complex stacks
6. CONSISTENT STATE IS HARD
7. CONSISTENT STATE IS HARD Publish document Documents published 40 Server
8. CONSISTENT STATE IS HARD User will notice and expect a consistent state in the app
9. CONSISTENT STATE IS HARD Trade off Stale information or Big overhead in complexity and performance
10. Framework that will deal with this for you? ! Meteor? CONSISTENT STATE IS HARD
11. Refresh app often CONSISTENT STATE IS HARD
12. MEMORY LEAKS
13. Listen to events Listen to events ! Intervals
14. > ZOMBIE EVENTS and their close friends ...
15. Easy to have Problem for long running apps MEMORY LEAKS
16. Be diligent (easier said that done) MEMORY LEAKS
17. Use libs that make harder to have them MEMORY LEAKS
18. Don't build large apps! MEMORY LEAKS
19. REACTIVE VIEWS
20. Models UI User interaction
21. Manually == hard to maintain REACTIVE VIEWS
22. Don't DIY REACTIVE VIEWS
23. Use a lib, there are many REACTIVE VIEWS Angular, Ember, CanJS, React, Rivets, Knockout, Stick-it, etc, etc ...
24. CODE ORGANISATION
25. Code that depends on other code ! ! ! APP.Car = App.Vehicle.extend(...) CODE ORGANISATION
26. CODE ORGANISATION The loading order matters Again, don't DIY
27. Use some kind of modular system e.g. • Require JS • Angular • Module JS CODE ORGANISATION
28. ! modulejs.define('main', ['jquery', 'foo'], function ($, foo) { // do something ... }); CODE ORGANISATION
29. LOADERS, YAY!
30. Loading LOADERS, YAY!
31. Dashboard LOADERS, YAY!
32. Too many views / controls ! Too many request LOADERS, YAY!
33. Simulate slow connections LOADERS, YAY! Charles Debugging Proxy
34. Avoid doing too much in each request ! or Pack requests LOADERS, YAY!
35. WE ARE TOO OPTIMISTIC
36. JS is very loose Too many environments Bugs are hard to find
37. We are way too optimistic ! something: function (args) { var res = somethingElse(args); ... }
38. ! someArray[parseInt(someOther.indexOf(foo), 10)]
39. ! window.onerror 'undefined' is null or not an object
40. CODE DEFENSIVELY Don't be (too optimistic) Guard functions Throw errors early
41. ! something: function (args) { if (!args.foo) throw new Error('Expected foo'); var res = somethingElse(args); ... }
42. FEEDBACK IS IMPORTANT
43. Again, too much optimist: • Internet is fast • Errors don't happen
44. Click on something ! ! nothing happens
45. Something fails ! ! app doesn't recover
46. ! foo.save(). then(function () { // do something when saved }); What happens when saving? What happens if it fails?
47. Simulate slow connections FEEDBACK IS IMPORTANT
48. Always provide feedback (reactive views) FEEDBACK IS IMPORTANT
49. Don't ignore failure, recover FEEDBACK IS IMPORTANT
50. DON'T LOCK YOURSELF
51. Tech changes That awesome thing today is the legacy of tomorrow ! We learn better ways DON'T LOCK YOURSELF
52. Allow room for change by Avoiding monolithic apps DON'T LOCK YOURSELF
53. KEEP YOUR STACK SIMPLE
54. Complex stacks are a considerable source of bugs KEEP YOUR STACK SIMPLE
55. Do you really need that abstraction? ! e.g. Coffeescript, HAML-Coffee, Traceur, Clojurescript, GWT, Typescript, etc KEEP YOUR STACK SIMPLE
56. K.I.S. != don't use stuff ! If it adds a lot of value, then great KEEP YOUR STACK SIMPLE
57. AVOID LARGE APPS If you can
58. profile dashboard clients search new edit reports orders list search ... products list edit ... instead of ! having a big SPA
59. better to ! have many small ones orders list search ... reports clients search new edit reports dashboard server
60. THANKS
61. ... you can write large programs in JavaScript. You just can’t maintain them. Anders Hejlsberg - Lead architect C# and Typescript The secret to building large apps is never build large apps. Justin Meyer, author JavaScriptMVC Any darn fool can make something complex; it takes a genius to make something simple. Albert Einstein