Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,781 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

×