Building a Web App in 100% JavaScript

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!

For full source code of the project and the slides, written in Reveal.js, jump over to my GitHub: https://github.com/bergenhem/talks/tree/master/building-web-apps-in-js

Transcript

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 n p m i n s t a l l [ p a c k a g e n a m e ]
37. QUICK NODE.JS SERVER v a r h t t p = r e q u i r e ( ' h t t p ' ) ; h t t p . c r e a t e S e r v e r ( f u n c t i o n ( r e q , r e s ) { r e s . w r i t e H e a d ( 2 0 0 , { ' C o n t e n t - T y p e ' : ' t e x t / p l a i n ' } ) ; r e s . e n d ( ' H e l l o W o r l d \ n ' ) ; } ) . l i s t e n ( 1 3 3 7 , ' 1 2 7 . 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 { " n a m e " : " S a m p l e A p p " , " d e s c r i p t i o n " : " S a m p l e A p p D e s c r i p t i o n " , " v e r s i o n " : " 0 . 0 . 1 " , " p r i v a t e " : t r u e , " d e p e n d e n c i e s " : { " e x p r e s s " : " 3 . x " } }
51. RUN THE FOLLOWING: n p m i n s t a l l
52. QUICK EXPRESS.JS SETUP v a r e x p r e s s = r e q u i r e ( ' e x p r e s s ' ) ; v a r a p p = e x p r e s s ( ) ; a p p . g e t ( ' / r e q u e s t ' , f u n c t i o n ( r e q , r e s ) { c o n s o l e . l o g ( ' W e g o t a r e q u e s t ! ' ) ; } ) ; a p p . l i s t e n ( 3 0 0 0 ) ; c o n s o l e . l o g ( ' L i s t e n i n g o n p o r t 3 0 0 0 . . . ' ) ;
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! n p m i n s t a l l m o n g o o s e
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 < u l i d = ' m y M e n u ' > < l i > B o o k s < / l i > < l i > V i d e o G a m e s < / l i > < l i > M o v i e s < / l i > < u l > < l i > T h e B i g L e b o w s k i < / l i > < l i > T h e M a t r i x < / l i > < / u l > < / l i > < / u l > < s c r i p t > < / s c r i p t > $ ( f u n c t i o n ( ) { $ ( ' # m y M e n u ' ) . k e n d o M e n u ( ) ; } ) ;
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 n p m i n s t a l l - g n o d e - i n s p e c t o r
82. EASY TO USE n o d e - i n s p e c t o r &
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