by: Alex Voerman
FRONT END FRAMEWORK
Goals
Should we declare a winner at the end?
What is a framework?
A platform that provides a foundation for developing software applications
History of JavaScript Front End Frameworks
1996 Advent of JavaScript
~2006
jquery era
~2010
SPA era
~2014
component era
~2018
full stack SSG/SSR
2021+
web components / wasm
React vs Angular vs Vue
- Philosophies
- Usage
- Performance
- Templating/Syntax
- Learning Curve
- Tooling/CLIs
- Styling
- Testing
- SSR/SSG/Advanced
👑
SMACKDOWN
React
Released 2013
by Facebook
React
"Unopinionated"
often called a "library"
❌ router
✅ dom manipulation
❌ http client
❌ official testing framework
⚪ state management
Angular
Released 2016
by Google
Released 2010
"Opinionated"
often called a "platform"
✅ router
✅ dom manipulation
✅ http client
✅ official testing framework
✅ state management
Angular
Vue
Released 2014
by Evan You (Community-driven)
Somewhat opinionated
calls itself a "progressive framework"
✅ router
✅ dom manipulation
❌ http client
❌ official testing framework
✅ state management
Vue
Industry Use
Usage (Stateofjs.com)
Industry Use
Interest
Industry Use
Awareness
👑
Performance
Bundle sizes
React
Angular
Vue
small
👑
small
small
great
great
great
Runtime Performance
👑
👑
React
Angular
Vue
Templating / Syntax
React
Angular
Vue
JSX
Typescript Classes, standalone HTML, CSS
Split JS/HTML/CSS in same file
React
React
Angular
Vue
Learning Curve
React
Angular
Vue
Typescript based: Great for Object Oriented (.NET / Java) Devs.
Great for beginners, knowledge of HTML/CSS.
React API is very small. Learning ecosystem is important.
👑
Tooling/CLIs
create-react-app
angular-cli
Vue CLI
ejects webpack
ejects webpack
no ejecting (webpack based)
👑
React
Angular
Vue
angular.json (config)
vue.config.js
Global State Management
Built in options
vuex
👑
limited out of the box support
3rd party redux very popular
3rd party ngrx-store
React
Angular
Vue
Styling
Built in sass or css support
Auto scoped
css, sass, css modules
3rd party integrations - "CSS in JS", css modules
React
Angular
Vue
Not auto-scoped by default
👑
Testing
React
Angular
Vue
3rd party: react-testing-library using jest
built in framework for testing, uses karma + jasmine
3rd party: vue-testing-library using jest
👑
CSR/SSR/SSG
CSR/SSR/SSG
React
Angular
Vue
SSR
SSG
👑
Summary
great for...
less ideal for...
* Devs with OOP experience (C# or Java)
* Teams that need strict boundaries
* Getting enterprise-grade apps up and running quickly
* Beginners, devs/UX designers with HTML/CSS experience
* Running on top of old, legacy apps
* Finding devs with experience
* Teams with strong leads or devs that can make decisions
* Flexibility - weird environments
* SSG / SSR
* Finding devs with experience
React
Angular
Vue
* Weird build situations (heavy webpack is needed)
* Teams with limited guidance
Beyond React/Angular/Vue
Svelte
Ember
- Mostly same API as React (backwards compatible add-ons)
- Only 3kb in size
Non JavaScript
Feedback / Questions?
deck
By Alex Voerman
