JavaScript Web Application Frameworks

The web is emerging as the universal platform for running applications across nearly all kinds of operating systems. But developing web applications can be involved as many different features besides JavaScript need to be taken into account and different is no unified developer platform that provides a standard way. This let to the creation of many different JavaScript frameworks that set out to integrate and streamline the development of web applications. In this talk, I am going to talk about what a web application framework is,
when it makes sense to use a web framework, which frameworks are currently popular, and how to work with multiple JavaScript frameworks and libraries.

Transcript

1. JavaScript Web
   Application Frameworks
   What? When? Which? How?
   Fritz Lekschas
   PhD Candidate at Harvard
   @flekschas
   lekschas.de
   

   View Slide

2. Multiscale Visual
   Pattern Exploration
   in Genomics
   Davis et al. (2018) The Encyclopedia of DNA elements (ENCODE): data portal update.
   Fritz Lekschas
   PhD Candidate at Harvard
   Advisor:
   Hanspeter Pfister
   

   View Slide

3. CellFinder
   Semantic
   Body
   Browser Satori HiPiler HiGlass Peax
   

   View Slide

4. CellFinder
   Semantic
   Body
   Browser Satori HiPiler HiGlass Peax
   jQuery AngularJS
   Ember.js
   Knockout
   CanJS
   Backbone
   Aurelia
   React
   Angular
   React
   Vue.js
   Angular
   

   View Slide

5. CellFinder
   Semantic
   Body
   Browser Satori HiPiler HiGlass Peax
   jQuery AngularJS
   Ember.js
   Knockout
   CanJS
   Backbone
   Aurelia
   React
   Angular
   React
   Vue.js
   Angular
   React
   Vue.js
   Angular
   Svelte
   ?
   

   View Slide

6. What is a web application framework?
   When and why should we use a web framework?
   Which web framework are hot and which should we choose?
   How to work with a web framework?
   

   View Slide

7. What is a (web) application framework?
   

   View Slide

8. A framework is generic software to be adjusted by user-specific code
   to form an application. It provides a standard way to develop
   applications and the tools necessary for its implementation.
   

   View Slide

9. A framework is generic software to be adjusted by user-specific code
   to form an application. It provides a standard way to develop
   applications and the necessary tools for its implementation.
   

   View Slide

10. ●
    ● No predefined end goal
    ● You decide about its purpose
    ● Provides the building blocks and
    a guide on how to compose them
    ●
    Framework
    ●
    ● Clear purpose
    ● You just use it
    ● Provides an interface and
    the means to its purpose
    ●
    Library
    

    View Slide

11. ●
    ● No predefined end goal
    ● You decide about its purpose
    ● Provides the building blocks and
    a guide on how to compose them
    ● The framework orchestrates your code
    Framework
    ●
    ● Clear purpose
    ● You just use it
    ● Provides an interface and
    the means to its purpose
    ● Your code calls the library
    Library
    

    View Slide

12. Application Code
    Library
    Library
    Framework
    

    View Slide

13. http://jsf.lekschas.de 1
    

    View Slide

14. Framework
    HTML CSS JS
    Template/View Styling Behavior
    

    View Slide

15. http://jsf.lekschas.de 2
    

    View Slide

16. What types of frameworks?
    

    View Slide

17. Model
    View Controller
    Model
    ViewModel
    View
    MVC MVVM
    Changes
    Updates
    Changes
    Updates
    Translates
    

    View Slide

18. Model
    View Controller
    MVC
    Changes
    Updates
    Consume Interact
    Model
    ViewModel
    View
    MVVM
    Changes
    Updates
    Translates
    

    View Slide

19. “If you put ten software architects into a room and have
    them discuss what the Model-View-Controller pattern is,
    you will end up with twelve different opinions.”
    Josh Smith
    https://www.codeproject.com/Articles/23241/Using-MVC-to-Unit-Test-WPF-Applications
    

    View Slide

20. View Slide

21. http://jsf.lekschas.de 2
    

    View Slide

22. What do frameworks take care of?
    

    View Slide

23. Templating
    State
    Management
    Data
    Binding/Flow
    Synchronizing
    Create HTML Add, update, remove
    data
    Add event listeners Keep everything
    in sync
    

    View Slide

24. http://jsf.lekschas.de 1
    

    View Slide

25. When should we use a web framework?
    

    View Slide

26. What is the primary purpose of the application?
    Presentation: Maybe | Otherwise: Yes!
    What kind of view changes are anticipated?
    Only non-structural: Maybe | Otherwise: Yes!
    What is the scope of the application?
    Prototype: Maybe | Otherwise: Yes!
    

    View Slide

27. http://hipiler.lekschas.de
    

    View Slide

28. http://jsf.lekschas.de 3
    

    View Slide

29. HiGlass
    

    View Slide

30. https://higlass.io
    

    View Slide

31. Which frameworks are hot in 2020?
    

    View Slide

32. React Vue Angular Svelte
    

    View Slide

33. JS, HTML, and CSS
    handled together
    Virtual DOM
    with diffing
    One-way
    data binding
    Relatively
    unopinionated
    Component focused
    JS, HTML, and CSS
    handled separately
    Virtual DOM
    with diffing
    One-way
    data binding
    Relatively
    unopinionated
    Component focused
    JS, HTML, and CSS
    handled separately
    DOM with dynamic
    change detection
    Two-way
    data binding
    Highly
    opinionated
    Modularized
    React Vue Angular Svelte
    JS, HTML, and CSS
    handled together
    DOM with static
    change detection
    Two-way
    data binding
    Relatively
    unopinionated
    Component focused
    

    View Slide

34. JS, HTML, and CSS
    handled together
    Virtual DOM
    with diffing
    One-way
    data binding
    Relatively
    unopinionated
    Component focused
    JS, HTML, and CSS
    handled separately
    Virtual DOM
    with diffing
    One-way
    data binding
    Relatively
    unopinionated
    Component focused
    JS, HTML, and CSS
    handled separately
    DOM with dynamic
    change detection
    Two-way
    data binding
    Highly
    opinionated
    Modularized
    React Vue Angular Svelte
    JS, HTML, and CSS
    handled together
    DOM with static
    change detection
    Two-way
    data binding
    Relatively
    unopinionated
    Component focused
    

    View Slide

35. JS, HTML, and CSS
    handled together
    Virtual DOM
    with diffing
    One-way
    data binding
    Relatively
    unopinionated
    Component focused
    JS, HTML, and CSS
    handled separately
    Virtual DOM
    with diffing
    One-way
    data binding
    Relatively
    unopinionated
    Component focused
    JS, HTML, and CSS
    handled separately
    DOM with dynamic
    change detection
    Two-way
    data binding
    Highly
    opinionated
    Modularized
    React Vue Angular Svelte
    JS, HTML, and CSS
    handled together
    DOM with static
    change detection
    Two-way
    data binding
    Relatively
    unopinionated
    Component focused
    

    View Slide

36. JS, HTML, and CSS
    handled together
    Virtual DOM
    with diffing
    One-way
    data binding
    Relatively
    unopinionated
    Component focused
    JS, HTML, and CSS
    handled separately
    Virtual DOM
    with diffing
    One-way
    data binding
    Relatively
    unopinionated
    Component focused
    JS, HTML, and CSS
    handled separately
    DOM with dynamic
    change detection
    Two-way
    data binding
    Highly
    opinionated
    Modularized
    React Vue Angular Svelte
    JS, HTML, and CSS
    handled together
    DOM with static
    change detection
    Two-way
    data binding
    Relatively
    unopinionated
    Component focused
    

    View Slide

37. JS, HTML, and CSS
    handled together
    Virtual DOM
    with diffing
    One-way
    data binding
    Relatively
    unopinionated
    Component focused
    JS, HTML, and CSS
    handled separately
    Virtual DOM
    with diffing
    One-way
    data binding
    Relatively
    unopinionated
    Component focused
    JS, HTML, and CSS
    handled separately
    DOM with dynamic
    change detection
    Two-way
    data binding
    Highly
    opinionated
    Modularized
    React Vue Angular Svelte
    JS, HTML, and CSS
    handled together
    DOM with static
    change detection
    Two-way
    data binding
    Relatively
    unopinionated
    Component focused
    

    View Slide

38. JS, HTML, and CSS
    handled together
    Virtual DOM
    with diffing
    One-way
    data binding
    Relatively
    unopinionated
    Component focused
    JS, HTML, and CSS
    handled separately
    Virtual DOM
    with diffing
    One-way
    data binding
    Relatively
    unopinionated
    Component focused
    JS, HTML, and CSS
    handled separately
    DOM with dynamic
    change detection
    Two-way
    data binding
    Highly
    opinionated
    Modularized
    React Vue Angular Svelte
    JS, HTML, and CSS
    handled together
    DOM with static
    change detection
    Two-way
    data binding
    Relatively
    unopinionated
    Component focused
    

    View Slide

39. http://jsf.lekschas.de 4-6
    

    View Slide

40. Which framework should you choose?
    

    View Slide

41. Simplicity: How fast can one get started?
    Expressivity: How much can the framework do?
    Community Support: How continuous is the community engagement?
    Tooling: How many good tools/libraries are already there?
    

    View Slide

42. State of the JavaScript 2019: Satisfaction
    https://2019.stateofjs.com/front-end-frameworks/
    

    View Slide

43. State of the JavaScript 2019: Interest
    https://2019.stateofjs.com/front-end-frameworks/
    

    View Slide

44. State of the JavaScript 2019: Awareness
    https://2019.stateofjs.com/front-end-frameworks/
    

    View Slide

45. Downloads
    

    View Slide

46. Google Trends
    React
    Angular
    jQuery
    Vue
    Svelte
    

    View Slide

47. React Svelte Vue
    > Angular
    = >
    Warning! Highly biased!
    My Personal Preferences
    

    View Slide

48. React Svelte Vue
    >
    Established
    Great tooling
    Getting Established
    Dead simple
    Angular
    = >
    Simple
    CSS transitions
    Blazing fast
    ???
    But who am I to tell you? Test them for yourself!
    My Personal Preferences
    

    View Slide

49. React Vue Angular
    > Svelte
    = >
    My Recommendation
    Established
    Great tooling
    Managed by FB
    Established
    Good for complex
    applications
    Managed by Google
    Getting Established
    Supported by
    various companies
    Rising but small
    community
    No company support
    

    View Slide

50. How to work with web frameworks?
    

    View Slide

51. Clear separation of concerns: who is responsible for what?
    Write pure functional code: a function should have a single purpose and no side effects
    Rely as a little on the framework as possible
    Be wary of leaky abstractions and look behind the curtain
    

    View Slide

52. Purify Your Code
    

    View Slide

53. http://jsf.lekschas.de 7
    

    View Slide

54. Separation of Concerns: React with D3
    

    View Slide

55. http://jsf.lekschas.de 8
    

    View Slide

56. Leaky Abstraction
    

    View Slide

57. http://jsf.lekschas.de 9
    

    View Slide

58. Resources
    Composing Software from Eric Elliot
    leanpub.com/composingsoftware and medium.com/@_ericelliott
    State of JavaScript 2019
    stateofjs.com
    Newsletters
    javascriptweekly.com, frontendfoc.us, react.statuscode.com, http://esnextnews.com
    Blogs
    overreacted.io, 2ality.com
    

    View Slide

59. Thanks! Questions?
    

    View Slide