SlideShare a Scribd company logo

Writing HTML5 Web Apps using Backbone.js and GAE

A walkthrough of how to write a complete HTML5 web app (both front end and back end) using Google App Engine (Python), Backbone.js, Require.js, underscore.js and jQuery.

1 of 32
Download to read offline
Writing HTML5 Web Apps

          Google App Engine

             Backbone.js

              Require.js

                jQuery



           Ron Reiter © 2012
Agenda
 Why do you need to learn how to program HTML5 web
  apps?

 A walkthrough over the To-Do list anatomy
   https://github.com/ronreiter/webapp-boilerplate
Why?
 Web Apps = Software as a Service
   Cross OS/platform/browser
   Cuts costs on deployment and maintenance
   Scales easily
      Google App Engine, Amazon, Heroku, etc.

 Mobile Apps
   Cross device development cuts development costs
      WebView
      PhoneGap
Brief Introduction
 Google App Engine - Solid, scalable server framework
   Platform as a Service

 Backbone.js - Proven MVC framework
   LinkedIn mobile, Foursquare, Do.com, Groupon, Posterous,
    Basecamp mobile, Kicksend, etc...

 Require.js - Modular JavaScript Loader
   Module dependency management
   JavaScript minification & bundling

 jQuery - DOM Manipulation Framework
   Creating dynamic content and replacing Flash
The To-Do List
Web App Architecture

             Front End
            Backbone.js




                      REST API


            Back End
         Google App Engine

Recommended

Structuring web applications with Backbone.js
Structuring web applications with Backbone.jsStructuring web applications with Backbone.js
Structuring web applications with Backbone.jsDiego Cardozo
 
Creating MVC Application with backbone js
Creating MVC Application with backbone jsCreating MVC Application with backbone js
Creating MVC Application with backbone jsMindfire Solutions
 
Learning AngularJS - Complete coverage of AngularJS features and concepts
Learning AngularJS  - Complete coverage of AngularJS features and conceptsLearning AngularJS  - Complete coverage of AngularJS features and concepts
Learning AngularJS - Complete coverage of AngularJS features and conceptsSuresh Patidar
 
WJAX 2012 - Web Apps With AngularJS
WJAX 2012 - Web Apps With AngularJSWJAX 2012 - Web Apps With AngularJS
WJAX 2012 - Web Apps With AngularJSPhilipp Burgmer
 
Building a Secure App with Google Polymer and Java / Spring
Building a Secure App with Google Polymer and Java / SpringBuilding a Secure App with Google Polymer and Java / Spring
Building a Secure App with Google Polymer and Java / Springsdeeg
 
Александр Белецкий "Архитектура Javascript приложений"
 Александр Белецкий "Архитектура Javascript приложений" Александр Белецкий "Архитектура Javascript приложений"
Александр Белецкий "Архитектура Javascript приложений"Agile Base Camp
 
Design Patterns in ZK: Java MVVM as Model-View-Binder
Design Patterns in ZK: Java MVVM as Model-View-BinderDesign Patterns in ZK: Java MVVM as Model-View-Binder
Design Patterns in ZK: Java MVVM as Model-View-BinderSimon Massey
 

More Related Content

What's hot

AngularJS : Superheroic JavaScript MVW Framework
AngularJS : Superheroic JavaScript MVW FrameworkAngularJS : Superheroic JavaScript MVW Framework
AngularJS : Superheroic JavaScript MVW FrameworkEdureka!
 
Karlsruher Entwicklertag 2013 - Webanwendungen mit AngularJS
Karlsruher Entwicklertag 2013 - Webanwendungen mit AngularJSKarlsruher Entwicklertag 2013 - Webanwendungen mit AngularJS
Karlsruher Entwicklertag 2013 - Webanwendungen mit AngularJSPhilipp Burgmer
 
Testdrive AngularJS with Spring 4
Testdrive AngularJS with Spring 4Testdrive AngularJS with Spring 4
Testdrive AngularJS with Spring 4Oliver Wahlen
 
KnockOutjs from Scratch
KnockOutjs from ScratchKnockOutjs from Scratch
KnockOutjs from ScratchUdaya Kumar
 
Modern Web Application Development Workflow - EclipseCon Europe 2014
Modern Web Application Development Workflow - EclipseCon Europe 2014Modern Web Application Development Workflow - EclipseCon Europe 2014
Modern Web Application Development Workflow - EclipseCon Europe 2014Stéphane Bégaudeau
 
AngularJS = Browser applications on steroids
AngularJS = Browser applications on steroidsAngularJS = Browser applications on steroids
AngularJS = Browser applications on steroidsMaurice De Beijer [MVP]
 
Vue js and Vue Material
Vue js and Vue MaterialVue js and Vue Material
Vue js and Vue MaterialEueung Mulyana
 
Create Restful Web Application With Node.js Express Framework
Create Restful Web Application With Node.js Express FrameworkCreate Restful Web Application With Node.js Express Framework
Create Restful Web Application With Node.js Express FrameworkEdureka!
 
REACT JS COACHING CENTER IN CHANDIGARH
REACT JS COACHING CENTER IN CHANDIGARHREACT JS COACHING CENTER IN CHANDIGARH
REACT JS COACHING CENTER IN CHANDIGARHPritamNegi5
 
Introduction to react js and reasons to go with react js in 2020
Introduction to react js and reasons to go with react js in 2020Introduction to react js and reasons to go with react js in 2020
Introduction to react js and reasons to go with react js in 2020Concetto Labs
 
Starting with jQuery
Starting with jQueryStarting with jQuery
Starting with jQueryAnil Kumar
 
SUE AGILE Framework (English)
SUE AGILE Framework (English)SUE AGILE Framework (English)
SUE AGILE Framework (English)Sabino Labarile
 
Give your web apps some backbone
Give your web apps some backboneGive your web apps some backbone
Give your web apps some backboneRTigger
 
Dog food conference creating modular webparts with require js in sharepoint
Dog food conference   creating modular webparts with require js in sharepointDog food conference   creating modular webparts with require js in sharepoint
Dog food conference creating modular webparts with require js in sharepointfahey252
 

What's hot (20)

AngularJS : Superheroic JavaScript MVW Framework
AngularJS : Superheroic JavaScript MVW FrameworkAngularJS : Superheroic JavaScript MVW Framework
AngularJS : Superheroic JavaScript MVW Framework
 
Karlsruher Entwicklertag 2013 - Webanwendungen mit AngularJS
Karlsruher Entwicklertag 2013 - Webanwendungen mit AngularJSKarlsruher Entwicklertag 2013 - Webanwendungen mit AngularJS
Karlsruher Entwicklertag 2013 - Webanwendungen mit AngularJS
 
Testdrive AngularJS with Spring 4
Testdrive AngularJS with Spring 4Testdrive AngularJS with Spring 4
Testdrive AngularJS with Spring 4
 
Angular js
Angular jsAngular js
Angular js
 
KnockOutjs from Scratch
KnockOutjs from ScratchKnockOutjs from Scratch
KnockOutjs from Scratch
 
KnockoutJS and MVVM
KnockoutJS and MVVMKnockoutJS and MVVM
KnockoutJS and MVVM
 
Modern Web Application Development Workflow - EclipseCon Europe 2014
Modern Web Application Development Workflow - EclipseCon Europe 2014Modern Web Application Development Workflow - EclipseCon Europe 2014
Modern Web Application Development Workflow - EclipseCon Europe 2014
 
Introduction to React JS
Introduction to React JSIntroduction to React JS
Introduction to React JS
 
AngularJS = Browser applications on steroids
AngularJS = Browser applications on steroidsAngularJS = Browser applications on steroids
AngularJS = Browser applications on steroids
 
Vue js and Vue Material
Vue js and Vue MaterialVue js and Vue Material
Vue js and Vue Material
 
Vue.js
Vue.jsVue.js
Vue.js
 
Angular js
Angular jsAngular js
Angular js
 
Love at first Vue
Love at first VueLove at first Vue
Love at first Vue
 
Create Restful Web Application With Node.js Express Framework
Create Restful Web Application With Node.js Express FrameworkCreate Restful Web Application With Node.js Express Framework
Create Restful Web Application With Node.js Express Framework
 
REACT JS COACHING CENTER IN CHANDIGARH
REACT JS COACHING CENTER IN CHANDIGARHREACT JS COACHING CENTER IN CHANDIGARH
REACT JS COACHING CENTER IN CHANDIGARH
 
Introduction to react js and reasons to go with react js in 2020
Introduction to react js and reasons to go with react js in 2020Introduction to react js and reasons to go with react js in 2020
Introduction to react js and reasons to go with react js in 2020
 
Starting with jQuery
Starting with jQueryStarting with jQuery
Starting with jQuery
 
SUE AGILE Framework (English)
SUE AGILE Framework (English)SUE AGILE Framework (English)
SUE AGILE Framework (English)
 
Give your web apps some backbone
Give your web apps some backboneGive your web apps some backbone
Give your web apps some backbone
 
Dog food conference creating modular webparts with require js in sharepoint
Dog food conference   creating modular webparts with require js in sharepointDog food conference   creating modular webparts with require js in sharepoint
Dog food conference creating modular webparts with require js in sharepoint
 

Viewers also liked

Introduction To Backbone JS
Introduction To Backbone JSIntroduction To Backbone JS
Introduction To Backbone JSparamisoft
 
Introduction to Backbone - Workshop
Introduction to Backbone - WorkshopIntroduction to Backbone - Workshop
Introduction to Backbone - WorkshopOren Farhi
 
JS Framework Comparison - An infographic
JS Framework Comparison - An infographicJS Framework Comparison - An infographic
JS Framework Comparison - An infographicInApp
 
Delivering HTML5 and Modern Apps
Delivering HTML5 and Modern AppsDelivering HTML5 and Modern Apps
Delivering HTML5 and Modern AppsJoshua Drew
 
Top 10 HTML5 frameworks for effective development in 2016
Top 10 HTML5 frameworks for effective development in 2016Top 10 HTML5 frameworks for effective development in 2016
Top 10 HTML5 frameworks for effective development in 2016iMOBDEV Technologies Pvt. Ltd.
 
Building modern web apps with html5, javascript, and java
Building modern web apps with html5, javascript, and javaBuilding modern web apps with html5, javascript, and java
Building modern web apps with html5, javascript, and javaAlexander Gyoshev
 
Modern Web App Architectures
Modern Web App ArchitecturesModern Web App Architectures
Modern Web App ArchitecturesRaphael Stary
 
Web Development Technologies
Web Development TechnologiesWeb Development Technologies
Web Development TechnologiesVignesh Prajapati
 
How to-choose-the-right-technology-architecture-for-your-mobile-application
How to-choose-the-right-technology-architecture-for-your-mobile-applicationHow to-choose-the-right-technology-architecture-for-your-mobile-application
How to-choose-the-right-technology-architecture-for-your-mobile-applicationlverb
 
Learning React - I
Learning React - ILearning React - I
Learning React - IMitch Chen
 
Javascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
Javascript Frameworks Comparison - Angular, Knockout, Ember and BackboneJavascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
Javascript Frameworks Comparison - Angular, Knockout, Ember and BackboneDeepu S Nath
 
Quick Application Development with Web Frameworks
Quick Application Development with Web FrameworksQuick Application Development with Web Frameworks
Quick Application Development with Web FrameworksStratepedia Presentations
 
Introduction To Building Enterprise Web Application With Spring Mvc
Introduction To Building Enterprise Web Application With Spring MvcIntroduction To Building Enterprise Web Application With Spring Mvc
Introduction To Building Enterprise Web Application With Spring MvcAbdelmonaim Remani
 
Elixir & Phoenix 推坑
Elixir & Phoenix 推坑Elixir & Phoenix 推坑
Elixir & Phoenix 推坑Chao-Ju Huang
 
A Simpler Web App Architecture (jDays 2016)
A Simpler Web App Architecture (jDays 2016)A Simpler Web App Architecture (jDays 2016)
A Simpler Web App Architecture (jDays 2016)Gustaf Nilsson Kotte
 

Viewers also liked (20)

Introduction To Backbone JS
Introduction To Backbone JSIntroduction To Backbone JS
Introduction To Backbone JS
 
Introduction to Backbone - Workshop
Introduction to Backbone - WorkshopIntroduction to Backbone - Workshop
Introduction to Backbone - Workshop
 
Backbone Basics with Examples
Backbone Basics with ExamplesBackbone Basics with Examples
Backbone Basics with Examples
 
Backbone.js
Backbone.jsBackbone.js
Backbone.js
 
JS Framework Comparison - An infographic
JS Framework Comparison - An infographicJS Framework Comparison - An infographic
JS Framework Comparison - An infographic
 
Delivering HTML5 and Modern Apps
Delivering HTML5 and Modern AppsDelivering HTML5 and Modern Apps
Delivering HTML5 and Modern Apps
 
Top 10 HTML5 frameworks for effective development in 2016
Top 10 HTML5 frameworks for effective development in 2016Top 10 HTML5 frameworks for effective development in 2016
Top 10 HTML5 frameworks for effective development in 2016
 
Building modern web apps with html5, javascript, and java
Building modern web apps with html5, javascript, and javaBuilding modern web apps with html5, javascript, and java
Building modern web apps with html5, javascript, and java
 
Modern Web App Architectures
Modern Web App ArchitecturesModern Web App Architectures
Modern Web App Architectures
 
Web app architecture
Web app architectureWeb app architecture
Web app architecture
 
Web Development Technologies
Web Development TechnologiesWeb Development Technologies
Web Development Technologies
 
How to-choose-the-right-technology-architecture-for-your-mobile-application
How to-choose-the-right-technology-architecture-for-your-mobile-applicationHow to-choose-the-right-technology-architecture-for-your-mobile-application
How to-choose-the-right-technology-architecture-for-your-mobile-application
 
Learning React - I
Learning React - ILearning React - I
Learning React - I
 
Javascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
Javascript Frameworks Comparison - Angular, Knockout, Ember and BackboneJavascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
Javascript Frameworks Comparison - Angular, Knockout, Ember and Backbone
 
Quick Application Development with Web Frameworks
Quick Application Development with Web FrameworksQuick Application Development with Web Frameworks
Quick Application Development with Web Frameworks
 
Introduction To Building Enterprise Web Application With Spring Mvc
Introduction To Building Enterprise Web Application With Spring MvcIntroduction To Building Enterprise Web Application With Spring Mvc
Introduction To Building Enterprise Web Application With Spring Mvc
 
Ning presentation
Ning presentationNing presentation
Ning presentation
 
Elixir & Phoenix 推坑
Elixir & Phoenix 推坑Elixir & Phoenix 推坑
Elixir & Phoenix 推坑
 
Top 10 web application development frameworks 2016
Top 10 web application development frameworks 2016Top 10 web application development frameworks 2016
Top 10 web application development frameworks 2016
 
A Simpler Web App Architecture (jDays 2016)
A Simpler Web App Architecture (jDays 2016)A Simpler Web App Architecture (jDays 2016)
A Simpler Web App Architecture (jDays 2016)
 

Similar to Writing HTML5 Web Apps using Backbone.js and GAE

Javascript first-class citizenery
Javascript first-class citizeneryJavascript first-class citizenery
Javascript first-class citizenerytoddbr
 
WordPress as the Backbone(.js)
WordPress as the Backbone(.js)WordPress as the Backbone(.js)
WordPress as the Backbone(.js)Beau Lebens
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...Fabio Franzini
 
Single Page Applications on JavaScript and ASP.NET MVC4
Single Page Applications on JavaScript and ASP.NET MVC4Single Page Applications on JavaScript and ASP.NET MVC4
Single Page Applications on JavaScript and ASP.NET MVC4Yuriy Shapovalov
 
Viking academy backbone.js
Viking academy  backbone.jsViking academy  backbone.js
Viking academy backbone.jsBert Wijnants
 
Backbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVCBackbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVCpootsbook
 
Heroku pop-behind-the-sense
Heroku pop-behind-the-senseHeroku pop-behind-the-sense
Heroku pop-behind-the-senseBen Lin
 
Dependency Management with RequireJS
Dependency Management with RequireJSDependency Management with RequireJS
Dependency Management with RequireJSAaronius
 
Understanding backbonejs
Understanding backbonejsUnderstanding backbonejs
Understanding backbonejsNick Lee
 
Exploring Symfony's Code
Exploring Symfony's CodeExploring Symfony's Code
Exploring Symfony's CodeWildan Maulana
 
using Mithril.js + postgREST to build and consume API's
using Mithril.js + postgREST to build and consume API'susing Mithril.js + postgREST to build and consume API's
using Mithril.js + postgREST to build and consume API'sAntônio Roberto Silva
 
Javascript frameworks: Backbone.js
Javascript frameworks: Backbone.jsJavascript frameworks: Backbone.js
Javascript frameworks: Backbone.jsSoós Gábor
 
Javascript ui for rest services
Javascript ui for rest servicesJavascript ui for rest services
Javascript ui for rest servicesIoan Eugen Stan
 
How to disassemble one monster app into an ecosystem of 30
How to disassemble one monster app into an ecosystem of 30How to disassemble one monster app into an ecosystem of 30
How to disassemble one monster app into an ecosystem of 30fiyuer
 
Modular Test-driven SPAs with Spring and AngularJS
Modular Test-driven SPAs with Spring and AngularJSModular Test-driven SPAs with Spring and AngularJS
Modular Test-driven SPAs with Spring and AngularJSGunnar Hillert
 
Ruby on Rails - Introduction
Ruby on Rails - IntroductionRuby on Rails - Introduction
Ruby on Rails - IntroductionVagmi Mudumbai
 
Scala based Lift Framework
Scala based Lift FrameworkScala based Lift Framework
Scala based Lift Frameworkvhazrati
 

Similar to Writing HTML5 Web Apps using Backbone.js and GAE (20)

Javascript first-class citizenery
Javascript first-class citizeneryJavascript first-class citizenery
Javascript first-class citizenery
 
WordPress as the Backbone(.js)
WordPress as the Backbone(.js)WordPress as the Backbone(.js)
WordPress as the Backbone(.js)
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...
 
Single Page Applications on JavaScript and ASP.NET MVC4
Single Page Applications on JavaScript and ASP.NET MVC4Single Page Applications on JavaScript and ASP.NET MVC4
Single Page Applications on JavaScript and ASP.NET MVC4
 
Viking academy backbone.js
Viking academy  backbone.jsViking academy  backbone.js
Viking academy backbone.js
 
Backbone.js
Backbone.jsBackbone.js
Backbone.js
 
Backbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVCBackbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVC
 
Heroku pop-behind-the-sense
Heroku pop-behind-the-senseHeroku pop-behind-the-sense
Heroku pop-behind-the-sense
 
Unit 07: Design Patterns and Frameworks (3/3)
Unit 07: Design Patterns and Frameworks (3/3)Unit 07: Design Patterns and Frameworks (3/3)
Unit 07: Design Patterns and Frameworks (3/3)
 
Dependency Management with RequireJS
Dependency Management with RequireJSDependency Management with RequireJS
Dependency Management with RequireJS
 
Understanding backbonejs
Understanding backbonejsUnderstanding backbonejs
Understanding backbonejs
 
Exploring Symfony's Code
Exploring Symfony's CodeExploring Symfony's Code
Exploring Symfony's Code
 
using Mithril.js + postgREST to build and consume API's
using Mithril.js + postgREST to build and consume API'susing Mithril.js + postgREST to build and consume API's
using Mithril.js + postgREST to build and consume API's
 
Javascript frameworks: Backbone.js
Javascript frameworks: Backbone.jsJavascript frameworks: Backbone.js
Javascript frameworks: Backbone.js
 
Javascript ui for rest services
Javascript ui for rest servicesJavascript ui for rest services
Javascript ui for rest services
 
How to disassemble one monster app into an ecosystem of 30
How to disassemble one monster app into an ecosystem of 30How to disassemble one monster app into an ecosystem of 30
How to disassemble one monster app into an ecosystem of 30
 
Modular Test-driven SPAs with Spring and AngularJS
Modular Test-driven SPAs with Spring and AngularJSModular Test-driven SPAs with Spring and AngularJS
Modular Test-driven SPAs with Spring and AngularJS
 
RequireJS
RequireJSRequireJS
RequireJS
 
Ruby on Rails - Introduction
Ruby on Rails - IntroductionRuby on Rails - Introduction
Ruby on Rails - Introduction
 
Scala based Lift Framework
Scala based Lift FrameworkScala based Lift Framework
Scala based Lift Framework
 

More from Ron Reiter

Securing your Bitcoin wallet
Securing your Bitcoin walletSecuring your Bitcoin wallet
Securing your Bitcoin walletRon Reiter
 
Brogramming - Python, Bash for Data Processing, and Git
Brogramming - Python, Bash for Data Processing, and GitBrogramming - Python, Bash for Data Processing, and Git
Brogramming - Python, Bash for Data Processing, and GitRon Reiter
 
BDX 2015 - Scaling out big-data computation & machine learning using Pig, Pyt...
BDX 2015 - Scaling out big-data computation & machine learning using Pig, Pyt...BDX 2015 - Scaling out big-data computation & machine learning using Pig, Pyt...
BDX 2015 - Scaling out big-data computation & machine learning using Pig, Pyt...Ron Reiter
 
Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to BootstrapRon Reiter
 
jQuery Mobile Workshop
jQuery Mobile WorkshopjQuery Mobile Workshop
jQuery Mobile WorkshopRon Reiter
 
Multi screen HTML5
Multi screen HTML5Multi screen HTML5
Multi screen HTML5Ron Reiter
 
Building Chrome Extensions
Building Chrome ExtensionsBuilding Chrome Extensions
Building Chrome ExtensionsRon Reiter
 
HTML5 New Features and Resources
HTML5 New Features and ResourcesHTML5 New Features and Resources
HTML5 New Features and ResourcesRon Reiter
 
Introduction to App Engine Development
Introduction to App Engine DevelopmentIntroduction to App Engine Development
Introduction to App Engine DevelopmentRon Reiter
 
Digital Audio & Signal Processing (Elad Gariany)
Digital Audio & Signal Processing (Elad Gariany)Digital Audio & Signal Processing (Elad Gariany)
Digital Audio & Signal Processing (Elad Gariany)Ron Reiter
 

More from Ron Reiter (11)

Securing your Bitcoin wallet
Securing your Bitcoin walletSecuring your Bitcoin wallet
Securing your Bitcoin wallet
 
Brogramming - Python, Bash for Data Processing, and Git
Brogramming - Python, Bash for Data Processing, and GitBrogramming - Python, Bash for Data Processing, and Git
Brogramming - Python, Bash for Data Processing, and Git
 
BDX 2015 - Scaling out big-data computation & machine learning using Pig, Pyt...
BDX 2015 - Scaling out big-data computation & machine learning using Pig, Pyt...BDX 2015 - Scaling out big-data computation & machine learning using Pig, Pyt...
BDX 2015 - Scaling out big-data computation & machine learning using Pig, Pyt...
 
Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to Bootstrap
 
jQuery Mobile Workshop
jQuery Mobile WorkshopjQuery Mobile Workshop
jQuery Mobile Workshop
 
Multi screen HTML5
Multi screen HTML5Multi screen HTML5
Multi screen HTML5
 
Mobile Spaces
Mobile SpacesMobile Spaces
Mobile Spaces
 
Building Chrome Extensions
Building Chrome ExtensionsBuilding Chrome Extensions
Building Chrome Extensions
 
HTML5 New Features and Resources
HTML5 New Features and ResourcesHTML5 New Features and Resources
HTML5 New Features and Resources
 
Introduction to App Engine Development
Introduction to App Engine DevelopmentIntroduction to App Engine Development
Introduction to App Engine Development
 
Digital Audio & Signal Processing (Elad Gariany)
Digital Audio & Signal Processing (Elad Gariany)Digital Audio & Signal Processing (Elad Gariany)
Digital Audio & Signal Processing (Elad Gariany)
 

Recently uploaded

Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...Product School
 
My Journey towards Artificial Intelligence
My Journey towards Artificial IntelligenceMy Journey towards Artificial Intelligence
My Journey towards Artificial IntelligenceVijayananda Mohire
 
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...Product School
 
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdfIntroducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdfSafe Software
 
How AI and ChatGPT are changing cybersecurity forever.pptx
How AI and ChatGPT are changing cybersecurity forever.pptxHow AI and ChatGPT are changing cybersecurity forever.pptx
How AI and ChatGPT are changing cybersecurity forever.pptxInfosec
 
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...ISPMAIndia
 
GraphSummit London Feb 2024 - ABK - Neo4j Product Vision and Roadmap.pptx
GraphSummit London Feb 2024 - ABK - Neo4j Product Vision and Roadmap.pptxGraphSummit London Feb 2024 - ABK - Neo4j Product Vision and Roadmap.pptx
GraphSummit London Feb 2024 - ABK - Neo4j Product Vision and Roadmap.pptxNeo4j
 
"Testing of Helm Charts or There and Back Again", Yura Rochniak
"Testing of Helm Charts or There and Back Again", Yura Rochniak"Testing of Helm Charts or There and Back Again", Yura Rochniak
"Testing of Helm Charts or There and Back Again", Yura RochniakFwdays
 
Building Products That Think- Bhaskaran Srinivasan & Ashish Gupta
Building Products That Think- Bhaskaran Srinivasan & Ashish GuptaBuilding Products That Think- Bhaskaran Srinivasan & Ashish Gupta
Building Products That Think- Bhaskaran Srinivasan & Ashish GuptaISPMAIndia
 
"Running Open-Source LLM models on Kubernetes", Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes", Volodymyr TsapFwdays
 
National Institute of Standards and Technology (NIST) Cybersecurity Framework...
National Institute of Standards and Technology (NIST) Cybersecurity Framework...National Institute of Standards and Technology (NIST) Cybersecurity Framework...
National Institute of Standards and Technology (NIST) Cybersecurity Framework...MichaelBenis1
 
Enterprise Architecture As Strategy - Book Review
Enterprise Architecture As Strategy - Book ReviewEnterprise Architecture As Strategy - Book Review
Enterprise Architecture As Strategy - Book ReviewAshraf Fouad
 
Revolutionizing The Banking Industry: The Monzo Way by CPO, Monzo
Revolutionizing The Banking Industry: The Monzo Way by CPO, MonzoRevolutionizing The Banking Industry: The Monzo Way by CPO, Monzo
Revolutionizing The Banking Industry: The Monzo Way by CPO, MonzoProduct School
 
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...UiPathCommunity
 
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, GoogleISPMAIndia
 
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...Neo4j
 
Unleash the Solace Pub Sub connector | Banaglore MuleSoft Meetup #31
Unleash the Solace Pub Sub connector | Banaglore MuleSoft Meetup #31Unleash the Solace Pub Sub connector | Banaglore MuleSoft Meetup #31
Unleash the Solace Pub Sub connector | Banaglore MuleSoft Meetup #31shyamraj55
 
The Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product SchoolThe Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product SchoolProduct School
 
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...DianaGray10
 
Campotel: Telecommunications Infra and Network Builder - Company Profile
Campotel: Telecommunications Infra and Network Builder - Company ProfileCampotel: Telecommunications Infra and Network Builder - Company Profile
Campotel: Telecommunications Infra and Network Builder - Company ProfileCampotelPhilippines
 

Recently uploaded (20)

Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
 
My Journey towards Artificial Intelligence
My Journey towards Artificial IntelligenceMy Journey towards Artificial Intelligence
My Journey towards Artificial Intelligence
 
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
 
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdfIntroducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
Introducing the New FME Community Webinar - Feb 21, 2024 (2).pdf
 
How AI and ChatGPT are changing cybersecurity forever.pptx
How AI and ChatGPT are changing cybersecurity forever.pptxHow AI and ChatGPT are changing cybersecurity forever.pptx
How AI and ChatGPT are changing cybersecurity forever.pptx
 
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
 
GraphSummit London Feb 2024 - ABK - Neo4j Product Vision and Roadmap.pptx
GraphSummit London Feb 2024 - ABK - Neo4j Product Vision and Roadmap.pptxGraphSummit London Feb 2024 - ABK - Neo4j Product Vision and Roadmap.pptx
GraphSummit London Feb 2024 - ABK - Neo4j Product Vision and Roadmap.pptx
 
"Testing of Helm Charts or There and Back Again", Yura Rochniak
"Testing of Helm Charts or There and Back Again", Yura Rochniak"Testing of Helm Charts or There and Back Again", Yura Rochniak
"Testing of Helm Charts or There and Back Again", Yura Rochniak
 
Building Products That Think- Bhaskaran Srinivasan & Ashish Gupta
Building Products That Think- Bhaskaran Srinivasan & Ashish GuptaBuilding Products That Think- Bhaskaran Srinivasan & Ashish Gupta
Building Products That Think- Bhaskaran Srinivasan & Ashish Gupta
 
"Running Open-Source LLM models on Kubernetes", Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes", Volodymyr Tsap
 
National Institute of Standards and Technology (NIST) Cybersecurity Framework...
National Institute of Standards and Technology (NIST) Cybersecurity Framework...National Institute of Standards and Technology (NIST) Cybersecurity Framework...
National Institute of Standards and Technology (NIST) Cybersecurity Framework...
 
Enterprise Architecture As Strategy - Book Review
Enterprise Architecture As Strategy - Book ReviewEnterprise Architecture As Strategy - Book Review
Enterprise Architecture As Strategy - Book Review
 
Revolutionizing The Banking Industry: The Monzo Way by CPO, Monzo
Revolutionizing The Banking Industry: The Monzo Way by CPO, MonzoRevolutionizing The Banking Industry: The Monzo Way by CPO, Monzo
Revolutionizing The Banking Industry: The Monzo Way by CPO, Monzo
 
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
 
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
 
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...
 
Unleash the Solace Pub Sub connector | Banaglore MuleSoft Meetup #31
Unleash the Solace Pub Sub connector | Banaglore MuleSoft Meetup #31Unleash the Solace Pub Sub connector | Banaglore MuleSoft Meetup #31
Unleash the Solace Pub Sub connector | Banaglore MuleSoft Meetup #31
 
The Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product SchoolThe Future of Product, by Founder & CEO, Product School
The Future of Product, by Founder & CEO, Product School
 
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
 
Campotel: Telecommunications Infra and Network Builder - Company Profile
Campotel: Telecommunications Infra and Network Builder - Company ProfileCampotel: Telecommunications Infra and Network Builder - Company Profile
Campotel: Telecommunications Infra and Network Builder - Company Profile
 

Writing HTML5 Web Apps using Backbone.js and GAE

  • 1. Writing HTML5 Web Apps Google App Engine Backbone.js Require.js jQuery Ron Reiter © 2012
  • 2. Agenda  Why do you need to learn how to program HTML5 web apps?  A walkthrough over the To-Do list anatomy  https://github.com/ronreiter/webapp-boilerplate
  • 3. Why?  Web Apps = Software as a Service  Cross OS/platform/browser  Cuts costs on deployment and maintenance  Scales easily  Google App Engine, Amazon, Heroku, etc.  Mobile Apps  Cross device development cuts development costs  WebView  PhoneGap
  • 4. Brief Introduction  Google App Engine - Solid, scalable server framework  Platform as a Service  Backbone.js - Proven MVC framework  LinkedIn mobile, Foursquare, Do.com, Groupon, Posterous, Basecamp mobile, Kicksend, etc...  Require.js - Modular JavaScript Loader  Module dependency management  JavaScript minification & bundling  jQuery - DOM Manipulation Framework  Creating dynamic content and replacing Flash
  • 6. Web App Architecture Front End Backbone.js REST API Back End Google App Engine
  • 8. Dataset  We want to create a Todo list item table.  Start by adding a Google App Engine model # the Todo model. class Todo(db.Model): content = db.StringProperty() done = db.BooleanProperty() order = db.IntegerProperty()
  • 9. Request Handler  Serves all web requests  We implement a main handler and REST API def main(): application = webapp.WSGIApplication([ # index.html ('/', MainHandler), # REST interface ('/todos', TodoListHandler), ('/todos/(d+)', TodoItemHandler), ], debug=True) util.run_wsgi_app(application)
  • 10. Main Request Handler  When we access http://www.todolist.com, the app is downloaded to our computer and starts to run. class MainHandler(webapp.RequestHandler): def get(self): self.response.out.write( template.render("index.html", {}))
  • 11. REST API Standard  REST API is used to let clients control datasets, using four CRUD operations:  Create a new item – using HTTP POST requests  Read a list of items – using HTTP GET requests  Update a single item – using HTTP PUT requests  Delete a single item – using HTTP DELETE requests  Similar to SQL, but this is a customized interface and not a way to access a database  REST API uses XML or JSON serialization (Javascript Object Notation) to encode and decode objects  We’ll use JSON
  • 12. REST API – GET (get all tasks) class TodoListHandler (webapp.RequestHandler): def get(self): # serialize all Todos, # include the ID in the response todos = [] for todo in Todo.all(): todos.append({ "id" : todo.key().id(), "content" : todo.content, "done" : todo.done, "order" : todo.order, }) # send them to the client as JSON self.response.out.write(simplejson.dumps(todos))
  • 13. REST API – POST (add a new task) class TodoListHandler (webapp.RequestHandler): def post(self): data = simplejson.loads(self.request.body) # load JSON data of the object todo = Todo( content = data["content"], done = data["done"], order = data["order"], ).put() # create the todo item # send it back, and include the new ID. self.response.out.write(simplejson.dumps({ "id" : todo.id(), "content" : data["content"], "done" : data["done"], "order" : data["order"], }))
  • 14. REST API – PUT (update a task) class TodoItemHandler (webapp.RequestHandler): def put(self, id): data = simplejson.loads(self.request.body) # load the updated model todo = Todo.get_by_id(int(id)) # get it model using the ID from the request path todo.content = data["content"] todo.done = data["done"] todo.order = data["order"] todo.put() # update all fields and save to the DB # send it back using the updated values self.response.out.write(simplejson.dumps({ "id" : id, "content" : todo.content, "done" : todo.done, "order" : todo.order, }))
  • 15. REST API – DELETE (delete a task) class TodoItemHandler (webapp.RequestHandler): def delete(self, id): # find the requested model and delete it. todo = Todo.get_by_id(int(id)) todo.delete()
  • 17. Backbone.js Architecture – MVC Server Model Database Backbone REST Sync Model View Backbone.Model HTML + CSS DOM Manipulation With jQuery and templating Controller Backbone.View View Events Model Events
  • 18. Backbone.js Architecture – REST Sync Collection Operations Collection Model Operations GET /tasks PUT /tasks/38 POST /tasks View Model DELETE /tasks/38 PUT /tasks/39 View Model DELETE /tasks/39 PUT /tasks/40 View Model DELETE /tasks/40 PUT /tasks/41 View Model DELETE /tasks/41
  • 19. Web App Directory Structure  index.html – Main entry point  css  todos.css – Defines the style  js  libs  require.js, jQuery, Backbone, Underscore  models  todo.js – The todo item model  collections  todos.js – The todo item collection  views  todos.js – The todo item view  App.js – The app view  templates  stats.html  todo.html – The todo item template  main.js – Require.js entry point
  • 20. index.html  Loads the stylesheet <link rel="stylesheet" href="css/todos.css”/>  Loads the main.js script <script data-main="js/main" src="js/libs/require/require.js"> </script>
  • 21. main.js  Configures paths and known libraries  text is used for require.js text loading (for templates) require.config({ paths: { jquery: 'libs/jquery/jquery-min', underscore: 'libs/underscore/underscore-min', backbone: 'libs/backbone/backbone-optamd3-min', text: 'libs/require/text' } });
  • 22. main.js – cont.  Load the app view (views/app.js)  Notice there is no need to add the JS extension  Require.js supplies us with a function to run Javascript code only after certain modules have been loaded.  This allows us to create a dependency model, and a new way to write Javascript modules. require(['views/app'], function(AppView){ var app_view = new AppView; });
  • 23. views/app.js – The AppView  Backbone's "View" is actually a "View Controller". The view itself is the template combined with CSS.  Creating a new view either means  creating a new DOM element using JavaScript/jQuery or templating  Using an existing one in the DOM  Since there is only one app, we’ll use an existing element for the AppView.  However, task views are more dynamic, and they will create new DOM elements.
  • 24. views/app.js – The AppView (cont.)  The define function allows us to depend on libraries, template files and other modules we wrote.  Every dependency in the list corresponds to an argument of the function to execute once all modules are loaded. define([ 'jquery’, 'underscore', 'backbone', 'collections/todos’, 'views/todos', 'text!templates/stats.html' ], function($, _, Backbone, Todos, TodoView, statsTemplate) { var AppView = Backbone.View.extend({ ...
  • 25. views/app.js – The AppView (cont.)  The "View" captures and delegates events on DOM elements events: { "keypress #new-todo": "createOnEnter", "click .todo-clear a": "clearCompleted” },
  • 26. views/app.js – The AppView (cont.)  We add some handlers on the Todos collection to get notified when it's updated.  Then, we fetch the Todos collection from the server.  Once the data is loaded, addAll will be executed. initialize: function() { Todos.bind('add', this.addOne); Todos.bind('reset', this.addAll); Todos.fetch(); },
  • 27. collections/todos.js – Todo Collection  Backbone Collections are model arrays which synchronize with the server.  The AppView listens for changes on this collection, and can add new models to it. define([ 'underscore', 'backbone', 'models/todo’ ], function(_, Backbone, Todo){ var TodosCollection = Backbone.Collection.extend({ model: Todo, url: '/todos', done: function() { return this.filter(function(todo){ return todo.get('done'); }); } });
  • 28. models/todo.js – Todo Model  Holds the Todo item data  Defines the default values and methods related to the data  The "define" function needs to return the model class. When "model/todo" will be required, it will be received. define(['underscore', 'backbone'], function(_, Backbone) { var TodoModel = Backbone.Model.extend({ defaults: { content: "empty todo...”, done: false, order: 0 } }); return TodoModel; });
  • 29. views/todos.js – Todo View  Bind the view to the model  Render function uses the model data to render the template define(['jquery', 'underscore', 'backbone’, 'models/todo', 'text!templates/todos.html' ], function($, _, Backbone, Todo, todosTemplate){ var TodoView = Backbone.View.extend({ model: Todo, template: _.template(todosTemplate), initialize: function() { this.model.bind('change', this.render); this.model.bind('destroy', this.remove); }, render: function() { $(this.el).html(this.template(this.model.toJSON())); ...
  • 30. views/todos.js – Todo View (cont.)  Manipulate the view's model according to triggered events events: { "click .check" : "toggleDone", ... } // Toggle the "done" state of the model. toggleDone: function() { this.model.save({done : !this.model.get("done")}); },
  • 31. templates/todos.html  Template files are used to build the views either:  Once (and then update using jQuery)  On every update (if you're lazy)  Use <%- ... -> for escaping HTML <div class="todo <%= done ? 'done' : '' %>"> <div class="display"> <input class="check" type="checkbox" <%= done ? 'checked="checked"' : '' %> /> <div class="todo-content"><%- content %></div> <span class="todo-destroy"></span> </div> <div class="edit"> <input class="todo-input" type="text" value="<%- content %>" /> </div> </div>