itt flisol 2013

24
El presente y futuro del desarrollo web y APIs REST Flisol, ITToluca, Abril 2013

Upload: domingo-suarez-torres

Post on 23-Jun-2015

281 views

Category:

Technology


2 download

DESCRIPTION

Presentación dada en el Flisol 2013 en el ITT en Mayo de 2013

TRANSCRIPT

Page 1: ITT Flisol 2013

El presente y futuro del desarrollo web y APIs RESTFlisol, ITToluca, Abril 2013

Page 2: ITT Flisol 2013

Web development

PHP

Ruby

Python

.NET

Java

Page 3: ITT Flisol 2013

Typical web development approach

Server side framework

The framework handles all the incoming http request and process them

Extract data from request and generates response to the user

The framework generates data representation mostly in html

We can use the framework to generate only data (JSON, XML)

Page 4: ITT Flisol 2013

Pros

Very simple to develop

All the app code in a single place

Unique development model

Well know patterns

Tons of libraries and framewoks out there

Page 5: ITT Flisol 2013

ConsThe server needs to handle several things

database connection

Failure and recovery

User session

render all the time the response to the users

frameworks limitations (user interface, scaling, adopting new technologies, support lacking)

Page 6: ITT Flisol 2013

Modern featuresMobile support

Asynchronous processing (server side & client side)

Content negotiation (JSON, XML, html, SOAP?)

View technologies independence (JavaScript, Template engines)

NoSql support (MongoDB, Redis, Cassandra, etc)

Development

Full stack

Specific stack

Cloud deployment

Page 7: ITT Flisol 2013

Is your framework friendly?

Page 8: ITT Flisol 2013

Beware ‘Full stack frameworks’

Do you really need a ‘full stack’ framework?

Are you using all the features provided by the full stack framework?

Sometimes we don’t need a full stack framework

ex. Simple app or service (REST)

Page 9: ITT Flisol 2013

Real life webapp, web traffic

Page 10: ITT Flisol 2013

Real life web system

• API: WebServices REST for information exchange

• Admin. Web application for internal use

• WebSite. A totally static HTML application built with Chaplin and several JavaScript microframewoks

Page 11: ITT Flisol 2013

WebApps architecture

Built your complete solution using several logical components

Each component has a single responsability

Built each component with the right tech stack

Page 12: ITT Flisol 2013

Apps

• API

• Typical Grails application, with no GSPs.

• Speaks only JSON

• Used by partners (remote services) and HipStore

• Admin

• Typical Grails application

Page 13: ITT Flisol 2013

Development enhancements

• Increased test cases in both Grails apps

• Spock

• Jasmine for JavaScript code

• Introduced Jenkins

• Jenkins Jobs to deploy automatically to QA & Production environments

• Bash shell scripts

Page 14: ITT Flisol 2013
Page 15: ITT Flisol 2013

HipStore

• Static HTML application built with Chaplin

• Chaplin is an architecture for JavaScript applications using the Backbone.js library

Page 16: ITT Flisol 2013

HipStore• Developed in CoffeeScript

• Uses PushState

• RequireJS (AMD Support)

• HandleBars (Template Engine)

• JQuery

• Underscore

• Twitter Bootstrap

• Build and packaged with Jake

Page 17: ITT Flisol 2013

HipStore

• Single Page Application

• Chaplin consumes JSON from the API to render the store items.

• Uses PushState to update the URL in the browser. Very useful for bookmarking and social media sharing, even for SEO.

Page 18: ITT Flisol 2013

Our approach

• Write to disk all the possible links in HipStore. Crazy?

• We use ZombieJS to navigate the website and then write to disk the generated HTML

• Put those static files (HTML) in the webserver document root

• The best cache ever

Page 19: ITT Flisol 2013

Why do this?

• When the user visit our website, the webserver will respond with completely static HTML, CSS, JavaScript files

• Very fast

• The user never hits the Tomcats, we reduce the load in the app servers.

• The webserver always responds very fast

Page 20: ITT Flisol 2013

ZombieJS

Page 21: ITT Flisol 2013

HTML harvesting

• The Node app receives the JSON message

• Navigates to HipStore with ZombieJS

• Executes the JavaScript (Chaplin app)

• Extracts the generated HTML with jQuery

• Saves to disk in the web server document root

Page 22: ITT Flisol 2013

Things to consider

• When an item in the Store is modified, we need to regenerate the appropriate HTML file only once.

• Then all the users will receive the same file

• The user only hits the Tomcat when really need it (CheckOut, Registration)

• When the user click in some action in the app, the interaction is handled by Chaplin controller if the browser supports JavaScript

• Remember in our website the content is almost static?

Page 23: ITT Flisol 2013

Results

• The load in our Web Servers was reduce a lot.

• The load in the database reduced a lot.

• The users can share the links.

• Store becomes very search engine friendly

Page 24: ITT Flisol 2013

Photo credits

http://flic.kr/p/7gerV8

http://flic.kr/p/5yZGvb