SlideShare une entreprise Scribd logo
1  sur  20
Télécharger pour lire hors ligne
FullStack Developers Israel

From Server
Generated Pages to
Client App
By Assaf Gannon
28.01.2014
Google Campus

Hosted by:
Evolution of the ‘View’
in Monolithic MVC

text
text

MVC

Most 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 World

Service
(MVC)

Service
(MVC)

Client

Service
(MVC)
text

Micro Service World

Service
(MVC)

Service
(MVC)

Web
Server
(MVC)
Client

Service
(MVC)
text

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

Move to Single Page Applications
What makes it possible?
• Improved browser JS performance
• Improved client hardware
• HTML 5 Standards
text

Single Page App

Move all presentation logic to the client
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

Micro Service World

Service
(MVC)

Service
(MVC)

REST
API

Client

Service
(MVC)
text

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
Introducing Web Client
Development

text
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
The Web Dev Toolkit

text
text

Yeoman

• Project Scaffolding
• Code Generation
text

Grunt

• JS Task executor
• Used for:
○ JS & CSS file concatenation and
minification
○ 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/
THANK YOU
ASSAF GANNON
Email: assaf@tikalk.com

Contenu connexe

Tendances

Tendances (20)

ASP.NET 5 Overview
ASP.NET 5 OverviewASP.NET 5 Overview
ASP.NET 5 Overview
 
Moving from PHP to a nodejs full stack CMS
Moving from PHP to a nodejs full stack CMSMoving from PHP to a nodejs full stack CMS
Moving from PHP to a nodejs full stack CMS
 
Asp.net core 1.0 (Peter Himschoot)
Asp.net core 1.0 (Peter Himschoot)Asp.net core 1.0 (Peter Himschoot)
Asp.net core 1.0 (Peter Himschoot)
 
Host, deploy & scale Blazor Server Apps
Host, deploy & scale Blazor Server AppsHost, deploy & scale Blazor Server Apps
Host, deploy & scale Blazor Server Apps
 
Codegen2021 blazor mobile
Codegen2021 blazor mobileCodegen2021 blazor mobile
Codegen2021 blazor mobile
 
Secure your environment by automation
Secure your environment by automationSecure your environment by automation
Secure your environment by automation
 
Building your own JEA Configuration
Building your own JEA ConfigurationBuilding your own JEA Configuration
Building your own JEA Configuration
 
Introdcution to Adobe CQ
Introdcution to Adobe CQIntrodcution to Adobe CQ
Introdcution to Adobe CQ
 
Secure your servers in time with JIT and JEA
Secure your servers in time with JIT and JEASecure your servers in time with JIT and JEA
Secure your servers in time with JIT and JEA
 
A 20 minute introduction to AngularJS for XPage developers
A 20 minute introduction to AngularJS for XPage developersA 20 minute introduction to AngularJS for XPage developers
A 20 minute introduction to AngularJS for XPage developers
 
A Gentle Introduction to Blazor
A Gentle Introduction to BlazorA Gentle Introduction to Blazor
A Gentle Introduction to Blazor
 
SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - ...
SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - ...SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - ...
SenchaCon 2016: Advanced Techniques for Buidling Ext JS Apps with Electron - ...
 
Chat automation in a Modern IT environment
Chat automation in a Modern IT environmentChat automation in a Modern IT environment
Chat automation in a Modern IT environment
 
Selenium testing
Selenium testingSelenium testing
Selenium testing
 
Angular.js in XPages
Angular.js in XPagesAngular.js in XPages
Angular.js in XPages
 
Wp bham 2011 08 01 meetup on wp 3.2
Wp bham 2011 08 01 meetup on wp 3.2Wp bham 2011 08 01 meetup on wp 3.2
Wp bham 2011 08 01 meetup on wp 3.2
 
Embracing HTTP in the era of API’s
Embracing HTTP in the era of API’sEmbracing HTTP in the era of API’s
Embracing HTTP in the era of API’s
 
Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"
Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"
Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"
 
ECS19 - Laura Kokkarinen - Introduction to Microsoft Graph
ECS19 - Laura Kokkarinen - Introduction to Microsoft GraphECS19 - Laura Kokkarinen - Introduction to Microsoft Graph
ECS19 - Laura Kokkarinen - Introduction to Microsoft Graph
 
ITT Flisol 2013
ITT Flisol 2013ITT Flisol 2013
ITT Flisol 2013
 

Similaire à From server generated pages to client app in a micro-services world

Aftab Jahangeer_Dot Net
Aftab Jahangeer_Dot NetAftab Jahangeer_Dot Net
Aftab Jahangeer_Dot Net
Aftab Jahangir
 
Amit Kumar Architect with Web and Angular JS
Amit Kumar Architect with Web and Angular JSAmit Kumar Architect with Web and Angular JS
Amit Kumar Architect with Web and Angular JS
Amit Kumar
 
Microsoft Power Page for Developer - ภาษาไทย
Microsoft Power Page for Developer - ภาษาไทยMicrosoft Power Page for Developer - ภาษาไทย
Microsoft Power Page for Developer - ภาษาไทย
Teerasej Jiraphatchandej
 

Similaire à From server generated pages to client app in a micro-services world (20)

Building SPA’s (Single Page App) with Backbone.js
Building SPA’s (Single Page App) with Backbone.jsBuilding SPA’s (Single Page App) with Backbone.js
Building SPA’s (Single Page App) with Backbone.js
 
ASP.pptx
ASP.pptxASP.pptx
ASP.pptx
 
Prashant_Shukla-UI
Prashant_Shukla-UIPrashant_Shukla-UI
Prashant_Shukla-UI
 
Escaping the yellow bubble - rewriting Domino using MongoDb and Angular
Escaping the yellow bubble - rewriting Domino using MongoDb and AngularEscaping the yellow bubble - rewriting Domino using MongoDb and Angular
Escaping the yellow bubble - rewriting Domino using MongoDb and Angular
 
Single page application and Framework
Single page application and FrameworkSingle page application and Framework
Single page application and Framework
 
Introduction to ASP.NET
Introduction to ASP.NETIntroduction to ASP.NET
Introduction to ASP.NET
 
Web Applications Development with MEAN Stack
Web Applications Development with MEAN StackWeb Applications Development with MEAN Stack
Web Applications Development with MEAN Stack
 
Aftab Jahangeer_Dot Net
Aftab Jahangeer_Dot NetAftab Jahangeer_Dot Net
Aftab Jahangeer_Dot Net
 
Sai Sharan_UI_Resume
Sai Sharan_UI_ResumeSai Sharan_UI_Resume
Sai Sharan_UI_Resume
 
Trinada pabolu profile
Trinada pabolu profileTrinada pabolu profile
Trinada pabolu profile
 
Building a serverless app
Building a serverless appBuilding a serverless app
Building a serverless app
 
Santosh_Resume_Java
Santosh_Resume_JavaSantosh_Resume_Java
Santosh_Resume_Java
 
Amit Kumar Architect with Web and Angular JS
Amit Kumar Architect with Web and Angular JSAmit Kumar Architect with Web and Angular JS
Amit Kumar Architect with Web and Angular JS
 
Microsoft Power Page for Developer - ภาษาไทย
Microsoft Power Page for Developer - ภาษาไทยMicrosoft Power Page for Developer - ภาษาไทย
Microsoft Power Page for Developer - ภาษาไทย
 
Document
DocumentDocument
Document
 
Trinada pabolu profile
Trinada pabolu profileTrinada pabolu profile
Trinada pabolu profile
 
Arun Kumar(7.8Yrs).DOC
Arun Kumar(7.8Yrs).DOCArun Kumar(7.8Yrs).DOC
Arun Kumar(7.8Yrs).DOC
 
Kumar_Resume - LinkedIn
Kumar_Resume - LinkedInKumar_Resume - LinkedIn
Kumar_Resume - LinkedIn
 
Introduction to Web Frameworks
Introduction to Web FrameworksIntroduction to Web Frameworks
Introduction to Web Frameworks
 
The future of web development write once, run everywhere with angular js an...
The future of web development   write once, run everywhere with angular js an...The future of web development   write once, run everywhere with angular js an...
The future of web development write once, run everywhere with angular js an...
 

Plus de Assaf Gannon

Plus de Assaf Gannon (11)

React hooks
React hooksReact hooks
React hooks
 
Serverless in-action
Serverless in-actionServerless in-action
Serverless in-action
 
Serverless meets GraphQL
Serverless meets GraphQLServerless meets GraphQL
Serverless meets GraphQL
 
Serverless and GraphQL
Serverless and GraphQLServerless and GraphQL
Serverless and GraphQL
 
Micro frontends
Micro frontendsMicro frontends
Micro frontends
 
Intro to functional programming
Intro to functional programmingIntro to functional programming
Intro to functional programming
 
Intro to functional programming
Intro to functional programmingIntro to functional programming
Intro to functional programming
 
Reactive Architecture
Reactive ArchitectureReactive Architecture
Reactive Architecture
 
Software Architecture Patterns
Software Architecture PatternsSoftware Architecture Patterns
Software Architecture Patterns
 
Fullstack workshop
Fullstack workshopFullstack workshop
Fullstack workshop
 
TabTale Architecture Overview
TabTale Architecture OverviewTabTale Architecture Overview
TabTale Architecture Overview
 

Dernier

Dernier (20)

A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusA Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source Milvus
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu SubbuApidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 

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