Class Details: SPA Framework Comparison Workshop

Days: 3

SPA Framework Comparison Workshop

Angular 2+, CycleJS, Elm, Om, Polymer, React, and more

In Development

This event is in development as of late 2016. Companies potentially interested in scheduling a “beta” version of the workshop should contact Oasis Digital.

Background

As of late 2016, there are numerous strong library/framework choices for single page web application development. The purpose of this class/workshop is for attendees to understand the major choices, how each functions, and how they compare to each other. The purpose is not to “pick a winner”, as we will only focus on choices strong enough that each could be a winner for many projects. Rather, attendees should gain a sufficiently broad and deep understanding of the trade-offs to make wise choices in their own organizations and projects.

Public / Private / Location

The class is a blend of instruction, discussion, and consultation, to a greater extent than our other classes. Therefore it is currently offered only to private company groups. It works best in-person, but is also possible to do online.

Only our most experienced key developer or two have the extensive depth and breadth of understanding and experience for this workshop. Therefore, dates and availability will be limited compared to our higher-volume offerings.

Workshop / Class Length

The material requires three days, but customers can optionally add a fourth or fifth day to consult on their specific situation in more depth. For an elongated class, we will send an instructor who could happily talk for weeks without running out of things to say about the relevant technologies.

Prerequisites / Requirements

This workshop is not introductory. To benefit, attendees need:

  • Substantial software development experience.
  • Experience with HTML and CSS.
  • A computer: there are hands-on exercises and examples to review.
  • Editor and other tools to code HTML and source code; we will demonstrate using VS Code, but that is not specifically required.
  • Modern web browser, such as current Chrome or Firefox.
  • Ability to install software on their computer; in corporate environments it may be necessary to bring a specially unlocked/”disposable” machine or virtual machine for this purpose.

Agenda / Outline

Introduction and Background

  • Web Platform Refresher
    • JavaScript
    • HTML
    • CSS
    • DOM
    • HTTP
    • HTTPS
    • APIs
    • Polyfills
  • JavaScript Etc.
    • ES5
    • ES2015
    • ES____
    • TypeScript
    • Beyond JavaScript
  • Early SPA Frameworks and Libraries
    • jQuery
    • Backbone
    • Knockout
  • Future of the Web Platform
    • Beyond ES5 in the Browser
    • HTTP/2
      • How it works
      • How much does it matter?
    • Web Components
    • What can we rely on the latest features?
  • What We Want from a Framework / Library
    • Paper over browser differences
    • Modularity
    • Model View Whatever
    • Practices, Support, Training, Example, Documentation, etc.

The Main Contenders

One very difficult part of the process of evaluating alternatives is to decide which of the many possible alternatives warrant inclusion in the evaluation. We have selected a couple of handfuls that we believe are leaders, and representative of categories.

  • Angular 2
    • Theory of the World / Approach
    • Demonstration
    • Example code review
    • Startup process
    • Workshop
    • Strengths
    • Weaknesses
  • CycleJS
    • Theory of the World / Approach
    • Demonstration
    • Example code review
    • Startup process
    • Workshop
    • Strengths
    • Weaknesses
  • Elm (Language + Framework)
    • Theory of the World / Approach
    • Demonstration
    • Example code review
    • Startup process
    • Workshop
    • Strengths
    • Weaknesses
  • Om (Clojure)
    • Theory of the World / Approach
    • Demonstration
    • Example code review
    • Startup process
    • Workshop
    • Strengths
    • Weaknesses
  • Polymer
    • Theory of the World / Approach
    • Demonstration
    • Example code review
    • Startup process
    • Workshop
    • Strengths
    • Weaknesses
  • React / the React Stack
    • React as view layer, a common React-based 'stack'
    • Theory of the World / Approach
    • Demonstration
    • Example code review
    • Startup process
    • Workshop
    • Strengths
    • Weaknesses

Other Players

We will briefly mention various other alternatives, sometimes commenting on why they didn’t “make the cut”.

  • AngularJS 1.x
  • Ember
  • Aurelia
  • Riot
  • Vue
  • More to be added

Comparison

  • Commonalities
    • Tooling
    • NPM and other package managers
    • IDE Support
    • JavaScript under the hood
    • CLIs
    • Compilers
    • Dependency injection
    • Routing
  • Axes of difference
    • Change detection versus virtual DOM diffing
    • Run time versus compile time
    • JavaScript versus JavaScript supersets versus unrelated language
    • HTML-list templates vs code
    • HTML vs HTML-like (a2 vs a1 etc)
    • JSX vs ‘just code’
    • Popularity and ease of hiring
    • Many more

Back End API Interaction

It would be possible to create another entire week discussing different ways by which a single page client application can interact with a backend system. Instead we will briefly discuss:

  • Ad hoc APIs
  • REST, where it fits, its limitations
  • GraphQL / Falcor
  • Offline Access

In the long run the approach to client-server API interaction may have a greater effect on project success and cost, then the particular front or back in technology.

Return to the class list