Front-End Development in node.js

Slide 1

Slide 1 text

Front-End Development Raquel Vélez @rockbot in

Slide 2

Slide 2 text

node.js Server-side JavaScript

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Express Start up a node server

Slide 7

Slide 7 text

Install & Run the Server npm install express (-g) express PROJECT_NAME --css stylus cd PROJECT_NAME && npm install node app.js http://localhost:3000

Slide 8

Slide 8 text

Jade An HTML Preprocessor

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

cat
dog
mouse

Slide 11

Slide 11 text

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)

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Stylus A CSS Preprocessor

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

nib (http://visionmedia.github.io/nib/) linear-gradient position clearﬁx border-radius ellipsis

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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%

Slide 21

Slide 21 text

Back to Express Tie in a “Database”

Slide 22

Slide 22 text

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!

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Hack Away There’s more to do!

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Raquel Vélez @rockbot http://rckbt.me [email protected] https://github.com/rockbot/node-FED