Lesson learnt building Single Page Application

Transcript

1. Lessons learnt
   BUILDING SPAS
   Sebastian Porto @sebasporto
   

   View Slide

2. Many small SPAs
   A few large SPAs
   MY EXPERIENCE
   

   View Slide

3. profile
   dashboard
   clients
   search
   new
   edit
   reports
   orders
   list
   search
   ...
   products
   list
   edit
   ...
   a large SPA
   !
   deals with
   multiple concerns
   

   View Slide

4. MY EXPERIENCE
   

   View Slide

5. PERILS
   Memory leaks
   Consistency
   Loaders
   Feedback
   Deal with failure
   Vendor locking
   Complex stacks
   

   View Slide

6. CONSISTENT STATE IS HARD
   

   View Slide

7. CONSISTENT STATE IS HARD
   Publish document
   Documents published 40
   Server
   

   View Slide

8. CONSISTENT STATE IS HARD
   User will notice
   and
   expect a consistent state in the app
   

   View Slide

9. CONSISTENT STATE IS HARD
   Trade off
   Stale information
   or
   Big overhead in complexity and performance
   

   View Slide

10. Framework that will deal with this for you?
    !
    Meteor?
    CONSISTENT STATE IS HARD
    

    View Slide

11. Refresh app often
    CONSISTENT STATE IS HARD
    

    View Slide

12. MEMORY LEAKS
    

    View Slide

13. Listen to
    events
    Listen to
    events
    !
    Intervals
    

    View Slide

14. > ZOMBIE EVENTS
    and their close friends ...
    

    View Slide

15. Easy to have
    Problem for long running apps
    MEMORY LEAKS
    

    View Slide

16. Be diligent (easier said that done)
    MEMORY LEAKS
    

    View Slide

17. Use libs that make harder to have them
    MEMORY LEAKS
    

    View Slide

18. Don't build large apps!
    MEMORY LEAKS
    

    View Slide

19. REACTIVE VIEWS
    

    View Slide

20. Models
    UI
    User interaction
    

    View Slide

21. Manually == hard to maintain
    REACTIVE VIEWS
    

    View Slide

22. Don't DIY
    REACTIVE VIEWS
    

    View Slide

23. Use a lib, there are many
    REACTIVE VIEWS
    Angular, Ember, CanJS, React, Rivets,
    Knockout, Stick-it, etc, etc ...
    

    View Slide

24. CODE ORGANISATION
    

    View Slide

25. Code that depends on other code
    !
    !
    !
    APP.Car = App.Vehicle.extend(...)
    CODE ORGANISATION
    

    View Slide

26. CODE ORGANISATION
    The loading order matters
    Again, don't DIY
    

    View Slide

27. Use some kind of modular system e.g.
    • Require JS
    • Angular
    • Module JS
    CODE ORGANISATION
    

    View Slide

28. !
    modulejs.define('main', ['jquery', 'foo'],
    function ($, foo) {
    // do something ...
    });
    CODE ORGANISATION
    

    View Slide

29. LOADERS, YAY!
    

    View Slide

30. Loading
    LOADERS, YAY!
    

    View Slide

31. Dashboard
    LOADERS, YAY!
    

    View Slide

32. Too many views / controls
    !
    Too many request
    LOADERS, YAY!
    

    View Slide

33. Simulate slow connections
    LOADERS, YAY!
    Charles Debugging Proxy
    

    View Slide

34. Avoid doing too much in each request
    !
    or Pack requests
    LOADERS, YAY!
    

    View Slide

35. WE ARE TOO OPTIMISTIC
    

    View Slide

36. JS is very loose
    Too many environments
    Bugs are hard to find
    

    View Slide

37. We are way too optimistic
    !
    something: function (args) {
    var res = somethingElse(args);
    ...
    }
    

    View Slide

38. !
    someArray[parseInt(someOther.indexOf(foo), 10)]
    

    View Slide

39. !
    window.onerror
    'undefined' is null or not an object
    

    View Slide

40. CODE DEFENSIVELY
    Don't be (too optimistic)
    Guard functions
    Throw errors early
    

    View Slide

41. !
    something: function (args) {
    if (!args.foo) throw new Error('Expected
    foo');
    var res = somethingElse(args);
    ...
    }
    

    View Slide

42. FEEDBACK IS IMPORTANT
    

    View Slide

43. Again, too much optimist:
    • Internet is fast
    • Errors don't happen
    

    View Slide

44. Click on something
    !
    !
    nothing happens
    

    View Slide

45. Something fails
    !
    !
    app doesn't recover
    

    View Slide

46. !
    foo.save().
    then(function () {
    // do something when saved
    });
    What happens when saving?
    What happens if it fails?
    

    View Slide

47. Simulate slow connections
    FEEDBACK IS IMPORTANT
    

    View Slide

48. Always provide feedback
    (reactive views)
    FEEDBACK IS IMPORTANT
    

    View Slide

49. Don't ignore failure, recover
    FEEDBACK IS IMPORTANT
    

    View Slide

50. DON'T LOCK YOURSELF
    

    View Slide

51. Tech changes
    That awesome thing today is the legacy of tomorrow
    !
    We learn better ways
    DON'T LOCK YOURSELF
    

    View Slide

52. Allow room for change by
    Avoiding monolithic apps
    DON'T LOCK YOURSELF
    

    View Slide

53. KEEP YOUR STACK SIMPLE
    

    View Slide

54. Complex stacks are a
    considerable source of bugs
    KEEP YOUR STACK SIMPLE
    

    View Slide

55. Do you really need that abstraction?
    !
    e.g. Coffeescript, HAML-Coffee, Traceur, Clojurescript, GWT,
    Typescript, etc
    KEEP YOUR STACK SIMPLE
    

    View Slide

56. K.I.S. != don't use stuff
    !
    If it adds a lot of value, then great
    KEEP YOUR STACK SIMPLE
    

    View Slide

57. AVOID LARGE APPS
    If you can
    

    View Slide

58. profile
    dashboard
    clients
    search
    new
    edit
    reports
    orders
    list
    search
    ...
    products
    list
    edit
    ...
    instead of
    !
    having a
    big SPA
    

    View Slide

59. better to
    !
    have many small ones
    orders
    list
    search
    ...
    reports
    clients
    search
    new
    edit
    reports
    dashboard
    server
    

    View Slide

60. THANKS
    

    View Slide

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
    

    View Slide