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.

Fritz Lekschas

April 08, 2020
Tweet

More Decks by Fritz Lekschas

Other Decks in Programming

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 jQuery AngularJS

    Ember.js Knockout CanJS Backbone Aurelia React Angular React Vue.js Angular
  4. 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 ?
  5. 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?
  6. 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.
  7. 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.
  8. • • 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
  9. • • 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
  10. “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
  11. Templating State Management Data Binding/Flow Synchronizing Create HTML Add, update,

    remove data Add event listeners Keep everything in sync
  12. 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!
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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?
  20. 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
  21. 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
  22. 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
  23. 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