embrace the frontend revolution

29
Embrace the front-end revolution Álvaro Sánchez-Mariscal Web Architect — @alvaro_sanchez

Upload: alvaro-sanchez-mariscal

Post on 08-May-2015

936 views

Category:

Software


0 download

DESCRIPTION

During the last years we have been seeing a lot Javascript-based frontend tools becoming more and more popular. They are all wildly used because of the rise of Node JS. As developers we cannot ignore this revolution, but rather embrace it. In this talk I will speak about how to transition from monolithic applications to HTML5 apps + REST API's. From full stack developers to frontend+backend teams. I will also demonstrate how the development looks like using tools like AngularJS and Grunt for frontend development. Hurry up. They are coming...

TRANSCRIPT

Page 1: Embrace the frontend revolution

Embrace the front-end revolution

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

Page 2: Embrace the frontend revolution

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.

Page 3: Embrace the frontend revolution

• HTML5 games platform for:

• Game developers.

• Casinos.

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

Page 4: Embrace the frontend revolution

The front-end revolution from a human resources perspective.

Page 5: Embrace the frontend revolution

Full-stack Frameworks

Page 6: Embrace the frontend revolution

Monolithic!

Page 7: Embrace the frontend revolution

Monolithic frameworks

• The views and the business logic are packaged together.

• Server-side generated views.

• Full-stack frameworks require full-stack developers.

Page 8: Embrace the frontend revolution

The full-stack developer

Can write code on every layer of the

application.

Page 9: Embrace the frontend revolution

Q: How do you see yourself as a developer?

http://poll.fm/4qjo0

Page 10: Embrace the frontend revolution

• 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

Page 11: Embrace the frontend revolution

The front-end revolution

Page 12: Embrace the frontend 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.

Page 13: Embrace the frontend revolution
Page 14: Embrace the frontend revolution

Tools a front-end developer will love

Page 15: Embrace the frontend revolution

The front-end revolution from an architectural perspective.

Page 16: Embrace the frontend revolution

REST

Page 17: Embrace the frontend revolution

REST is much more than just returning JSON.

Page 18: Embrace the frontend revolution

RESTful is aboutRESTful is about*Client / server.

Stateless.

Cacheable.

Layered.

* Source: Wikipedia.

Page 19: Embrace the frontend revolution

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.

Page 20: Embrace the frontend revolution

Break down your apps

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

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

• Back-end: a REST API.

Page 21: Embrace the frontend revolution

Break down your apps

Page 22: Embrace the frontend revolution

Break down your apps

Page 23: Embrace the frontend revolution

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.

Page 24: Embrace the frontend revolution

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.

Page 25: Embrace the frontend revolution

Advantages

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

• Public consumers.

• Mobile applications.

• Back-office applications.

Page 26: Embrace the frontend revolution

Demohttp://bit.ly/grails-angular

Page 27: Embrace the frontend revolution

Conclusions

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

• Think if the teams need to scale.

Page 28: Embrace the frontend revolution

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.

Page 29: Embrace the frontend revolution

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

Grazie mille!