from server generated pages to client app in a micro-services world

From Server Generated Pages to

Client App

By Assaf Gannon

FullStack Developers Israel

28.01.2014Google Campus Hosted by:

Evolution of the ‘View’ in Monolithic MVC

text

MVCMost Monolithic applications use MVC Model• Provides a well proven structure for web applications• Model - logic & data• View - Presentation layer• Controller - Glue & Routing

text

Micro Service Worldtext

Service (MVC)

Client

Service (MVC)

Service (MVC)

Micro Service Worldtext

Service (MVC)

Web Server (MVC)

Service (MVC)

Service (MVC)

Client

Forces Influencing the View

• Marketing - Trend to ‘native’ like apps UX

• Performance - Offload some of the work to the client

• Business - Web applications need more hits to make a $

text

The View Evolution

What makes it possible?• Improved browser JS performance• Improved client hardware• HTML 5 Standards

text

Move to Single Page Applications

Single Page App

Result:• We get a “Standalone” Client• The “V” in server MVC almost disappears• Client becomes more complex• Asset management importance hits a new peak• Both server and client become more robust

text

Move all presentation logic to the client

Micro Service Worldtext

Service (MVC)

REST API

Service (MVC)

Service (MVC)

Client

Basic Architecture text

New Web Client Complexities

• Lots of assets (JS, CSS, HTML, Images)

• Lots of 3rd party libraries

• Lots of events and logic

• Complex data models and logic

• State management

• Routing management

text

Introducing Web Client Development

text

Web Apps Development Keys

• Start treating web apps with respect (as software)

• Adopt standard development flows and tools

• Test your code

• Separation of concerns and concise modules

• Manage assets with designated tools

• Use dependency management tools

text

The Web Dev Toolkit

text

Yeoman

• Project Scaffolding• Code Generation

text

Grunt

• JS Task executor• Used for:

○ JS & CSS file concatenation andminification

○ Asset versioning○ Code linting○ CSS - Sass, Less, Compass○ HTML optimisation○ Test execution○ Many many more…

text

Bower

• Client dependency manager

text

Summary

• Web apps should be treated as software

• Web Client should be developed as a separate

project

• Coding paradigms (MVC) should be applied to web

apps

• Use tools to increase efficiency

text

Further reading

• http://yeoman.io/ • http://gruntjs.com/• http://bower.io/

text

THANK YOU

ASSAF GANNONEmail: assaf@tikalk.com