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
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
3. node-FED : { mvc : 'express', html : 'jade', css : 'stylus' } * totally customizable *
4. MVC : Express.js DB Controller Model View Data Structure Routing User I/O
5. HTML : Jade ✤ Clean ✤ Intuitive ✤ Functions, loops, variables ✤ http://jade-lang.com
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'])
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
8. CSS : (Stylus| Sass|less|etc) ✤ Clean ✤ Intuitive ✤ Functions, variables, organized chaos ✤ http://learnboost.github.com/ stylus/
9. Step 0: Install node & npm ✤ https://github.com/joyent/node/wiki/Installation ✤ npm: node package manager (comes with node now)
10. Step 1: Install Expressjs ✤ npm install express (-g) ✤ express PROJECT_NAME --css stylus
11. Step 2: Run the Server ✤ cd PROJECT_NAME && npm install ✤ node app.js ✤ visit http://localhost:3000
12. Step 3: Modify Layout ✤ edit PROJECT_NAME/views/layout.jade
13. Step 4: Modify Index ✤ edit PROJECT_NAME/views/index.jade
14. Step 5: Create a Mixin ✤ edit PROJECT_NAME/views/index.jade ✤ mixin description(label, name, placeholder) label= label input(name=name, placeholder=placeholder)
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...?
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%
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!
18. Step 9: Update Your Views ✤ edit PROJECT_NAME/views/index.jade ✤ each input in inputs mixin description(input.label, input.name, input.placeholder)
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 ;-)
20. Contact Me ✤ raquel@skookum.com ✤ Twitter: @rockbot ✤ GitHub: rockbot