JS Framework Showdown
@JulienMelissas
https://slides.com/julienmelissas/js-framework-showdown/
Hi! I'm Julien 🤓
Twitter: @JulienMelissas
Technical Director at Craftpeak
I like...
- Dogs
- Motorcycling
- Music
- Cooking
- Other Stuff
Dina
Wilbur
Most days I do...
- WordPress Development: on the roots.io team and build custom themes/websites/web applications all day
- JS Development: Experience with React, Ember, Angular
- UX/UI Consultation: building front end style guides and documentation for teams building new or redoing existing Web Applications
These are opinions.
There is no "right way" or "right tool".
It's all about your use case and how you use the tools available to you.
I need some background...
(Raise your hands)
🙋
Who's used...?
- JavaScript
- jQuery
- Backbone
- Angular 1.X
- Angular 2.X
- React
- Ember
- Vue.js
- Something else...?
JavaScript
😎
JavaScript 😣
- Async problems
- Cross-browser compatibility
- Finally catching up to other programming languages with native functions, syntax, classes, etc
- Plugin conflicts on WordPress sites
- SEO Still isn't 100% figured out
- Every 5 seconds there's a new JS thing
So you want to build a web application.
🛠
Do you need a JavaScript framework?
Which framework should you use?
🤔
☠️
Backbone
💎
Angular 1.X
Today we're covering:
🔥
Ember
⚡️
React
Learning JS frameworks is hard.
Backbone ☠️
- It's been around: released Oct. 2010
- Built into WordPress (more on this later)
- Small library (7.6kb/43.5kb with deps)
- MVC - Models, Views, Collections
- NO two-way data binding
- Very flexible
- Includes: router, underscore.js, events, more
- Performance can be an issue
- It's been around: released Oct. 2010
- A good bit larger: 39.5kb
- Two-way data binding
- Probably the 2nd most "MVC" - less on the models
- Superseded by Angular 2 (totally different)
- Can create custom DOM elements/components
- Logic is mixed in HTML with `ng-` stuff
- Lots of built-in services, functions, and filters
- Huge community
- Performance is so-so
Ember 🔥
- Released December 2011
- Built by same team as jQuery and RoR
- 136.2kb (jQuery + Handlebars)
- Highly reccomends use of CLI
- Two-way data binding
- MV* - model, view, (controllers and components)
- Ember Data
- Added support for Virtual DOM & Components
- Handlebars (Logicless) Templating
- VERY opinionated
React ⚡️
- March 2013: the new "cool" kid on the block
- 26kb - doesn't come with much
- Makes huge use of ES6/2015/16
- Just the View Layer *V*
- Start from scratch/not opionated
- Strong focus on Components/.jsx
- New methodologies: redux/flux
- Server-side renderable
- Commonly used with webpack
- Extremely fast/performant