Front-End Development in node.js

Given at jQuery Conference in Portland, Oregon.

You know HTML and CSS. You know (or at least may have heard of) HAML and SASS. Introducing: Jade and Stylus!

Welcome to front-end development in node.js! As more applications are built in node, front-end devs need to make them beautiful, generally using the node front-end toolkit. But what are the tools? How do you get started? What if you've never used node before?

Join me as we use Express to spin up a simple node server and serve up a super basic index page. Then we'll use Jade and Stylus to layout and style it. Finally, we'll all chuckle about how easy it was and begin scheming about what we'll do next!

Sample code can be found here: https://github.com/rockbot/node-FED

Transcript

1. Front-End Development Raquel Vélez @rockbot in
2. node.js Server-side JavaScript
3. asynchronous & fast front-end & backend JS lightweight & customizable JIFASNIF
4. Get node.js http://nodejs.org/
5. Rapid Prototyping FTW { MVC : 'Express', HTML : 'Jade', CSS : 'Stylus' }
6. Express Start up a node server
7. Install & Run the Server npm install express (-g) express PROJECT_NAME --css stylus cd PROJECT_NAME && npm install node app.js http://localhost:3000
8. Jade An HTML Preprocessor
9. Clean Intuitive Variables, loops, functions http://jade-lang.com
10. Variables & Loops ul - var pets = ['cat', 'dog', 'mouse']; each pet in pets li= pet <ul> <li>cat</li> <li>dog</li> <li>mouse</li> </ul>
11. <div class=“dates”> <span class=“date bill-date”>April 23, 2013</span> </div> mixin StripeDate(date, isEndDate) span.date(class=isEndDate ? 'end-date' : 'bill-date')= date.format('MMMM D, YYYY') Functions (aka mixins) .dates mixin StripeDate(planDate)
12. Extends, Block, Append extends ../layouts/layout block content append scripts ➥ Sets up a layout framework ➥ Replaces content in the layout ➥ Adds content to the layout
13. Modify index.jade edit PROJECT_NAME/views/index.jade mixin description(label, name, placeholder) label= label input(name=name, placeholder=placeholder) form.awesome-form(action='#', method='POST') mixin description('Full Name: ', 'name', 'Roy G. Biv') mixin description('Email: ', 'email', 'roy@biv.com') button.btn Enter...?
14. Stylus A CSS Preprocessor
15. Clean Intuitive Functions, variables, organized chaos http:// learnboost.github.io/ stylus/
16. Mixins border-radius(n) -webkit-border-radius n -moz-border-radius n border-radius n form input[type=button] border-radius 5px form input[type=button] { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; };
17. nib (http://visionmedia.github.io/nib/) linear-gradient position clearfix border-radius ellipsis
18. Variables $activeButtonFace = #3876b2 button background $activeButtonFace border-radius 5px button { background: #3876b2; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; };
19. @import @import "reset.css" @import "config/colors" ➥ Appends multiple stylesheets
20. Modify style.styl 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%
21. Back to Express Tie in a “Database”
22. Modify index.js 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 modifying the backend, be sure to restart the server!
23. Update index.jade edit PROJECT_NAME/views/index.jade each input in inputs mixin description(input.label, input.name, input.placeholder)
24. Hack Away There’s more to do!
25. add new routes include more layout/styling ask questions have fun!
26. Raquel Vélez @rockbot http://rckbt.me raquel@storify.com https://github.com/rockbot/node-FED