Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScript Web Application Frameworks

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.

Ab6e0a2ba101a2eb0a975b1ef915e85a?s=128

Fritz Lekschas

April 08, 2020
Tweet

Transcript

  1. JavaScript Web Application Frameworks What? When? Which? How? Fritz Lekschas

    PhD Candidate at Harvard @flekschas lekschas.de
  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
  3. CellFinder Semantic Body Browser Satori HiPiler HiGlass Peax

  4. CellFinder Semantic Body Browser Satori HiPiler HiGlass Peax jQuery AngularJS

    Ember.js Knockout CanJS Backbone Aurelia React Angular React Vue.js Angular
  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 ?
  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?
  7. What is a (web) application framework?

  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.
  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.
  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
  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
  12. Application Code Library Library Framework

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

  14. Framework HTML CSS JS Template/View Styling Behavior

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

  16. What types of frameworks?

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

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

    View MVVM Changes Updates Translates
  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
  20. None
  21. http://jsf.lekschas.de 2

  22. What do frameworks take care of?

  23. Templating State Management Data Binding/Flow Synchronizing Create HTML Add, update,

    remove data Add event listeners Keep everything in sync
  24. http://jsf.lekschas.de 1

  25. When should we use a web framework?

  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!
  27. http://hipiler.lekschas.de

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

  29. HiGlass

  30. https://higlass.io

  31. Which frameworks are hot in 2020?

  32. React Vue Angular Svelte

  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
  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
  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
  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
  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
  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
  39. http://jsf.lekschas.de 4-6

  40. Which framework should you choose?

  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?
  42. State of the JavaScript 2019: Satisfaction https://2019.stateofjs.com/front-end-frameworks/

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

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

  45. Downloads

  46. Google Trends React Angular jQuery Vue Svelte

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

    My Personal Preferences
  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
  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
  50. How to work with web frameworks?

  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
  52. Purify Your Code

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

  54. Separation of Concerns: React with D3

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

  56. Leaky Abstraction

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

  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
  59. Thanks! Questions?