1 of 34

Slide Notes

DownloadGo Live

Ember.js A Clear Route to a Modern Web

Published on Feb 03, 2016

No Description

PRESENTATION OUTLINE

Ember.js A Clear Route to a Modern Web

Front-End Vs. Back-End

  • Fast desktop like application performance is becoming the norm. Increasing front-end complexity.
  • Designing for Mobile is 100% necessary 99.9% of the time and if we're told it's not we should ask why.
Photo by garryknight

Front-End Vs. Design

  • Upfront design based on static html pages with sitemaps does not align with the reactive modern front-end
  • Application design and UX should inform the visual design in an iterative way, keeping wasted design work from going in the bin.
Photo by sickmouthy

Front-End Vs. Design

  • Good design has always been a matter of form following function but, somewhere along the way we lost site of that on the web. We can begin again.
Photo by sickmouthy

Native Vs. Hybrid

Photo by GriinBlog

Native

  • It's hard, It's so hard, it is a hard pile of suuuuuk...
  • Giant C-like languages - Obj-C & Java. No Thanks.
  • Did I mention that if you want your app to ship on multiple platforms you gotta learn both of those giant stale languages.
Photo by VinothChandar

Native

  • Yes, there are some other possible things... Swift, Ruby Motion, React Native, etc... They could be players? maybe? But... Can I ship it now?
  • Designers hate Native UI it leads to homogeneous, boring designs and doesn't allow for the same kind of creativity that's possible on the web without some serious work.
Photo by VinothChandar

Hybrid

  • HTML/CSS for UI
  • Javascript as primary language
  • Javascript as interface for native bridges (phonegap, cordova, there are others)
  • It works on all the platforms, the web, & the desktop too!

Hybrid

  • One application code base packaged up for many platforms.
  • The tooling around hybrid apps has gotten much better Cordova is pretty damn solid these days.
  • It's web which is what we do.

The Frameworks (My Impressions)

Backbone (MVVM)

  • The grandfather to many fractured children. It gained a lot of traction becase it was fairly simple to pick up if you know some jQuery
Photo by Paul Garland

Backbone (MVVM)

  • As applications grow you'll find yourself writing tons of boiler plate over & over and still have to deal with asynchronicity manually most of the time. You'll end up with a bunch of jquery spaghetti constantly dealing with dom updates for side-effects.
Photo by Paul Garland

Backbone (MVVM)

  • Dependencies become a problem too as you tack on micro library after mocro library to do all the things.
Photo by Paul Garland

Angular.js(MVVW)

  • An incomplete framework MVVW? WTF? It's future is in deep flux. Developers has said that the Angular 1.0 branch is pretty much dead as the framework is undergoing a major re-write.
Photo by aldoaldoz

Angular.js(MVVW)

  • It is backed by google which means they are serious about javascript and Angular 2.0 will probably be pretty nice. However, being that it's development cycle is unknown and the developers have no problem killing support for things. It does feel like maintainability is questionable.
Photo by aldoaldoz

Angular.js(MVVW)

  • It's treated more like an ongoing experiment with very few of the devs actually dogfooding on real products. GWT is still the primary js framework at google.
Photo by aldoaldoz

React.Js (V)

  • An Incomplete Framework with some amazing ideas but being incomplete has lead to many of the same problems that backbone has suffered from.
Photo by smithco

React.Js (V)

  • That being said many if it's ideas specifically around the VirtualDOM and rendering performance were remarkable and quickly adopted by both the Angular team and Ember Team.
Photo by smithco

React.Js (V)

  • It's from facebook and they are using it so it is definitely something to keep an eye on. That said though, the community is very fragmented and doing some crazy things like ReactAngular Hybrids and what not.
Photo by smithco

Why Ember?

It's a complete framework with fantastic tooling.

  • Model, View, Controller just like the Gods of Smalltalk-76 intended from high atop Mt. Xerox PARC intended.
Photo by Tony Frates

It's a complete framework with fantastic tooling.

  • It has a real application router layer, a model layer, a view layer, a controller layer, a data layer w/custom adapter support, and it has support for mixins, web components, helpers, sanitizers, and CLI addons.
Photo by Tony Frates

It's a complete framework with fantastic tooling.

  • It has a command-line environment complete with generators (blueprints) and it's completely extendable with your own blueprints.
Photo by Tony Frates

It's a complete framework with fantastic tooling.

  • It gives us the future today out of the box. Promises, Modules, ES6(2015) via Babel, and a growing number of addons for all your favorite acronyms and script flavors.
Photo by Tony Frates

It's opinionated and for good reason.

  • It provides sane naming conventions that do a lot of the work for you.
  • It provides a directory structure and a sane way of organizing your code.
  • Helps you to not sweat the small stuff and that's what frameworks are for.
  • It often has what you need before you even know you need it.
Photo by dennisreimann

Maintainability is at it's core.

  • Ember applications are easy to upgrade with great in-line documentation warning of deprecations so you can write clean code the right way the first time.
Photo by Hugo90

Maintainability is at it's core.

  • Strong core team of people (@wycats & @tomdale & many more) who are dogfooding everyday.
  • Development has moved very fast and continues to accelerate and the team has a real track record of shipping.
Photo by Hugo90

The Not So Distant Future

  • Meaning months not years
  • All new Glimmer™ Rendering Engine, Fast Very Fast
  • Ember FastBoot™ Will enable Ember apps to be fully rendered server side and have them be indexed and viewed without JS
Photo by cobalt123

Ember.js A Clear Route to a Modern Web