Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Front-End Development in node.js

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

Raquel Vélez

June 14, 2013
Tweet

More Decks by Raquel Vélez

Other Decks in Technology

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',
    '[email protected]')
    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: '[email protected]' }
    ]
    });
    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
    [email protected]
    https://github.com/rockbot/node-FED

    View Slide