node-FED

A primer to Front-End Development in node.js

Transcript

1. Charlotte Front-End Developers Meetup
   node-FED
   A 10-Step Guide
   Raquel Vélez, Skookum Digital Works @rockbot
   11/28/12
   

   View Slide

2. node.js: An Overview
   ✤ FED & BED - in the same language
   ✤ Fast! (In the browser & for development)
   ✤ Amazing for certain applications (but not all!)
   ✤ JIFASNIF
   

   View Slide

3. node-FED :
   {
   mvc : 'express',
   html : 'jade',
   css : 'stylus'
   }
   * totally customizable *
   

   View Slide

4. MVC : Express.js
   DB
   Controller
   Model
   View
   Data
   Structure Routing
   User I/O
   

   View Slide

5. HTML : Jade
   ✤ Clean
   ✤ Intuitive
   ✤ Functions, loops, variables
   ✤ http://jade-lang.com
   

   View Slide

6. Perks of Jade - Functions, Loops
   mixin options(label, name, val, options)
   div
   label(for=name)= label
   select(id=name, name=name)
   option(value='') Please Choose
   each opt in options
   option(value=opt,selected=(opt===val))= opt
   div
   +options('Month', 'month', '',['Jan','Feb','Mar',
   'Apr','May','Jun','Jul','Aug','Sep','Oct','Nov',
   'Dec'])
   +options('Year', 'year', '2012',
   ['2008','2009','2010','2011','2012'])
   

   View Slide

7. Perks of Jade - extends, block,
   append
   extends ../layouts/layout
   --> Sets up a layout framework
   block content
   --> Replaces content in the layout
   append scripts
   --> Adds content to the layout
   

   View Slide

8. CSS : (Stylus|
   Sass|less|etc)
   ✤ Clean
   ✤ Intuitive
   ✤ Functions, variables, organized
   chaos
   ✤ http://learnboost.github.com/
   stylus/
   

   View Slide

9. Step 0: Install node & npm
   ✤ https://github.com/joyent/node/wiki/Installation
   ✤ npm: node package manager (comes with node now)
   

   View Slide

10. Step 1: Install Expressjs
    ✤ npm install express (-g)
    ✤ express PROJECT_NAME --css stylus
    

    View Slide

11. Step 2: Run the Server
    ✤ cd PROJECT_NAME && npm install
    ✤ node app.js
    ✤ visit http://localhost:3000
    

    View Slide

12. Step 3: Modify Layout
    ✤ edit PROJECT_NAME/views/layout.jade
    

    View Slide

13. Step 4: Modify Index
    ✤ edit PROJECT_NAME/views/index.jade
    

    View Slide

14. Step 5: Create a Mixin
    ✤ edit PROJECT_NAME/views/index.jade
    ✤ mixin description(label, name, placeholder)
    label= label
    input(name=name, placeholder=placeholder)
    

    View Slide

15. Step 6: Create a Form
    ✤ edit PROJECT_NAME/views/index.jade
    ✤ form.awesome-form(action='#', method='POST')
    mixin description('Full Name: ', 'name', 'Roy
    G. Biv')
    mixin description('Email: ', 'email',
    'roy@biv.com'
    button.btn Enter...?
    

    View Slide

16. Step 7: Start Styling!
    ✤ edit PROJECT_NAME/public/stylesheets/style.styl
    ✤ $btnBackground = #98F78E
    .awesome-form
    margin 0 auto
    width 50%
    .input-desc
    label
    width 25%
    display inline-block
    text-align right
    padding-right 5%
    input
    width 50%
    padding 1% 0.25em
    .submit-area
    text-align center
    .btn
    background-color $btnBackground
    margin-top 2em
    padding 1em 2%
    

    View Slide

17. Step 8: Change Template Values
    ✤ edit PROJECT_NAME/routes/index.js
    ✤ res.render('index', {
    title: 'Sample Project',
    inputs: [
    { name: 'name', label: 'Full Name: ',
    placeholder: 'Roy G. Biv' },
    { name: 'email', label: 'Email: ', placeholder:
    'roy@biv.com' }
    ]
    });
    Note: when changing the backend,
    you need to restart your server to see changes!
    

    View Slide

18. Step 9: Update Your Views
    ✤ edit PROJECT_NAME/views/index.jade
    ✤ each input in inputs
    mixin description(input.label, input.name,
    input.placeholder)
    

    View Slide

19. Step 10: Start Hacking!
    ✤ Add new routes
    ✤ Throw in some more layout/styling
    ✤ Ask questions (IRC is a great place to get help)
    ✤ Learn more as you go
    ✤ Become a totally badass node dev ;-)
    

    View Slide

20. Contact Me
    ✤ raquel@skookum.com
    ✤ Twitter: @rockbot
    ✤ GitHub: rockbot
    

    View Slide