SlideShare une entreprise Scribd logo
1  sur  32
JavaScript End-to-End
  Touch-screen to Server

       Richard Rodger
          @rjrodger
What can
JavaScript
  do for
   you?      How does
              it work?
                         A real life
                         example

                                       Lessons
                                       learned
User Interface
Complex, Stateful, Interactive
Multi-Device
Web, Tablet, Mobile
Hybrid Apps
HTML5/JS in a Native Wrapper
Server-Side
Event-driven & Non-blocking
Database
Map Reduce (was Stored Procedure)




                          http://blog.sharpthinking.com.au
Web Service APIs
JSON & XML, REST & SOAP
Real-Time Web
            Web Sockets


Web sockets are so
 cool ... you never
 have to hang up
How?
•User Interface   frameworks
•Multi-Device     html5
•Hybrid Apps      phonegap
•Server-Side      node.js
•Database         mongodb, couchdb
•Web Services     node.js modules
•Real-Time Web    socket.io
Basic Idea
                           nginx                 Node.js


• nginx
 • high performance web server
    • serves static resources: test files, images
    • proxies requests through to Node.js app server
• Node.js
 • high performance server-side JavaScript
 • Executes business logic and database queries
Node.js
• Runs high-performance server-side JavaScript
• Uses the Google Chrome V8 engine
 • just-in-time compilation to machine code
 • generation garbage collection (like the Java JVM)
 • creates virtual “classes” to optimise property lookups
• Has a well-designed module system for third party code - very
   effective and simple to use
• Your code runs in a single non-blocking JavaScript
   thread
• That’s OK, most of the time you’re waiting for database or
   network events
Node.js Web Server
var http = require('http');

var server = http.createServer(function (req, res) {
   res.writeHead(200, {'Content-Type': 'text/plain'});
   res.end('Hello Worldn');
})

server.listen(1337, "127.0.0.1");

console.log('Server running at http://127.0.0.1:1337');
businesspost.ie
Web
 Mobile                     Cloud
              Services
Web Apps                   Services
                API


 Mobile &       REST &
                            Database
Tablet Web       JSON

 Mobile &     Horizontal   Third Party
Tablet Apps     Scale       Services

 Desktop       Cloud
                           Monitoring
  Web          Hosted
Client-side
 Router    #! URLs
                             • Common code-base
                              • even for hybrid apps!
 Models    Data, biz logic
                             • backbone.js
                             • shims for weak browsers
  Views    DOM Layout
                             • browser-targeting: user-
                               agent & capabilities

                             • responsive layout
                               (mostly)
 Helpers   Shared code
Client-side: running
1. Load
static       2. Init shared
index.html   code, then       3. Init
and assets   targeted         router, and   4. Wait for
             code             display as    events
                              per #! URL
Server-side
             map /api/ URLs       • nginx & Node.js
  Router
             to functions         • Small code volume
    API      function( req,       • Third party modules:
 functions   res ) { ... }         • connect
             Shared code
                                   • express
 Helpers     (some with client)    • seneca (my db layer)
             Open source
                                  • Deploy with:
 Modules     heavy-lifting         • sudo killall node
Server-side: running
1. Connect
to databases   2. Route
and listen     HTTP            3. Talk to
for HTTP       requests to     database,    4. Send
               API functions   wait for     JSON back
                               callback     to client
Cloud Services
Database    Hosting    Monitors



MongoDB     Amazon      Amazon

             Load
  Redis                cloudkick
            Balancer

            Instance
memcached              Continuous
             Scaling
Third Party Integration
JSON, XML, simple form data, text files, ...
  ... all easy using JavaScript and Node.js Modules


    Analytics          Twitter        E-Commerce

                                         In-App
     Logging          Facebook
                                       Purchasing

      Email           LinkedIn         Stock Feed
Native Apps
Same code as mobile web versions, ...
 ... wrapped using PhoneGap to run natively
 ... plus some native plugins
Lesson:
Lesson:
               code volume
4

3

2

1

0
    Client JavaScript   Server JavaScript
Lesson:
multi-platform client-side JavaScript is really hard

 • a framework is a must           • code against ECMA, use shims
                                      to support older browsers
  • backbone.js                    • Code/Test/Debug inside Safari
 • business logic must be in       • phonegap.github.com/weinre
    common code                       for hard to reach places
 • browser-specific code        • use error capture in production
  • virtual .js files           • Finally, use a simple static site as
                                 a fallback (also for Googlebot)
 • use jshint to keep IE happy
Lesson:
multi-platform HTML/CSS is really hard

 • "structured" CSS is a must   • Clean, semantic HTML is not
                                   optional
  • sass or less                 • graceful degradation may
 • Be happy with                     require radically different CSS

  • media queries               • 100% "Responsive" design is
                                   tough
  • CSS3 transforms              • Responsive within browser
                                     subsets has higher reward/
 • browser-specific code              effort

  • virtual .css files
Lesson:
the app stores are not web sites

 • that bug in version 1... • you can't deploy hot fixes
  • will take two weeks to • make everything
     fix via an update          configurable!

   • some users will never    • All prices, text, host
     update                      names, urls, ...

   • appears after an OS     • On launch, app "checks-in"
     update                    for new configuration

                              • this will save your life
Lesson:
Node.js does what it says on the tin

 • High performance             • callback spaghetti is not a
                                   problem in practice
 • High throughput
 • Low CPU usage                  • use functional style
 • Constant memory usage          • client-side code is far
                                      more difficult
  • leaks will kill, but then   • Don't do CPU intensive stuff
 • < 100ms startup time          • ... there's a warning on
  • means you may not                 the tin!
       notice!
Lesson:
Outsource your database

 • Remote MongoDB              • Big productivity gain
   hosting
                                • no production tuning
  • mongohq.com                 • no configuration
 • No downtime                  • no cluster set up
 • Backups
 • Low latency (in Amazon)
 • Web-based admin (if lazy)
My Company
HTML5 Apps + Node.js



My Book
Launch: Hodges Figgis
21st March, 7:30 PM


Richard Rodger
@rjrodger
nearform.com
My Company
HTML5 Apps + Node.js



My Book
Launch: Hodges Figgis
21st March, 7:30 PM


Richard Rodger
@rjrodger
nearform.com

Contenu connexe

Tendances

MEAN Stack WeNode Barcelona Workshop
MEAN Stack WeNode Barcelona WorkshopMEAN Stack WeNode Barcelona Workshop
MEAN Stack WeNode Barcelona Workshop
Valeri Karpov
 
Node.js, toy or power tool?
Node.js, toy or power tool?Node.js, toy or power tool?
Node.js, toy or power tool?
Ovidiu Dimulescu
 

Tendances (20)

Bringing Interactivity to Your Drupal Site with Node.js Integration
Bringing Interactivity to Your Drupal Site with Node.js IntegrationBringing Interactivity to Your Drupal Site with Node.js Integration
Bringing Interactivity to Your Drupal Site with Node.js Integration
 
Node js projects
Node js projectsNode js projects
Node js projects
 
Searching for the framework of my dreams in node.js ecosystem by Mykyta Semen...
Searching for the framework of my dreams in node.js ecosystem by Mykyta Semen...Searching for the framework of my dreams in node.js ecosystem by Mykyta Semen...
Searching for the framework of my dreams in node.js ecosystem by Mykyta Semen...
 
8 Most Effective Node.js Tools for Developers
8 Most Effective Node.js Tools for Developers8 Most Effective Node.js Tools for Developers
8 Most Effective Node.js Tools for Developers
 
9 anti-patterns for node.js teams
9 anti-patterns for node.js teams9 anti-patterns for node.js teams
9 anti-patterns for node.js teams
 
TDD a REST API With Node.js and MongoDB
TDD a REST API With Node.js and MongoDBTDD a REST API With Node.js and MongoDB
TDD a REST API With Node.js and MongoDB
 
Ruby performance - The low hanging fruit
Ruby performance - The low hanging fruitRuby performance - The low hanging fruit
Ruby performance - The low hanging fruit
 
The Dark Side of Single Page Applications
The Dark Side of Single Page ApplicationsThe Dark Side of Single Page Applications
The Dark Side of Single Page Applications
 
Javascript fatigue, 자바스크립트 피로
Javascript fatigue, 자바스크립트 피로Javascript fatigue, 자바스크립트 피로
Javascript fatigue, 자바스크립트 피로
 
"Building Cross-platform Without Sacrificing Performance" by Simon Sturmer (K...
"Building Cross-platform Without Sacrificing Performance" by Simon Sturmer (K..."Building Cross-platform Without Sacrificing Performance" by Simon Sturmer (K...
"Building Cross-platform Without Sacrificing Performance" by Simon Sturmer (K...
 
Why You Should Use MERN Stack for Startup Apps?
Why You Should Use MERN Stack for Startup Apps?Why You Should Use MERN Stack for Startup Apps?
Why You Should Use MERN Stack for Startup Apps?
 
PHP Indonesia - Nodejs Web Development
PHP Indonesia - Nodejs Web DevelopmentPHP Indonesia - Nodejs Web Development
PHP Indonesia - Nodejs Web Development
 
Conquering AngularJS Limitations
Conquering AngularJS LimitationsConquering AngularJS Limitations
Conquering AngularJS Limitations
 
Joshfire factory: Using NodeJS in production
Joshfire factory: Using NodeJS in productionJoshfire factory: Using NodeJS in production
Joshfire factory: Using NodeJS in production
 
Introduction to Node.js
Introduction to Node.jsIntroduction to Node.js
Introduction to Node.js
 
MEAN Stack WeNode Barcelona Workshop
MEAN Stack WeNode Barcelona WorkshopMEAN Stack WeNode Barcelona Workshop
MEAN Stack WeNode Barcelona Workshop
 
MongoDB MEAN Stack Webinar October 7, 2015
MongoDB MEAN Stack Webinar October 7, 2015MongoDB MEAN Stack Webinar October 7, 2015
MongoDB MEAN Stack Webinar October 7, 2015
 
Meanstack overview
Meanstack overviewMeanstack overview
Meanstack overview
 
Unleash and Empower Your Engineers
Unleash and Empower Your EngineersUnleash and Empower Your Engineers
Unleash and Empower Your Engineers
 
Node.js, toy or power tool?
Node.js, toy or power tool?Node.js, toy or power tool?
Node.js, toy or power tool?
 

En vedette

Business Communication
Business CommunicationBusiness Communication
Business Communication
moiz701
 

En vedette (6)

20120816 nodejsdublin
20120816 nodejsdublin20120816 nodejsdublin
20120816 nodejsdublin
 
20120514 nodejsdublin
20120514 nodejsdublin20120514 nodejsdublin
20120514 nodejsdublin
 
Conseils pour un jeune diabétique 1
Conseils pour un jeune diabétique 1Conseils pour un jeune diabétique 1
Conseils pour un jeune diabétique 1
 
Richardrodger nodeday-2014-final
Richardrodger nodeday-2014-finalRichardrodger nodeday-2014-final
Richardrodger nodeday-2014-final
 
Richardrodger microxchgio-feb-2015-final
Richardrodger microxchgio-feb-2015-finalRichardrodger microxchgio-feb-2015-final
Richardrodger microxchgio-feb-2015-final
 
Business Communication
Business CommunicationBusiness Communication
Business Communication
 

Similaire à 20120306 dublin js

Building Real-World Dojo Web Applications
Building Real-World Dojo Web ApplicationsBuilding Real-World Dojo Web Applications
Building Real-World Dojo Web Applications
Andrew Ferrier
 
Phonegap for Engineers
Phonegap for EngineersPhonegap for Engineers
Phonegap for Engineers
Brian LeRoux
 

Similaire à 20120306 dublin js (20)

Beginners Node.js
Beginners Node.jsBeginners Node.js
Beginners Node.js
 
Introduction to node.js aka NodeJS
Introduction to node.js aka NodeJSIntroduction to node.js aka NodeJS
Introduction to node.js aka NodeJS
 
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
 
Building Real-World Dojo Web Applications
Building Real-World Dojo Web ApplicationsBuilding Real-World Dojo Web Applications
Building Real-World Dojo Web Applications
 
Meetup. Technologies Intro for Non-Tech People
Meetup. Technologies Intro for Non-Tech PeopleMeetup. Technologies Intro for Non-Tech People
Meetup. Technologies Intro for Non-Tech People
 
Nodejs overview
Nodejs overviewNodejs overview
Nodejs overview
 
Offience's Node showcase
Offience's Node showcaseOffience's Node showcase
Offience's Node showcase
 
Tech io nodejs_20130531_v0.6
Tech io nodejs_20130531_v0.6Tech io nodejs_20130531_v0.6
Tech io nodejs_20130531_v0.6
 
After the LAMP, it's time to get MEAN
After the LAMP, it's time to get MEANAfter the LAMP, it's time to get MEAN
After the LAMP, it's time to get MEAN
 
An introduction to Node.js
An introduction to Node.jsAn introduction to Node.js
An introduction to Node.js
 
Android lessons you won't learn in school
Android lessons you won't learn in schoolAndroid lessons you won't learn in school
Android lessons you won't learn in school
 
Apache Drill (ver. 0.2)
Apache Drill (ver. 0.2)Apache Drill (ver. 0.2)
Apache Drill (ver. 0.2)
 
Developing and Testing a MongoDB and Node.js REST API
Developing and Testing a MongoDB and Node.js REST APIDeveloping and Testing a MongoDB and Node.js REST API
Developing and Testing a MongoDB and Node.js REST API
 
Node
NodeNode
Node
 
Node.js
Node.jsNode.js
Node.js
 
Be faster then rabbits
Be faster then rabbitsBe faster then rabbits
Be faster then rabbits
 
IBM Connect 2017: Your Data In the Major Leagues: A Practical Guide to REST S...
IBM Connect 2017: Your Data In the Major Leagues: A Practical Guide to REST S...IBM Connect 2017: Your Data In the Major Leagues: A Practical Guide to REST S...
IBM Connect 2017: Your Data In the Major Leagues: A Practical Guide to REST S...
 
"You Don't Know NODE.JS" by Hengki Mardongan Sihombing (Urbanhire)
"You Don't Know NODE.JS" by Hengki Mardongan Sihombing (Urbanhire)"You Don't Know NODE.JS" by Hengki Mardongan Sihombing (Urbanhire)
"You Don't Know NODE.JS" by Hengki Mardongan Sihombing (Urbanhire)
 
AngularJS - Architecture decisions in a large project 
AngularJS - Architecture decisionsin a large project AngularJS - Architecture decisionsin a large project 
AngularJS - Architecture decisions in a large project 
 
Phonegap for Engineers
Phonegap for EngineersPhonegap for Engineers
Phonegap for Engineers
 

Plus de Richard Rodger

Using RAG to create your own Podcast conversations.pdf
Using RAG to create your own Podcast conversations.pdfUsing RAG to create your own Podcast conversations.pdf
Using RAG to create your own Podcast conversations.pdf
Richard Rodger
 
Richard_TheDev2023_pattern.pptx.pdf
Richard_TheDev2023_pattern.pptx.pdfRichard_TheDev2023_pattern.pptx.pdf
Richard_TheDev2023_pattern.pptx.pdf
Richard Rodger
 
richard-rodger-awssofia-microservices-2019.pdf
richard-rodger-awssofia-microservices-2019.pdfrichard-rodger-awssofia-microservices-2019.pdf
richard-rodger-awssofia-microservices-2019.pdf
Richard Rodger
 
richardrodger-microservice-algebra-cluj-apr.pdf
richardrodger-microservice-algebra-cluj-apr.pdfrichardrodger-microservice-algebra-cluj-apr.pdf
richardrodger-microservice-algebra-cluj-apr.pdf
Richard Rodger
 
richardrodger-designing-microservices-london-may.pdf
richardrodger-designing-microservices-london-may.pdfrichardrodger-designing-microservices-london-may.pdf
richardrodger-designing-microservices-london-may.pdf
Richard Rodger
 
richardrodger-designing-microservices-london-may.pdf
richardrodger-designing-microservices-london-may.pdfrichardrodger-designing-microservices-london-may.pdf
richardrodger-designing-microservices-london-may.pdf
Richard Rodger
 
richardrodger-microservice-risk-dublin-mar.pdf
richardrodger-microservice-risk-dublin-mar.pdfrichardrodger-microservice-risk-dublin-mar.pdf
richardrodger-microservice-risk-dublin-mar.pdf
Richard Rodger
 
richardrodger-service-discovery-waterford-feb.pdf
richardrodger-service-discovery-waterford-feb.pdfrichardrodger-service-discovery-waterford-feb.pdf
richardrodger-service-discovery-waterford-feb.pdf
Richard Rodger
 
How to Write Big Apps (Richard Rodger NodeDublin 2012)
How to Write Big Apps (Richard Rodger NodeDublin 2012)How to Write Big Apps (Richard Rodger NodeDublin 2012)
How to Write Big Apps (Richard Rodger NodeDublin 2012)
Richard Rodger
 
Richard rodger-appgen-2012-lxjs-lisbon
Richard rodger-appgen-2012-lxjs-lisbonRichard rodger-appgen-2012-lxjs-lisbon
Richard rodger-appgen-2012-lxjs-lisbon
Richard Rodger
 

Plus de Richard Rodger (19)

Using RAG to create your own Podcast conversations.pdf
Using RAG to create your own Podcast conversations.pdfUsing RAG to create your own Podcast conversations.pdf
Using RAG to create your own Podcast conversations.pdf
 
Richard_TheDev2023_pattern.pptx.pdf
Richard_TheDev2023_pattern.pptx.pdfRichard_TheDev2023_pattern.pptx.pdf
Richard_TheDev2023_pattern.pptx.pdf
 
richard-rodger-awssofia-microservices-2019.pdf
richard-rodger-awssofia-microservices-2019.pdfrichard-rodger-awssofia-microservices-2019.pdf
richard-rodger-awssofia-microservices-2019.pdf
 
richardrodger-microservice-algebra-cluj-apr.pdf
richardrodger-microservice-algebra-cluj-apr.pdfrichardrodger-microservice-algebra-cluj-apr.pdf
richardrodger-microservice-algebra-cluj-apr.pdf
 
richardrodger-designing-microservices-london-may.pdf
richardrodger-designing-microservices-london-may.pdfrichardrodger-designing-microservices-london-may.pdf
richardrodger-designing-microservices-london-may.pdf
 
richardrodger-designing-microservices-london-may.pdf
richardrodger-designing-microservices-london-may.pdfrichardrodger-designing-microservices-london-may.pdf
richardrodger-designing-microservices-london-may.pdf
 
richardrodger-microservice-risk-dublin-mar.pdf
richardrodger-microservice-risk-dublin-mar.pdfrichardrodger-microservice-risk-dublin-mar.pdf
richardrodger-microservice-risk-dublin-mar.pdf
 
richardrodger-service-discovery-waterford-feb.pdf
richardrodger-service-discovery-waterford-feb.pdfrichardrodger-service-discovery-waterford-feb.pdf
richardrodger-service-discovery-waterford-feb.pdf
 
richardrodger-vespa-waterford-oct.pdf
richardrodger-vespa-waterford-oct.pdfrichardrodger-vespa-waterford-oct.pdf
richardrodger-vespa-waterford-oct.pdf
 
Richardrodger designing-microservices-uxdx-dublin-oct
Richardrodger designing-microservices-uxdx-dublin-octRichardrodger designing-microservices-uxdx-dublin-oct
Richardrodger designing-microservices-uxdx-dublin-oct
 
How microservices fail, and what to do about it
How microservices fail, and what to do about itHow microservices fail, and what to do about it
How microservices fail, and what to do about it
 
Rapid Digital Innovation: How Node.js Delivers
Rapid Digital Innovation: How Node.js DeliversRapid Digital Innovation: How Node.js Delivers
Rapid Digital Innovation: How Node.js Delivers
 
Richardrodger nodeconfeu-2014-final
Richardrodger nodeconfeu-2014-finalRichardrodger nodeconfeu-2014-final
Richardrodger nodeconfeu-2014-final
 
Richardrodger nodeday-2014-final
Richardrodger nodeday-2014-finalRichardrodger nodeday-2014-final
Richardrodger nodeday-2014-final
 
Micro-services Battle Scars
Micro-services Battle ScarsMicro-services Battle Scars
Micro-services Battle Scars
 
Richard rodger technical debt - web summit 2013
Richard rodger   technical debt - web summit 2013Richard rodger   technical debt - web summit 2013
Richard rodger technical debt - web summit 2013
 
The Seneca Pattern at EngineYard Distill 2013 Conference
The Seneca Pattern at EngineYard Distill 2013 ConferenceThe Seneca Pattern at EngineYard Distill 2013 Conference
The Seneca Pattern at EngineYard Distill 2013 Conference
 
How to Write Big Apps (Richard Rodger NodeDublin 2012)
How to Write Big Apps (Richard Rodger NodeDublin 2012)How to Write Big Apps (Richard Rodger NodeDublin 2012)
How to Write Big Apps (Richard Rodger NodeDublin 2012)
 
Richard rodger-appgen-2012-lxjs-lisbon
Richard rodger-appgen-2012-lxjs-lisbonRichard rodger-appgen-2012-lxjs-lisbon
Richard rodger-appgen-2012-lxjs-lisbon
 

Dernier

+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...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 
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
 

Dernier (20)

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
 
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...
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
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...
 
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
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
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...
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
+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...
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
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
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 

20120306 dublin js

  • 1. JavaScript End-to-End Touch-screen to Server Richard Rodger @rjrodger
  • 2. What can JavaScript do for you? How does it work? A real life example Lessons learned
  • 5. Hybrid Apps HTML5/JS in a Native Wrapper
  • 7. Database Map Reduce (was Stored Procedure) http://blog.sharpthinking.com.au
  • 8. Web Service APIs JSON & XML, REST & SOAP
  • 9. Real-Time Web Web Sockets Web sockets are so cool ... you never have to hang up
  • 10. How? •User Interface frameworks •Multi-Device html5 •Hybrid Apps phonegap •Server-Side node.js •Database mongodb, couchdb •Web Services node.js modules •Real-Time Web socket.io
  • 11. Basic Idea nginx Node.js • nginx • high performance web server • serves static resources: test files, images • proxies requests through to Node.js app server • Node.js • high performance server-side JavaScript • Executes business logic and database queries
  • 12. Node.js • Runs high-performance server-side JavaScript • Uses the Google Chrome V8 engine • just-in-time compilation to machine code • generation garbage collection (like the Java JVM) • creates virtual “classes” to optimise property lookups • Has a well-designed module system for third party code - very effective and simple to use • Your code runs in a single non-blocking JavaScript thread • That’s OK, most of the time you’re waiting for database or network events
  • 13. Node.js Web Server var http = require('http'); var server = http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello Worldn'); }) server.listen(1337, "127.0.0.1"); console.log('Server running at http://127.0.0.1:1337');
  • 15. Web Mobile Cloud Services Web Apps Services API Mobile & REST & Database Tablet Web JSON Mobile & Horizontal Third Party Tablet Apps Scale Services Desktop Cloud Monitoring Web Hosted
  • 16. Client-side Router #! URLs • Common code-base • even for hybrid apps! Models Data, biz logic • backbone.js • shims for weak browsers Views DOM Layout • browser-targeting: user- agent & capabilities • responsive layout (mostly) Helpers Shared code
  • 17. Client-side: running 1. Load static 2. Init shared index.html code, then 3. Init and assets targeted router, and 4. Wait for code display as events per #! URL
  • 18. Server-side map /api/ URLs • nginx & Node.js Router to functions • Small code volume API function( req, • Third party modules: functions res ) { ... } • connect Shared code • express Helpers (some with client) • seneca (my db layer) Open source • Deploy with: Modules heavy-lifting • sudo killall node
  • 19. Server-side: running 1. Connect to databases 2. Route and listen HTTP 3. Talk to for HTTP requests to database, 4. Send API functions wait for JSON back callback to client
  • 20. Cloud Services Database Hosting Monitors MongoDB Amazon Amazon Load Redis cloudkick Balancer Instance memcached Continuous Scaling
  • 21. Third Party Integration JSON, XML, simple form data, text files, ... ... all easy using JavaScript and Node.js Modules Analytics Twitter E-Commerce In-App Logging Facebook Purchasing Email LinkedIn Stock Feed
  • 22. Native Apps Same code as mobile web versions, ... ... wrapped using PhoneGap to run natively ... plus some native plugins
  • 24. Lesson: code volume 4 3 2 1 0 Client JavaScript Server JavaScript
  • 25. Lesson: multi-platform client-side JavaScript is really hard • a framework is a must • code against ECMA, use shims to support older browsers • backbone.js • Code/Test/Debug inside Safari • business logic must be in • phonegap.github.com/weinre common code for hard to reach places • browser-specific code • use error capture in production • virtual .js files • Finally, use a simple static site as a fallback (also for Googlebot) • use jshint to keep IE happy
  • 26. Lesson: multi-platform HTML/CSS is really hard • "structured" CSS is a must • Clean, semantic HTML is not optional • sass or less • graceful degradation may • Be happy with require radically different CSS • media queries • 100% "Responsive" design is tough • CSS3 transforms • Responsive within browser subsets has higher reward/ • browser-specific code effort • virtual .css files
  • 27. Lesson: the app stores are not web sites • that bug in version 1... • you can't deploy hot fixes • will take two weeks to • make everything fix via an update configurable! • some users will never • All prices, text, host update names, urls, ... • appears after an OS • On launch, app "checks-in" update for new configuration • this will save your life
  • 28. Lesson: Node.js does what it says on the tin • High performance • callback spaghetti is not a problem in practice • High throughput • Low CPU usage • use functional style • Constant memory usage • client-side code is far more difficult • leaks will kill, but then • Don't do CPU intensive stuff • < 100ms startup time • ... there's a warning on • means you may not the tin! notice!
  • 29. Lesson: Outsource your database • Remote MongoDB • Big productivity gain hosting • no production tuning • mongohq.com • no configuration • No downtime • no cluster set up • Backups • Low latency (in Amazon) • Web-based admin (if lazy)
  • 30.
  • 31. My Company HTML5 Apps + Node.js My Book Launch: Hodges Figgis 21st March, 7:30 PM Richard Rodger @rjrodger nearform.com
  • 32. My Company HTML5 Apps + Node.js My Book Launch: Hodges Figgis 21st March, 7:30 PM Richard Rodger @rjrodger nearform.com

Notes de l'éditeur

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n