20120306 dublin js

897 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
897
On SlideShare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 20120306 dublin js

    1. 1. JavaScript End-to-End Touch-screen to Server Richard Rodger @rjrodger
    2. 2. What canJavaScript do for you? How does it work? A real life example Lessons learned
    3. 3. User InterfaceComplex, Stateful, Interactive
    4. 4. Multi-DeviceWeb, Tablet, Mobile
    5. 5. Hybrid AppsHTML5/JS in a Native Wrapper
    6. 6. Server-SideEvent-driven & Non-blocking
    7. 7. DatabaseMap Reduce (was Stored Procedure) http://blog.sharpthinking.com.au
    8. 8. Web Service APIsJSON & XML, REST & SOAP
    9. 9. Real-Time Web Web SocketsWeb sockets are so cool ... you never have to hang up
    10. 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. 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. 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. 13. Node.js Web Servervar 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);
    14. 14. businesspost.ie
    15. 15. Web Mobile Cloud ServicesWeb Apps Services API Mobile & REST & DatabaseTablet Web JSON Mobile & Horizontal Third PartyTablet Apps Scale Services Desktop Cloud Monitoring Web Hosted
    16. 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. 17. Client-side: running1. Loadstatic 2. Init sharedindex.html code, then 3. Initand assets targeted router, and 4. Wait for code display as events per #! URL
    18. 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. 19. Server-side: running1. Connectto databases 2. Routeand listen HTTP 3. Talk tofor HTTP requests to database, 4. Send API functions wait for JSON back callback to client
    20. 20. Cloud ServicesDatabase Hosting MonitorsMongoDB Amazon Amazon Load Redis cloudkick Balancer Instancememcached Continuous Scaling
    21. 21. Third Party IntegrationJSON, 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. 22. Native AppsSame code as mobile web versions, ... ... wrapped using PhoneGap to run natively ... plus some native plugins
    23. 23. Lesson:
    24. 24. Lesson: code volume43210 Client JavaScript Server JavaScript
    25. 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. 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. 27. Lesson:the app stores are not web sites • that bug in version 1... • you cant 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. 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 • Dont do CPU intensive stuff • < 100ms startup time • ... theres a warning on • means you may not the tin! notice!
    29. 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. 30. My CompanyHTML5 Apps + Node.jsMy BookLaunch: Hodges Figgis21st March, 7:30 PMRichard Rodger@rjrodgernearform.com
    31. 31. My CompanyHTML5 Apps + Node.jsMy BookLaunch: Hodges Figgis21st March, 7:30 PMRichard Rodger@rjrodgernearform.com

    ×