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
   

   View Slide

2. node.js
   Server-side JavaScript
   

   View Slide

3. asynchronous & fast
   front-end & backend JS
   lightweight & customizable
   JIFASNIF
   

   View Slide

4. Get node.js
   http://nodejs.org/
   

   View Slide

5. Rapid Prototyping FTW
   {
   MVC : 'Express',
   HTML : 'Jade',
   CSS : 'Stylus'
   }
   

   View Slide

6. Express
   Start up a node server
   

   View Slide

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
   

   View Slide

8. Jade
   An HTML Preprocessor
   

   View Slide

9. Clean
   Intuitive
   Variables, loops,
   functions
   http://jade-lang.com
   

   View Slide

10. Variables & Loops
    ul
    - var pets = ['cat', 'dog', 'mouse'];
    each pet in pets
    li= pet
    
    cat
    dog
    mouse
    
    

    View Slide

11. 
    April 23,
    2013
    
    mixin StripeDate(date, isEndDate)
    span.date(class=isEndDate ? 'end-date' :
    'bill-date')= date.format('MMMM D, YYYY')
    Functions
    (aka mixins)
    .dates
    mixin StripeDate(planDate)
    

    View Slide

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
    

    View Slide

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...?
    

    View Slide

14. Stylus
    A CSS Preprocessor
    

    View Slide

15. Clean
    Intuitive
    Functions, variables,
    organized chaos
    http://
    learnboost.github.io/
    stylus/
    

    View Slide

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;
    };
    

    View Slide

17. nib
    (http://visionmedia.github.io/nib/)
    linear-gradient
    position
    clearfix
    border-radius
    ellipsis
    

    View Slide

18. Variables
    $activeButtonFace = #3876b2
    button
    background $activeButtonFace
    border-radius 5px
    button {
    background: #3876b2;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    };
    

    View Slide

19. @import
    @import "reset.css"
    @import "config/colors"
    ➥ Appends multiple stylesheets
    

    View Slide

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%
    

    View Slide

21. Back to Express
    Tie in a “Database”
    

    View Slide

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!
    

    View Slide

23. Update index.jade
    edit PROJECT_NAME/views/index.jade
    each input in inputs
    mixin description(input.label, input.name,
    input.placeholder)
    

    View Slide

24. Hack Away
    There’s more to do!
    

    View Slide

25. add new routes
    include more layout/styling
    ask questions
    have fun!
    

    View Slide

26. Raquel Vélez
    @rockbot
    http://rckbt.me
    raquel@storify.com
    https://github.com/rockbot/node-FED
    

    View Slide