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!

1. BUILDING A
WEB APP IN
100%
JAVASCRIPT
USING NODE.JS, EXPRESS.JS, AND
KENDO UI
-Carl Bergenhem @carlbergenhem

2. WHO AM I?

3. CARL BERGENHEM

4. MANAGER OF SOLUTIONS
CONSULTANT TEAM @TELERIK

5. ASPINSIDER

6. WEB DEVELOPER

7. GAMING AFFICIONADO

8. LOVER OF JS

9. I HAVE A SECRET...

10. WE CAN NOW BUILD OUR
ENTIRE APP
IN
JAVASCRIPT

11. HOW IS THIS EVEN
POSSIBLE!?
JAVASCRIPT IS JUST CLIENT-SIDE
RIGHT?

12. WRONG

13. NODE.JS CHANGED THE
GAME
ALLOWS JAVASCRIPT ON THE SERVER

14. BEFORE WE START

15. LET'S TAKE A LOOK AT THE
TECHNOLOGIES WE'RE
COVERING
(THERE'S A LOT OF THEM)

16. SERVER:
NODE.JS

17. WEB FRAMEWORK:
EXPRESS.JS

18. DATABASE:
MONGODB AND MONGOOSE.JS

19. UI FRAMEWORK:
KENDO UI

20. NODE.JS

21. CREATED BY RYAN DAHL

22. RUNS ON GOOGLE'S V8 JAVASCRIPT
ENGINE

23. EVENT DRIVEN

24. ASYNCHRONOUS

25. PERFECT FOR WEB SERVERS

26. WHY IS IT PERFECT FOR
WEB SERVERS?

27. ASYNCHRONOUS
AND
EVENT DRIVEN

28. NON-BLOCKING I/O

29. SUPER LIGHT-WEIGHT

30. INSTALL PROCESS

31. NODE.JS.ORG

32. INSTALLERS FOR OS X, WINDOWS,
LINUX AND SUNOS

33. AUTOMATICALLY INSTALLS NODEJS
AND NPM

34. NPM

35. PACKAGE MANAGER FOR NODE.JS

36. SUPER EASY TO USE
npm install [package name]

37. QUICK NODE.JS SERVER
var 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. LET'S SET UP OUR SERVER

39. WELL THAT WAS FUN
WHAT'S NEXT?

40. EXPRESSJS

41. WEB APP FRAMEWORK FOR NODE.JS

42. EXTENDS THE NODE.JS FRAMEWORK

43. SIMPLE WAY OF HANDLING ROUTES

44. QUICK AND EASY SETUP &
CONFIGURATION

45. BUILT-IN VIEW TEMPLATES (JADE)

46. YOU DECIDE THE STRUCTURE

47. INSTALL PROCESS

48. NAVIGATE TO YOUR APP FOLDER

49. CREATE A PACKAGE.JSON FILE

50. PASTE THE FOLLOWING
{
"name": "SampleApp",
"description": "Sample App Description",
"version": "0.0.1",
"private": true,
"dependencies": {
"express": "3.x"
}
}

51. RUN THE FOLLOWING:
npm install

52. QUICK EXPRESS.JS SETUP
var 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. LET'S EXPRESS-IFY OUR APP!

54. THAT WAS QUICK!

55. MONGOOSE.JS

56. SIMPLE OBJECT MODELING

57. WORK WITH BSON

58. CREATE STRICT MODELS

59. EASILY HOOK IN TO MONGODB

60. HIGHER LEVEL THAN 'RAW' DRIVERS

61. INSTALL PROCESS

62. VERY EASY INSTALL!
npm install mongoose

63. ADDING OUR DATABASE!

64. KENDO UI

65. CREATED BY @TELERIK

66. JAVASCRIPT FRAMEWORK

67. BASED ON JQUERY

68. WEB APP UI FRAMEWORK

69. MOBILE HYBRID APP UI FRAMEWORK

70. HTML5 AND CSS3

71. WIDE CROSS-BROWSER SUPPORT

72. IE7+, FF, CHROME, SAFARI, OPERA

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. TIME TO SLAP SOME UI ON
THIS THING

75. UI LEVEL: KENDO UI

76. WOAH THERE, HOLD YOUR
HORSES

77. DEBUGGING!?

78. NODE INSPECTOR

79. DEBUG ANY NODE.JS APP

80. WEBKIT DEVTOOLS

81. EASY TO INSTALL
npm install -g node-inspector

82. EASY TO USE
node-inspector &

83. DEBUGGING TIME!

84. THAT'S IT!

85. WE NOW HAVE AN APP

86. WRITTEN IN 100%
JAVASCRIPT

87. THANKS!
Q&A
-Carl Bergenhem @carlbergenhem