Rapid Prototyping with JavaScript for Multiple Platforms 
You Ready?
A M E R I C U H ! I LIVE HERE (Europeans may not get these jokes)
What Is Rapid Prototyping?
  Concept + Very Little Time + Dev & Design 
Rapid Prototyping   == Research & Development (R&D)  == Labs Groups
 
Real business use cases,  but most go unseen hence the word:   Prototype .
Other companies are  doing it too, but I  can't tell you  who .
Rapid prototyping is  innovation  on the cheap.
   An  Example   Would Help 
  <ul><li>Create a  language  translation app. </li></ul>
Lingua
Take a string or phrase and translate it to the language of your  choice .
What Devices ?
MULTIPLE .
MULTIPLE . (Desktop Browser, Mobile Browser, Native Desktop App, and Native Android App)
If we couldn't use  JavaScript ...
 
But...
...we  can  use JavaScript!
Tools
Tools <ul><ul><li>Node.js </li></ul></ul>
Tools <ul><ul><li>Node.js </li></ul></ul><ul><ul><ul><li>Express </li></ul></ul></ul><ul><ul><ul><li>Connect </li></ul></u...
Tools <ul><ul><li>Node.js </li></ul></ul><ul><ul><ul><li>Express </li></ul></ul></ul><ul><ul><ul><li>Connect </li></ul></u...
Tools <ul><ul><li>Node.js </li></ul></ul><ul><ul><ul><li>Express </li></ul></ul></ul><ul><ul><ul><li>Connect </li></ul></u...
Tools <ul><ul><li>Node.js </li></ul></ul><ul><ul><ul><li>Express </li></ul></ul></ul><ul><ul><ul><li>Connect </li></ul></u...
Tools <ul><ul><li>Node.js </li></ul></ul><ul><ul><ul><li>Express </li></ul></ul></ul><ul><ul><ul><li>Connect </li></ul></u...
   What about the  UI ?
Design for a  flexible  layout, NOT a specific device.
How ?
CSS Media Queries !
Demo: Desktop Browser and Mobile Browser
http://evented.io : 3001
Demo: Native Desktop App
Demo: YQL Action
Demo: Native Android App
Demo: Offline Access with CouchDB on Android
Conclusion ?
 
@joemccann github.com/joemccann
Upcoming SlideShare
Loading in...5
×

Rapid Prototyping With JavaScript For Multiple Platforms

4,567

Published on

My presentation at JSConf.EU 2010

Published in: Technology
2 Comments
6 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,567
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
50
Comments
2
Likes
6
Embeds 0
No embeds

No notes for slide

Transcript of "Rapid Prototyping With JavaScript For Multiple Platforms"

  1. 1. Rapid Prototyping with JavaScript for Multiple Platforms 
  2. 2. You Ready?
  3. 3. A M E R I C U H ! I LIVE HERE (Europeans may not get these jokes)
  4. 4. What Is Rapid Prototyping?
  5. 5.   Concept + Very Little Time + Dev & Design 
  6. 6. Rapid Prototyping   == Research & Development (R&D)  == Labs Groups
  7. 8. Real business use cases,  but most go unseen hence the word:   Prototype .
  8. 9. Other companies are  doing it too, but I  can't tell you who .
  9. 10. Rapid prototyping is innovation on the cheap.
  10. 11.    An Example Would Help 
  11. 12.   <ul><li>Create a language translation app. </li></ul>
  12. 13. Lingua
  13. 14. Take a string or phrase and translate it to the language of your choice .
  14. 15. What Devices ?
  15. 16. MULTIPLE .
  16. 17. MULTIPLE . (Desktop Browser, Mobile Browser, Native Desktop App, and Native Android App)
  17. 18. If we couldn't use JavaScript ...
  18. 20. But...
  19. 21. ...we can use JavaScript!
  20. 22. Tools
  21. 23. Tools <ul><ul><li>Node.js </li></ul></ul>
  22. 24. Tools <ul><ul><li>Node.js </li></ul></ul><ul><ul><ul><li>Express </li></ul></ul></ul><ul><ul><ul><li>Connect </li></ul></ul></ul>
  23. 25. Tools <ul><ul><li>Node.js </li></ul></ul><ul><ul><ul><li>Express </li></ul></ul></ul><ul><ul><ul><li>Connect </li></ul></ul></ul><ul><ul><li>Appcelerator Titanium </li></ul></ul>
  24. 26. Tools <ul><ul><li>Node.js </li></ul></ul><ul><ul><ul><li>Express </li></ul></ul></ul><ul><ul><ul><li>Connect </li></ul></ul></ul><ul><ul><li>Appcelerator Titanium </li></ul></ul><ul><ul><li>Phonegap </li></ul></ul>
  25. 27. Tools <ul><ul><li>Node.js </li></ul></ul><ul><ul><ul><li>Express </li></ul></ul></ul><ul><ul><ul><li>Connect </li></ul></ul></ul><ul><ul><li>Appcelerator Titanium </li></ul></ul><ul><ul><li>Phonegap </li></ul></ul><ul><ul><li>CouchDB </li></ul></ul>
  26. 28. Tools <ul><ul><li>Node.js </li></ul></ul><ul><ul><ul><li>Express </li></ul></ul></ul><ul><ul><ul><li>Connect </li></ul></ul></ul><ul><ul><li>Appcelerator Titanium </li></ul></ul><ul><ul><li>Phonegap </li></ul></ul><ul><ul><li>CouchDB </li></ul></ul><ul><ul><li>YQL </li></ul></ul>
  27. 29.    What about the UI ?
  28. 30. Design for a flexible  layout, NOT a specific device.
  29. 31. How ?
  30. 32. CSS Media Queries !
  31. 33. Demo: Desktop Browser and Mobile Browser
  32. 34. http://evented.io : 3001
  33. 35. Demo: Native Desktop App
  34. 36. Demo: YQL Action
  35. 37. Demo: Native Android App
  36. 38. Demo: Offline Access with CouchDB on Android
  37. 39. Conclusion ?
  38. 41. @joemccann github.com/joemccann
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×