Nodefront - A Node.js-powered rapid front-end development utility

Karthik Viswanathan, CS '15

Rapid front-end development with Nodefront
A node.js-powered
command-line utility

Nodefront

How do
you write
HTML?

How do you write HTML?

  • Seems like a simple question
  • "I open up my text editor and start typing characters"
  • How else do you write HTML?

There's more
than one way.

<html>
is verbose

Verbosity

<!DOCTYPE html><html>    <body>        <h2>Heading</h2>        <p>Paragraph</p>    </body></html>

Verbosity - end tags

<!DOCTYPE html><html>    <body>        <h2>Heading</h2>        <p>Paragraph</p>    </body></html>

Verbosity - end tags removed

<!DOCTYPE html><html>    <body>        <h2>Heading        <p>Paragraph

Verbosity - tag markers

<!DOCTYPE html><html>    <body>        <h2>Heading        <p>Paragraph

Verbosity - tag markers removed

!DOCTYPE htmlhtml    body        h2 Heading        p Paragraph

Verbosity - doctype

!DOCTYPE htmlhtml    body        h2 Heading        p Paragraph

Verbosity - doctype simplified

!!! 5html    body        h2 Heading        p Paragraph

Why? So what?

Statistics

  • Original code: 104 characters
  • New code: 59 characters
  • Percent reduction: 43.3%
  • Contrived example, but this verbosity does affect efficiency

$ nf compile

Compile summary

  • No need to write raw, verbose HTML
  • No, you aren't cool if you say "I write HTML in the raw!"
  • Nodefront compiles over 23 templating/built languages
  • Jade, Stylus, LESS, SASS, Markdown, Coffee Script, etc.
  • Watch mode via -w or --watch

How do you
edit your
site's styles?

Editing CSS

  • Change/write CSS
  • Switch context to browser
  • Refresh browser
  • Switch context to code
  • Repeat
Editing CSS

Live reloading

Editing CSS Improved

  • Change/write CSS
  • Repeat

Editing CSS, Doubly Improved

  • Change/write CSS using Stylus/LESS/SASS
  • Repeat

Yo dawg...

Refresh automatically

$ nf serve

How do you
download
libraries?

Downloading jQuery

  1. Visit jquery.com
  2. Click the download link
  3. Extract archive (not for jQuery, but for many other libraries)
  4. Put jquery.min.js into project directory
  5. Link to it in your HTML

What if all you needed was
one command?

Watch out guys
Dog fetch

$ nf fetch

Do you minify
your assets
for production?

No?

Are you serious?

Are you serious?

$ nf minify

Efficient now?

Oh yeah

Installation instructions

  • Download npm from npmjs.org
  • $ npm install -g nodefront
  • $ alias nf = 'nodefront'

Thank you