MODERN WEB DEVELOPMENT:   JAVASCRIPT GALORE       Jamie DAVIDSON and Roberto Fuentes   Startup Institute boston // follow ...
Who am I?                              Web Developer/Full Stack Engineer                              2+ years Rails exper...
+   What we’ll cover                                                    + Express                       Startup Institute ...
Disclaimer                I don’t really know node                 But let’s learn togetherStartup Institute boston // fol...
Why Node?              ✓Same language you use on the client      ✓You’re building a data-intensive, real time application ...
+   What should i know about node                                 1      If you’ve only be using jquery for your javascrip...
Node package manager (Npm)                     essentially, it’s bundler                   npm install [library] --save   ...
+      Web frameworksThe defaultExpressThe cool kidMeteorMany othersSocketStream- “Dedicated to building single page realt...
Javascript mvc on the clientAngularjs                              developed by google                              Models...
+   Why Angular?                     ✓Well, google developed it       ✓you’re building a website with rich functionality a...
+   What should i know about Angular                                1        one-page web apps = difficult seo management ...
HTML and cssStartup Institute boston // follow me : @ jamiehdavidson
+   Sass over css                    Startup Institute boston // follow me : @ jamiehdavidson
+   What should i know about Sass                                 1        Browsers don’t know what a sass (or scss) file ...
+   plain old html also sucks     HTML                                HaML                                    Jade        ...
+      What should i know about haml/jade                                    1        Browsers don’t know what a haml or j...
Let’s Build Something!!            But first, visit:http://cryptic-headland-3164.herokuapp.com/          Startup Institute...
Disclaimer  There are no tests But you should followtest-driven development    Startup Institute boston // follow me : @ j...
+ Step 1: The Core                                   A lot of this file is setup for you by running:              app.js  ...
+   Step 1: The layout            views/layout.jade                                                                       ...
+       Step 1: Routes AND              VIEWS     apps/home/routes.coffee                                                 ...
+STEP 1: Summary          Download Node, NPM          Install dependencies with ‘npm install’          Install Foundation ...
+   Step 2: CLient-side javascript            Same rules apply            1. keep it organized            (i.e. not a whol...
+   Step 2: asset Pipeline                 app.js                                                                    Time ...
+STEP 2: Summary          Download connect-assets          SEtup your directory structure for some rails-like magic       ...
+   Step 3: Setting up a database               app.js                                                                   M...
+    Step 3: Defining a model’s schema            models/users.js                                                    apps/...
+STEP 3: Summary          Download mongo and mongoose          define a simple user model and its schema          Define a...
+   Step 4: Gimme some angular       assets/js/skill-show.coffee                                                          ...
+   Step 4: angular in the view           apps/home/views/index.jade                                                      ...
+STEP 4: Summary          Create your angular app. reference it with ng-app          use $resource for automatic rest comm...
+   Step 5: Adding skills and searching                                                                                Add...
+STEP 5: Summary          We can automatically search a collection client-side with one line of          angular          ...
+   Step 6: Creating a directive                            Notice the embedded Angular bindings                Directives...
+   Step 6: routing a one-page app     Old apps/home/views/index.jade                                         views/partia...
+   STEP 6: The final conclusion             Directives act as ‘widgets’, allowing you to define a unique/complex         ...
THANK   S.                          FOR YOUR ATTENTIONStartup Institute boston // follow me : @jamiehdavidson
Upcoming SlideShare
Loading in …5
×

Modern Web Development: Node.js and Angular

4,661 views

Published on

An Intelligently presentation I gave on developing a modern web app with Node, Angular, Sass, and Jade. Github repo for the app mentioned in the presentation is at https://github.com/jhdavids8/intelligently-node-course

My apologies for the inconsistent fonts/odd type. I developed the presentation in Keynote and exported to PPT, which then was converted by Slideshare. A few extra layers of complexity caused the final Slideshare to look significantly less attractive than the original presentation.

Published in: Technology

Modern Web Development: Node.js and Angular

  1. 1. MODERN WEB DEVELOPMENT: JAVASCRIPT GALORE Jamie DAVIDSON and Roberto Fuentes Startup Institute boston // follow me : @jamiehdavidson
  2. 2. Who am I? Web Developer/Full Stack Engineer 2+ years Rails experience Angularjs, coffeescript, sass Startup Institute boston // follow me : @jamiehdavidson
  3. 3. + What we’ll cover + Express Startup Institute boston // follow me : @jamiehdavidson
  4. 4. Disclaimer I don’t really know node But let’s learn togetherStartup Institute boston // follow me : @jamiehdavidson
  5. 5. Why Node? ✓Same language you use on the client ✓You’re building a data-intensive, real time application ✓you’re building your company’s mobile Web app ✓You want to use the newest stuff Startup Institute boston // follow me : @jamiehdavidson
  6. 6. + What should i know about node 1 If you’ve only be using jquery for your javascript, you might want to stay away 2 It’s still a teenager, so it requires patience 3 Documentation, conventions, and libraries are still being established Startup Institute boston // follow me : @jamiehdavidson
  7. 7. Node package manager (Npm) essentially, it’s bundler npm install [library] --save Startup Institute boston // follow me : @jamiehdavidson
  8. 8. + Web frameworksThe defaultExpressThe cool kidMeteorMany othersSocketStream- “Dedicated to building single page realtime apps”Derby You can only build a web serverSails with node. you need one of these to- Rails inspired build a web appTower- Also Rails inspiredCompoundflatiron Startup Institute boston // follow me : @jamiehdavidson
  9. 9. Javascript mvc on the clientAngularjs developed by google Models, controllers, templates, Directives Startup Institute boston // follow me : @jamiehdavidson
  10. 10. + Why Angular? ✓Well, google developed it ✓you’re building a website with rich functionality and interactivity ✓you hate full page loads ✓you want to write tests for your client-side javascript too ✓small learning curve Startup Institute boston // follow me : @ jamiehdavidson
  11. 11. + What should i know about Angular 1 one-page web apps = difficult seo management 2 there’s a fight to be the de facto mvc Js client winner. angular may win, it may not 3 documentation can be inconsistent (although i hear it’s better than ember’s) Startup Institute boston // follow me : @ jamiehdavidson
  12. 12. HTML and cssStartup Institute boston // follow me : @ jamiehdavidson
  13. 13. + Sass over css Startup Institute boston // follow me : @ jamiehdavidson
  14. 14. + What should i know about Sass 1 Browsers don’t know what a sass (or scss) file is. they still want css 2 with node, use compass to automatically compile sass to css. rails uses sass by default 3 it’s easy to understand. there ’s no reason to not use it 4 When used correctly, it can make cross-browser styling much, much, much easier Startup Institute boston // follow me : @ jamiehdavidson
  15. 15. + plain old html also sucks HTML HaML Jade Startup Institute boston // follow me : @ jamiehdavidson
  16. 16. + What should i know about haml/jade 1 Browsers don’t know what a haml or jade file is. they want html closing html tags 2 jade is default in node and will automatically handle conversion to html 3 it’s easy to understand. there ’s no reason to not use it Startup Institute boston // follow me : @ jamiehdavidson
  17. 17. Let’s Build Something!! But first, visit:http://cryptic-headland-3164.herokuapp.com/ Startup Institute boston // follow me : @ jamiehdavidson
  18. 18. Disclaimer There are no tests But you should followtest-driven development Startup Institute boston // follow me : @ jamiehdavidson
  19. 19. + Step 1: The Core A lot of this file is setup for you by running: app.js express [project name] Let’s use some Coffeescript npm install coffee-script --save Define your routes Remember, unlike Rails, Node and Express aren’t magic Startup Institute boston // follow me : @jamiehdavidson
  20. 20. + Step 1: The layout views/layout.jade Better Fonts Typekit Google Fonts Webfont Loader CSS Always include Foundation Include a route-specific stylesheet Template Inheritance over Layouts apps/views/home/index.jade Startup Institute boston // follow me : @jamiehdavidson
  21. 21. + Step 1: Routes AND VIEWS apps/home/routes.coffee Set Page-Specific Variables Set page title and page-specific stylesheet name apps/home/views/index.jade Route-Specific HTML Nothing fancy yet Startup Institute boston // follow me : @jamiehdavidson
  22. 22. +STEP 1: Summary Download Node, NPM Install dependencies with ‘npm install’ Install Foundation and use compass to compile scss -> css Use Fonts with typekit and Google Fonts. Load them with Webfont loader create a basic layout with foundation handle a route to the homepage. define a simple view to render Startup Institute boston // follow me : @ jamiehdavidson
  23. 23. + Step 2: CLient-side javascript Same rules apply 1. keep it organized (i.e. not a whole bunch of jquery selectors) 2. keep it to as few (minified) files if possible Startup Institute boston // follow me : @ jamiehdavidson
  24. 24. + Step 2: asset Pipeline app.js Time for some Rails-like magic npm install connect-assets --save Startup Institute boston // follow me : @jamiehdavidson
  25. 25. +STEP 2: Summary Download connect-assets SEtup your directory structure for some rails-like magic one javascript file to rule them all! Startup Institute boston // follow me : @ jamiehdavidson
  26. 26. + Step 3: Setting up a database app.js Mongo and Mongoose brew install mongodb npm install mongoose --save Your Mongo Server mongod Mongo Models Require them! Again, no magic Startup Institute boston // follow me : @jamiehdavidson
  27. 27. + Step 3: Defining a model’s schema models/users.js apps/users/routes.coffee ✓Define an api for our users ✓No redirects or renders. All json ✓require the route in app.js Startup Institute boston // follow me : @ jamiehdavidson
  28. 28. +STEP 3: Summary Download mongo and mongoose define a simple user model and its schema Define a rest api for our users Get ready for angular js Startup Institute boston // follow me : @ jamiehdavidson
  29. 29. + Step 4: Gimme some angular assets/js/skill-show.coffee Dependency injection HTML5 Mode assets/js/services.coffee Automatic REST Download angular-resource Beware of minification assets/js/controllers.coffee Initialize and add users Startup Institute boston // follow me : @jamiehdavidson
  30. 30. + Step 4: angular in the view apps/home/views/index.jade New scope Create a new user Bind to a dynamic model Display all users Default text when we have no skills Startup Institute boston // follow me : @jamiehdavidson
  31. 31. +STEP 4: Summary Create your angular app. reference it with ng-app use $resource for automatic rest communication with a model minification gotcha controllers create a new scope where we create variables and define events/methods remember ng-repeat, ng-model, ng-submit, ng-show....you’ll use them in every app Startup Institute boston // follow me : @ jamiehdavidson
  32. 32. + Step 5: Adding skills and searching Add a new skill Bind to new ‘query’ model Filter users based on ‘query’ value A new controller/scope for every user ng-init acts as a scope ‘constructor’ Show only when editing Special Angular form select Toggle the button when we go into ‘edit mode’ Startup Institute boston // follow me : @jamiehdavidson
  33. 33. +STEP 5: Summary We can automatically search a collection client-side with one line of angular ng-init is used to initialize a variable in the current scope a controller inside a controller creates a child scope. the 2 scopes can communicate with each other through events use $watch to monitor for changes Startup Institute boston // follow me : @ jamiehdavidson
  34. 34. + Step 6: Creating a directive Notice the embedded Angular bindings Directives are probably the most complicated aspect of Angular Startup Institute boston // follow me : @jamiehdavidson
  35. 35. + Step 6: routing a one-page app Old apps/home/views/index.jade views/partials/users/index.jade move to change to Startup Institute boston // follow me : @jamiehdavidson
  36. 36. + STEP 6: The final conclusion Directives act as ‘widgets’, allowing you to define a unique/complex dom structure for a single dom element the directive documentation kinda sucks ng-class = conditional css classes the $routeprovider acts as a route handler: given a specific url, fetch and render a specific template ng-view defines where the template is rendered templates can contain angular bindings/expressions just like a view watch out for seo with one-page apps/a lot of dom manipulation Startup Institute boston // follow me : @ jamiehdavidson
  37. 37. THANK S. FOR YOUR ATTENTIONStartup Institute boston // follow me : @jamiehdavidson

×