SlideShare a Scribd company logo
1 of 8
Building complex
Single Page
Application should
be as enjoyable as
visit to a SPA
Igor Moochnick
Director, Cloud Platforms

igorm@bluemetal.com
Blog: igorshare.wordpress.com
Parts of a Web
Application



   DATA           WORKFLOW




          VIEWS              STATE
Step 1: MVC etc…
Planning SPA view layout

         Menu
                           Url: #



                           Home View

                           Url: #tasks


        View Port
                           Tasks View
Step 2:
    Templating
          Data                                     Template
[                                            <li>
    {"Subject":"task1"},                        <%= task.Subject
    {"Subject":"task2"}                      %>
]                                            </li>




                                Result


                           <li>task 1</li>
                           <li>task 2</li>
Step 3:
Modularization + AMD
Step 4: Optimization

Data pre-loading,
Bundling & Minimization
Frameworks to
know about
•   jQuery (Duh!)     • JUnit
•   Backbone.js       • JsUnit
•   Knockout          • mockJSON
•   JSRender
•   Underscore.js
•   Require.js        •   Sammy.js
•   Async.js          •   Toastr
•   Knockback.js      •   SignalR
•   Amplify.js        •   Less
•   JSON-js (json2)   •   SaSS
Questions

Contact info
        Igor Moochnick
        igorm@bluemetal.com
        @igor_moochnick
        igorshare.wordpress.co
        m

More Related Content

Similar to Building complex single page application should be as enjoyable as visit to a spa

Starting with jQuery
Starting with jQueryStarting with jQuery
Starting with jQueryAnil Kumar
 
Javascript first-class citizenery
Javascript first-class citizeneryJavascript first-class citizenery
Javascript first-class citizenerytoddbr
 
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD CombinationLotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD CombinationSean Burgess
 
Jquery dojo slides
Jquery dojo slidesJquery dojo slides
Jquery dojo slideshelenmga
 
React.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UIReact.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UIMarcin Grzywaczewski
 
jQuery - Web Engineering
jQuery - Web Engineering jQuery - Web Engineering
jQuery - Web Engineering adeel990
 
javascript Event Handling and introduction to event.ppt
javascript Event Handling and introduction to event.pptjavascript Event Handling and introduction to event.ppt
javascript Event Handling and introduction to event.pptLalith86
 
CS101- Introduction to Computing- Lecture 32
CS101- Introduction to Computing- Lecture 32CS101- Introduction to Computing- Lecture 32
CS101- Introduction to Computing- Lecture 32Bilal Ahmed
 
Lesson 202 02 oct13-1800-ay
Lesson 202 02 oct13-1800-ayLesson 202 02 oct13-1800-ay
Lesson 202 02 oct13-1800-ayCodecademy Ren
 
NoSQL Deepdive - with Informix NoSQL. IOD 2013
NoSQL Deepdive - with Informix NoSQL. IOD 2013NoSQL Deepdive - with Informix NoSQL. IOD 2013
NoSQL Deepdive - with Informix NoSQL. IOD 2013Keshav Murthy
 
J Query (Complete Course) by Muhammad Ehtisham Siddiqui
J Query (Complete Course) by Muhammad Ehtisham SiddiquiJ Query (Complete Course) by Muhammad Ehtisham Siddiqui
J Query (Complete Course) by Muhammad Ehtisham SiddiquiMuhammad Ehtisham Siddiqui
 
The fundamental problems of GUI applications and why people choose React
The fundamental problems of GUI applications and why people choose ReactThe fundamental problems of GUI applications and why people choose React
The fundamental problems of GUI applications and why people choose ReactOliver N
 
Yeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web appsYeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web appsclimboid
 
Disrupting the application eco system with progressive web applications
Disrupting the application eco system with progressive web applicationsDisrupting the application eco system with progressive web applications
Disrupting the application eco system with progressive web applicationsChris Love
 
Spring batch showCase
Spring batch showCaseSpring batch showCase
Spring batch showCasetaher abdo
 
7 tips for javascript rich ajax websites
7 tips for javascript rich ajax websites7 tips for javascript rich ajax websites
7 tips for javascript rich ajax websitesoazabir
 
How my team is applying JS framework for PHP projects.
How my team is applying JS framework for PHP projects.How my team is applying JS framework for PHP projects.
How my team is applying JS framework for PHP projects.Damon Hung Tran
 
Headless drupal + react js Oleksandr Linyvyi
Headless drupal + react js   Oleksandr LinyvyiHeadless drupal + react js   Oleksandr Linyvyi
Headless drupal + react js Oleksandr LinyvyiDrupalCamp Kyiv
 

Similar to Building complex single page application should be as enjoyable as visit to a spa (20)

Starting with jQuery
Starting with jQueryStarting with jQuery
Starting with jQuery
 
Javascript first-class citizenery
Javascript first-class citizeneryJavascript first-class citizenery
Javascript first-class citizenery
 
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD CombinationLotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
 
Jquery dojo slides
Jquery dojo slidesJquery dojo slides
Jquery dojo slides
 
React.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UIReact.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UI
 
jQuery - Web Engineering
jQuery - Web Engineering jQuery - Web Engineering
jQuery - Web Engineering
 
Jquery library
Jquery libraryJquery library
Jquery library
 
javascript Event Handling and introduction to event.ppt
javascript Event Handling and introduction to event.pptjavascript Event Handling and introduction to event.ppt
javascript Event Handling and introduction to event.ppt
 
CS101- Introduction to Computing- Lecture 32
CS101- Introduction to Computing- Lecture 32CS101- Introduction to Computing- Lecture 32
CS101- Introduction to Computing- Lecture 32
 
Lesson 202 02 oct13-1800-ay
Lesson 202 02 oct13-1800-ayLesson 202 02 oct13-1800-ay
Lesson 202 02 oct13-1800-ay
 
NoSQL Deepdive - with Informix NoSQL. IOD 2013
NoSQL Deepdive - with Informix NoSQL. IOD 2013NoSQL Deepdive - with Informix NoSQL. IOD 2013
NoSQL Deepdive - with Informix NoSQL. IOD 2013
 
Angularjs 2
Angularjs 2 Angularjs 2
Angularjs 2
 
J Query (Complete Course) by Muhammad Ehtisham Siddiqui
J Query (Complete Course) by Muhammad Ehtisham SiddiquiJ Query (Complete Course) by Muhammad Ehtisham Siddiqui
J Query (Complete Course) by Muhammad Ehtisham Siddiqui
 
The fundamental problems of GUI applications and why people choose React
The fundamental problems of GUI applications and why people choose ReactThe fundamental problems of GUI applications and why people choose React
The fundamental problems of GUI applications and why people choose React
 
Yeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web appsYeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web apps
 
Disrupting the application eco system with progressive web applications
Disrupting the application eco system with progressive web applicationsDisrupting the application eco system with progressive web applications
Disrupting the application eco system with progressive web applications
 
Spring batch showCase
Spring batch showCaseSpring batch showCase
Spring batch showCase
 
7 tips for javascript rich ajax websites
7 tips for javascript rich ajax websites7 tips for javascript rich ajax websites
7 tips for javascript rich ajax websites
 
How my team is applying JS framework for PHP projects.
How my team is applying JS framework for PHP projects.How my team is applying JS framework for PHP projects.
How my team is applying JS framework for PHP projects.
 
Headless drupal + react js Oleksandr Linyvyi
Headless drupal + react js   Oleksandr LinyvyiHeadless drupal + react js   Oleksandr Linyvyi
Headless drupal + react js Oleksandr Linyvyi
 

More from Igor Moochnick

Continuous delivery workflow with Docker
Continuous delivery workflow with DockerContinuous delivery workflow with Docker
Continuous delivery workflow with DockerIgor Moochnick
 
Being a generalist and being great at what you do
Being a generalist and being great at what you doBeing a generalist and being great at what you do
Being a generalist and being great at what you doIgor Moochnick
 
The journey to container adoption in enterprise
The journey to container adoption in enterpriseThe journey to container adoption in enterprise
The journey to container adoption in enterpriseIgor Moochnick
 
Dev ops overview (brief)
Dev ops overview (brief)Dev ops overview (brief)
Dev ops overview (brief)Igor Moochnick
 
Dev ops cd tool chains
Dev ops cd tool chainsDev ops cd tool chains
Dev ops cd tool chainsIgor Moochnick
 
Amazon 101 - building composite responsive apps - small
Amazon 101 - building composite responsive apps - smallAmazon 101 - building composite responsive apps - small
Amazon 101 - building composite responsive apps - smallIgor Moochnick
 
Ccr - Concurrency and Coordination Runtime
Ccr - Concurrency and Coordination RuntimeCcr - Concurrency and Coordination Runtime
Ccr - Concurrency and Coordination RuntimeIgor Moochnick
 
NO SQL: What, Why, How
NO SQL: What, Why, HowNO SQL: What, Why, How
NO SQL: What, Why, HowIgor Moochnick
 
Azure ServiceBus Queues and Topics
Azure ServiceBus Queues and TopicsAzure ServiceBus Queues and Topics
Azure ServiceBus Queues and TopicsIgor Moochnick
 
Arch factory - Agile Design: Best Practices
Arch factory - Agile Design: Best PracticesArch factory - Agile Design: Best Practices
Arch factory - Agile Design: Best PracticesIgor Moochnick
 
Best practices for agile design
Best practices for agile designBest practices for agile design
Best practices for agile designIgor Moochnick
 
Caliburn.micro jump start composite applications for WPF, Silverlight and WP7
Caliburn.micro jump start composite applications for WPF, Silverlight and WP7Caliburn.micro jump start composite applications for WPF, Silverlight and WP7
Caliburn.micro jump start composite applications for WPF, Silverlight and WP7Igor Moochnick
 
Building lean products with distributed agile teams
Building lean products with distributed agile teamsBuilding lean products with distributed agile teams
Building lean products with distributed agile teamsIgor Moochnick
 
Building Gwt Clients For Cloud Apps.Pptx
Building Gwt Clients For Cloud Apps.PptxBuilding Gwt Clients For Cloud Apps.Pptx
Building Gwt Clients For Cloud Apps.PptxIgor Moochnick
 
Application Patters For The Cloud
Application Patters For The CloudApplication Patters For The Cloud
Application Patters For The CloudIgor Moochnick
 

More from Igor Moochnick (20)

Continuous delivery workflow with Docker
Continuous delivery workflow with DockerContinuous delivery workflow with Docker
Continuous delivery workflow with Docker
 
Being a generalist and being great at what you do
Being a generalist and being great at what you doBeing a generalist and being great at what you do
Being a generalist and being great at what you do
 
The journey to container adoption in enterprise
The journey to container adoption in enterpriseThe journey to container adoption in enterprise
The journey to container adoption in enterprise
 
Dev ops overview (brief)
Dev ops overview (brief)Dev ops overview (brief)
Dev ops overview (brief)
 
Dev ops cd tool chains
Dev ops cd tool chainsDev ops cd tool chains
Dev ops cd tool chains
 
Orchestration musings
Orchestration musingsOrchestration musings
Orchestration musings
 
Delivery pipelines
Delivery pipelinesDelivery pipelines
Delivery pipelines
 
Amazon 101 - building composite responsive apps - small
Amazon 101 - building composite responsive apps - smallAmazon 101 - building composite responsive apps - small
Amazon 101 - building composite responsive apps - small
 
Ccr - Concurrency and Coordination Runtime
Ccr - Concurrency and Coordination RuntimeCcr - Concurrency and Coordination Runtime
Ccr - Concurrency and Coordination Runtime
 
RavenDB overview
RavenDB overviewRavenDB overview
RavenDB overview
 
NO SQL: What, Why, How
NO SQL: What, Why, HowNO SQL: What, Why, How
NO SQL: What, Why, How
 
Azure ServiceBus Queues and Topics
Azure ServiceBus Queues and TopicsAzure ServiceBus Queues and Topics
Azure ServiceBus Queues and Topics
 
Arch factory - Agile Design: Best Practices
Arch factory - Agile Design: Best PracticesArch factory - Agile Design: Best Practices
Arch factory - Agile Design: Best Practices
 
Best practices for agile design
Best practices for agile designBest practices for agile design
Best practices for agile design
 
Caliburn.micro jump start composite applications for WPF, Silverlight and WP7
Caliburn.micro jump start composite applications for WPF, Silverlight and WP7Caliburn.micro jump start composite applications for WPF, Silverlight and WP7
Caliburn.micro jump start composite applications for WPF, Silverlight and WP7
 
Building lean products with distributed agile teams
Building lean products with distributed agile teamsBuilding lean products with distributed agile teams
Building lean products with distributed agile teams
 
Practical alm testing
Practical alm   testingPractical alm   testing
Practical alm testing
 
Putting SOAP to REST
Putting SOAP to RESTPutting SOAP to REST
Putting SOAP to REST
 
Building Gwt Clients For Cloud Apps.Pptx
Building Gwt Clients For Cloud Apps.PptxBuilding Gwt Clients For Cloud Apps.Pptx
Building Gwt Clients For Cloud Apps.Pptx
 
Application Patters For The Cloud
Application Patters For The CloudApplication Patters For The Cloud
Application Patters For The Cloud
 

Recently uploaded

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...DianaGray10
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityWSO2
 
"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 ...Zilliz
 
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 Takeoffsammart93
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native ApplicationsWSO2
 
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.pdfsudhanshuwaghmare1
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyKhushali Kathiriya
 
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 DiscoveryTrustArc
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Orbitshub
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...apidays
 
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...Zilliz
 
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...apidays
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistandanishmna97
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxRemote DBA Services
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWERMadyBayot
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businesspanagenda
 
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.pptxRustici Software
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAndrey Devyatkin
 

Recently uploaded (20)

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
"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 ...
 
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
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
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
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
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
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
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...
 
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...
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
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
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 

Building complex single page application should be as enjoyable as visit to a spa

  • 1. Building complex Single Page Application should be as enjoyable as visit to a SPA Igor Moochnick Director, Cloud Platforms igorm@bluemetal.com Blog: igorshare.wordpress.com
  • 2. Parts of a Web Application DATA WORKFLOW VIEWS STATE
  • 3. Step 1: MVC etc… Planning SPA view layout Menu Url: # Home View Url: #tasks View Port Tasks View
  • 4. Step 2: Templating Data Template [ <li> {"Subject":"task1"}, <%= task.Subject {"Subject":"task2"} %> ] </li> Result <li>task 1</li> <li>task 2</li>
  • 6. Step 4: Optimization Data pre-loading, Bundling & Minimization
  • 7. Frameworks to know about • jQuery (Duh!) • JUnit • Backbone.js • JsUnit • Knockout • mockJSON • JSRender • Underscore.js • Require.js • Sammy.js • Async.js • Toastr • Knockback.js • SignalR • Amplify.js • Less • JSON-js (json2) • SaSS
  • 8. Questions Contact info Igor Moochnick igorm@bluemetal.com @igor_moochnick igorshare.wordpress.co m