Building A Web App In 100% JavaScript with Carl Bergenhem

1,760 views
1,557 views

Published on

Save 10% off ANY FITC event with discount code 'slideshare'
See our upcoming events at www.fitc.ca

OVERVIEW
We all love and adore JavaScript when we use it on the front-end of our web apps – why not use it in the back-end as well? That’s like having your cake and eating it too! Prepare to have your mind blown, because in this presentation we will create an entire web application using just (or well, mostly) JavaScript. Learn how to create a fast and flexible back-end utilizing the popular Node.js library and see how it ties in with your UI. From accessing the database to handling interactions with the front-end – we’ll do it all!

Published in: Internet, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,760
On SlideShare
0
From Embeds
0
Number of Embeds
87
Actions
Shares
0
Downloads
31
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Building A Web App In 100% JavaScript with Carl Bergenhem

  1. 1. BUILDING AWEB APP IN100%JAVASCRIPTUSING NODE.JS, EXPRESS.JS, ANDKENDO UI-Carl Bergenhem @carlbergenhem
  2. 2. WHO AM I?
  3. 3. CARL BERGENHEM
  4. 4. MANAGER OF SOLUTIONSCONSULTANT TEAM @TELERIK
  5. 5. ASPINSIDER
  6. 6. WEB DEVELOPER
  7. 7. GAMING AFFICIONADO
  8. 8. LOVER OF JS
  9. 9. I HAVE A SECRET...
  10. 10. WE CAN NOW BUILD OURENTIRE APPINJAVASCRIPT
  11. 11. HOW IS THIS EVENPOSSIBLE!?JAVASCRIPT IS JUST CLIENT-SIDERIGHT?
  12. 12. WRONG
  13. 13. NODE.JS CHANGED THEGAMEALLOWS JAVASCRIPT ON THE SERVER
  14. 14. BEFORE WE START
  15. 15. LETS TAKE A LOOK AT THETECHNOLOGIES WERECOVERING(THERES A LOT OF THEM)
  16. 16. SERVER:NODE.JS
  17. 17. WEB FRAMEWORK:EXPRESS.JS
  18. 18. DATABASE:MONGODB AND MONGOOSE.JS
  19. 19. UI FRAMEWORK:KENDO UI
  20. 20. NODE.JS
  21. 21. CREATED BY RYAN DAHL
  22. 22. RUNS ON GOOGLES V8 JAVASCRIPTENGINE
  23. 23. EVENT DRIVEN
  24. 24. ASYNCHRONOUS
  25. 25. PERFECT FOR WEB SERVERS
  26. 26. WHY IS IT PERFECT FORWEB SERVERS?
  27. 27. ASYNCHRONOUSANDEVENT DRIVEN
  28. 28. NON-BLOCKING I/O
  29. 29. SUPER LIGHT-WEIGHT
  30. 30. INSTALL PROCESS
  31. 31. NODE.JS.ORG
  32. 32. INSTALLERS FOR OS X, WINDOWS,LINUX AND SUNOS
  33. 33. AUTOMATICALLY INSTALLS NODEJSAND NPM
  34. 34. NPM
  35. 35. PACKAGE MANAGER FOR NODE.JS
  36. 36. SUPER EASY TO USEnpm install [package name]
  37. 37. QUICK NODE.JS SERVERvar http = require(http);http.createServer(function (req, res) {res.writeHead(200, {Content-Type: text/plain});res.end(Hello Worldn);}).listen(1337, 127.0.0.1);
  38. 38. LETS SET UP OUR SERVER
  39. 39. WELL THAT WAS FUNWHATS NEXT?
  40. 40. EXPRESSJS
  41. 41. WEB APP FRAMEWORK FOR NODE.JS
  42. 42. EXTENDS THE NODE.JS FRAMEWORK
  43. 43. SIMPLE WAY OF HANDLING ROUTES
  44. 44. QUICK AND EASY SETUP &CONFIGURATION
  45. 45. BUILT-IN VIEW TEMPLATES (JADE)
  46. 46. YOU DECIDE THE STRUCTURE
  47. 47. INSTALL PROCESS
  48. 48. NAVIGATE TO YOUR APP FOLDER
  49. 49. CREATE A PACKAGE.JSON FILE
  50. 50. PASTE THE FOLLOWING{"name": "SampleApp","description": "Sample App Description","version": "0.0.1","private": true,"dependencies": {"express": "3.x"}}
  51. 51. RUN THE FOLLOWING:npm install
  52. 52. QUICK EXPRESS.JS SETUPvar express = require(express);var app = express();app.get(/request, function(req, res) {console.log(We got a request!);});app.listen(3000);console.log(Listening on port 3000...);
  53. 53. LETS EXPRESS-IFY OUR APP!
  54. 54. THAT WAS QUICK!
  55. 55. MONGOOSE.JS
  56. 56. SIMPLE OBJECT MODELING
  57. 57. WORK WITH BSON
  58. 58. CREATE STRICT MODELS
  59. 59. EASILY HOOK IN TO MONGODB
  60. 60. HIGHER LEVEL THAN RAW DRIVERS
  61. 61. INSTALL PROCESS
  62. 62. VERY EASY INSTALL!npm install mongoose
  63. 63. ADDING OUR DATABASE!
  64. 64. KENDO UI
  65. 65. CREATED BY @TELERIK
  66. 66. JAVASCRIPT FRAMEWORK
  67. 67. BASED ON JQUERY
  68. 68. WEB APP UI FRAMEWORK
  69. 69. MOBILE HYBRID APP UI FRAMEWORK
  70. 70. HTML5 AND CSS3
  71. 71. WIDE CROSS-BROWSER SUPPORT
  72. 72. IE7+, FF, CHROME, SAFARI, OPERA
  73. 73. QUICK KENDO SAMPLE<ul id=myMenu ><li>Books</li><li>Video Games</li><li>Movies</li><ul><li>The Big Lebowski</li><li>The Matrix</li></ul></li></ul><script></script>$(function () {$(#myMenu).kendoMenu();});
  74. 74. TIME TO SLAP SOME UI ONTHIS THING
  75. 75. UI LEVEL: KENDO UI
  76. 76. WOAH THERE, HOLD YOURHORSES
  77. 77. DEBUGGING!?
  78. 78. NODE INSPECTOR
  79. 79. DEBUG ANY NODE.JS APP
  80. 80. WEBKIT DEVTOOLS
  81. 81. EASY TO INSTALLnpm install -g node-inspector
  82. 82. EASY TO USEnode-inspector &
  83. 83. DEBUGGING TIME!
  84. 84. THATS IT!
  85. 85. WE NOW HAVE AN APP
  86. 86. WRITTEN IN 100%JAVASCRIPT
  87. 87. THANKS!Q&A-Carl Bergenhem @carlbergenhem

×