Primeramente, recomiendo como lectura obligatoria la presentación de @CKgrafico sobre la evolución de desarrollo frontend.

Estamos en 2016, el desarrollo de SPA ha cambiado mucho con relación a sus inicios, los actores como jquery, knockout, mootools han quedado un poco limitados con los requerimientos del desarrollo actual.

El mercado actual nos brinda un sin número de Frameworks y tecnologías para el desarrollo de frontend.

Al momento de seleccionar un Framework para nuestra SPA tenemos que asegurarnos que este nos brinde los aspectos necesarios para el desarrollo, como es la creación de components, routing, data binding, templates, models, services, DI, testing etc.

Este framework debe permitirnos desarrollar nuestra SPA en capas tomando en cuenta la responsabilidad de cada una de ellas.

La vista(view) debe estar conformada solo de html / css y su rol es únicamente definir la estructura e interfaz de usuario, este framework debe brindarnos la capacidad de tener soporte para templates o apoyarse en alguna librería como handlebars o mustache.

El framework debe permitirnos tener clases que representen controllers y manejen el envío de datos dinámicos a la vista(view) e interactuar con los elementos, además de tener clases que representen los servicios para encapsular los métodos de acceso a las api, entre los diferentes componentes de nuestra aplicación.

Al desarrollar debemos apostar por HTML5, ES6 y CSS3 para poder tener muchos problemas resueltos y no tener que reinventar la rueda.

HTML5

Nos brinda un sin número de opciones en el browser del cliente y hacer que nuestra aplicación entre estas tenga soporte a Canvas, Geolocation , Video, IndexDB, LocalStorage y SessionStorage.

https://developer.mozilla.org/es/docs/HTML/HTML5

ES6

Esta versión de Javascript a diferencia de ES5 nos permite tener módulos, classes , promesas, templates de forma nativa en Javascript y más opciones.

https://github.com/lukehoban/es6features#readme

Nota: No todas las bondades de ES6 son soportadas por los browsers, pero podemos utilizar transpilers y polyfills los cuales compilan nuestro código de ES6 a ES5 y  a la vez ser soportado por los browsers.

CSS3

Los estilos son un aspecto importante y es vital basarnos en css3 para poder tener soporte a Media Queries, Colores, Selectores de 3 nivel, Animaciones.

http://www.w3schools.com/css/css3_intro.asp

Pero qué herramientas necesito?

Un Editor moderno,Nodejs (Transpiler/Polyfills) ,Package Manager (Bower, Nuget, NPM, JSPM) y apostar por un Framework Javascript (Angular, React, Ember, Aurelia etc.)

Editores o IDE

Este es un aspecto importante ya que necesitamos que un IDE o Editor nos facilite el refactor, autocompletado, soporte de plugins para frameworks o librerías al día de hoy y los que puedo recomendar son:

WebStorm https://www.jetbrains.com/webstorm/

Visual Studio Code https://code.visualstudio.com

SublimeText 3 https://www.sublimetext.com/3

VS2015: https://www.visualstudio.com

Emacs:  https://www.gnu.org/software/emacs/

Gracias a Juanma  por recordarme a Emacs, es un editor al que hay que dedicarle su tiempo a aprenderlo.


Guia básica de Emacs: http://www.braveclojure.com/basic-emacs/

Configuraciones ya listas para Javascript en Emacs

@gulnor https://github.com/jmhdez/emacs.d/blob/master/lang/javascript.el

Yo uso Visual Studio Code

Package Manager

Un Package manager se encarga de facilitarnos el proceso de registro, descarga y dependencias de librerías de que usamos en nuestra aplicación.

Existen diferentes gestores de paquetes:

Nuget: https://www.nuget.org/

Bower: https://bower.io/

NPM: https://www.npmjs.com/

JSPM: http://jspm.io/

Yo uso NPM y JSPM.

Transpiladores

Los transpiladores nos permiten usar las bondades de ES6 o ES7 al día de hoy y convertirlas a ES5, además que mediante polyfills podemos darle soporte en los navegadores.

Al día de hoy contamos con los siguientes:

Babel: https://babeljs.io/

Typescript: https://www.typescriptlang.org/

Traceur: https://github.com/google/traceur-compiler

Yo a nivel personal inicie con Typescript debido a que estaba realizando ciertas cosas con Angular 2, pero al día de hoy estoy replanteando seriamente usar Babel.

Frameworks

Aquí existe un mercado increíble de opciones en la cual cada una tiene sus ventajas y su forma especial, sería bueno que mires algunos y te quedes con el que más te gusta.

https://angular.io/ Google

http://emberjs.com/ by Yehuda Katz

https://facebook.github.io/react/ Facebook

http://aurelia.io Aurelia

Ahora solo toca tomar lo que nos más nos guste y desarrollar SPA pensando en el 2016.

Happy SPA!

Imagen Designed by Freepik