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

Jquery dojo slides
Jquery dojo slidesJquery dojo slides
Jquery dojo slides
helenmga
 
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
Marcin Grzywaczewski
 
Lesson 202 02 oct13-1800-ay
Lesson 202 02 oct13-1800-ayLesson 202 02 oct13-1800-ay
Lesson 202 02 oct13-1800-ay
Codecademy Ren
 
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
oazabir
 

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

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
Igor Moochnick
 
Ccr - Concurrency and Coordination Runtime
Ccr - Concurrency and Coordination RuntimeCcr - Concurrency and Coordination Runtime
Ccr - Concurrency and Coordination Runtime
Igor Moochnick
 
NO SQL: What, Why, How
NO SQL: What, Why, HowNO SQL: What, Why, How
NO SQL: What, Why, How
Igor Moochnick
 
Arch factory - Agile Design: Best Practices
Arch factory - Agile Design: Best PracticesArch factory - Agile Design: Best Practices
Arch factory - Agile Design: Best Practices
Igor Moochnick
 
Best practices for agile design
Best practices for agile designBest practices for agile design
Best practices for agile design
Igor 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 WP7
Igor 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 teams
Igor 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.Pptx
Igor Moochnick
 
Application Patters For The Cloud
Application Patters For The CloudApplication Patters For The Cloud
Application Patters For The Cloud
Igor 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

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
Safe Software
 
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
panagenda
 

Recently uploaded (20)

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
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
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...
 
"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
 
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
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
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
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
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
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
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
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
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...
 
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
 
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
 
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
 
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
 

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