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.

(credit)

(credit)

(credit)

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

Angular 1.X 💎

  • 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

Lets see some code!

Further Reading/Resources:

Thanks!

Any Questions?

JS Framework Showdown

By Julien Melissas

Made with Slides.com

JS Framework Showdown

A technical talk for WordCamp Asheville 2016 comparing some of the more popular Javascript frameworks and their relation to WP projects.

  • 6,739

More from Julien Melissas