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
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
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?