embrace the frontend revolution

Embrace the front-end revolution

Álvaro Sánchez-Mariscal Web Architect — @alvaro_sanchez

About me• Passionate software developer.

• Worked at IBM BCS, BEA Systems and Sun Microsystems.

• Founded Salenda in 2005.

• Working now at Odobo as Web Architect.

• Living between Madrid and Gibraltar.

• HTML5 games platform for:

• Game developers.

• Casinos.

• Check out https://play.odobo.com and try for free!

The front-end revolution from a human resources perspective.

Full-stack Frameworks

Monolithic!

Monolithic frameworks

• The views and the business logic are packaged together.

• Server-side generated views.

• Full-stack frameworks require full-stack developers.

The full-stack developer

Can write code on every layer of the

application.

Q: How do you see yourself as a developer?

http://poll.fm/4qjo0

• Great if they are really full-stack.

• Not so good if they are back-end developers, with some jQuery knowledge and pixel-up-down-ok CSS skills.

• Makes less sense when your company has truly front-end developers.

Full-stack developers

The front-end revolution

The front-end revolution facts

• Javascript community is HUGE. Lot of developers out there.

• NodeJS is the new framework for hipsters.

• There is a lot of tools built with/around NodeJS/Javascript.

Tools a front-end developer will love

The front-end revolution from an architectural perspective.

REST

REST is much more than just returning JSON.

RESTful is aboutRESTful is about*Client / server.

Stateless.

Cacheable.

Layered.

* Source: Wikipedia.

Statelessness

• Full-stack frameworks are usually stateful.

• They use the HTTP session.

• “ST” in REST stands for State Transfer.

• Client needs to transfer its state on each call.

Break down your apps

• Separate the front-end from the back-end.

• Front: a pure Javascript/HTML/CSS application.

• Back-end: a REST API.

Break down your apps

Break down your apps

Advantages

• Single Page Applications are more responsive.

• All the page changes are in the browser.

• UI and API are deployed separately.

• You can redeploy as many times as you want, to do A/B testing, for example.

Advantages

• Scalability.

• It’s way more easier to scale pure Javascript applications.

• Separation of responsibilities.

• Developers can concentrate on making each tier a robust and secure system.

Advantages

• You get ready from the beginning to expose an API. Can be useful for

• Public consumers.

• Mobile applications.

• Back-office applications.

Demohttp://bit.ly/grails-angular

Conclusions

• Think whether your team/company has full-stack developers or not.

• Think if the teams need to scale.

Conclusions

• From a RESTful point of view, you need to achieve statelessness.

• For that, you need to avoid server-centric, full-stack frameworks.

• Break down your applications into a truly Javascript front-end + REST API.

Álvaro Sánchez-Mariscal Web Architect — @alvaro_sanchez

Grazie mille!