Markup and Style without HTML and CSS

@jedschmidt http://who.jed.is [email protected]

2004: JA 2005: JA 2006: JA 2007: JA 2008: JA
2009: JA 2010: JA 2011: JA 2012: JA ✘JS

140byt.es

function(a){for(var v,s=0,i=a.length;i-- ;s+=v>(v=[100,500,,, ,,1,,,50,1e3,,,,,,,, ,5,,10][parseInt(a.c harAt(i),36)-12])?-v :v);return s} Parse Roman
Numerals

function(z,s,r,i,k,n ,w){for(w=z*z,n=w;n- -;s[w-n]='!'.fontcol or('#'+k*9))for(r=i= k=0;r*r+i*i+k++<z;i= t)t=2*r*i+1-2*n/w,r= r*r-i*i+1-3*n/z%3} Draw Mandelbrot

function R(a,i,j,m,g) {for(i=80;a[i];i--||A );for(m=10;g=a[i]=--m ;g&&R(a))for(j in a)g *=j==i||a[j]^m||i%9^j %9&&i/9^j/9&&i/27^j/2 7|i%9/3^j%9/3}
Solve Sudoku

browserver

A node.js server in your browser.

HTTP over WebSockets

HTTP ALL THE THINGS

1. Browser connects to server 2. Server gives browser a
hostname 3. Server proxies HTTP in 4. Server proxies HTTP out 5. Browser becomes a server

http.createServer(function(req, res){ ... }) http.get("http://jscamp.asia", function(res){ ... })

<html> <head> <script> http.createServer(function(req, res){ ... }) http.get("http://jscamp.asia", function(res){ ...
}) </script> </head> </html>

A wake-up call

How can we make web app development more compelling?

How can we make web app development easier?

How can we make web app development faster?

Let’s look at our stack.

1. JavaScript 2. HTML 3. CSS

1. Objective-C

1. Java

HTML and CSS are the best/worst thing about the web.
/best

Standard

✔ Standard

✔ Standard Declarative

✔ Standard Declarative ✔

✔ Standard Declarative JavaScript ✔

✔ ✘ Standard Declarative JavaScript ✔

✔ ✘ Standard Declarative ✔ Dynamic

CSS isn’t powerful enough.

so we pre-process.

Variables Mixins Functions Nested style

but...

HTML isn’t powerful enough.

so we template.

uritemplate An UriTemplate implementation of rfc 6570 url-template utc Simple
underscore.js template compiler. utml Express compliant templating for underscore.js vacuum Clean streamed templates (primarily for HTML) vash Razor syntax templates, for JS velocity.js Velocity Template Language(VTL) for JavaScript vie Editable RDFa with Backbone.js and JSON-LD view-test view-test allows you to easily test Jade and EJS templates views Views registry and rendering walrus A bolder kind of mustache. web2splash A PhoneGap splash screen generator using an HTML document weber A tool for compiling scripts, stylesheets and templates wh webfiller Webfiller puts data and styling into Web pages on the serv webhook-templates Dust.js templates for webhook payloads weld Template antimatter for javascript wings Templating library that works on the server and client clo wintersmith-nunjucks Nunjucks templates for Wintersmith woot Quickly create new projects based on custom templates xjs A templating language for node.js using xml and javascript xjst XSLT inspired JavaScript templates (with spices) xmlb XML builder templates for Node.js. xsl2yate converts xsl templates to yate yajet Template engine forked from http://www.yajet.net/ yate Yet Another Template Engine yatl JSON-based template engine yhandlebars Command line tool to precompile Handlebars templates as YU yui3boiler simple utility to initialize module source directory struc zappajs-template A working ZappaJS server with useful templates zeke a plug-able coffeescript template generator

{{#var}} {{#var?}} {{/var}} {{^var}} {{!var}} {{>var}} {{{var}}} {{&var}}

2002: Obtrusive JS 2012: Obtrusive HTML

[object HTMLScriptElement] [object String] [object Function] [object String] [object HTMLDivElement]

but...

1. JavaScript 2. Almost HTML 3. Almost CSS

✔ ✘ Standard Declarative ✔ Dynamic

1. JavaScript 2. Almost HTML 3. Almost CSS

1. JavaScript 2. JavaScript 3. JavaScript

Let’s kill CSS and HTML and resurrect them in JavaScript.

Let’s port CSS and HTML to the syntax of JavaScript.

http://domo-js.com

1,303 minizipped bytes

Markup, style, and code, in one language.

HTML and CSS in JS syntax.

Stop coding CSS. Code style. Stop coding HTML. Code DOM.

HTML DOM JavaScript → →

<a href="about.html">About</a>

<a href="about.html">About</a> nodeName (string) attributes (map) childNodes (list)

domo.element

domo.element(nodeName, attributes, childNodes)

domo.element( "a", {href:"about.html"}, ["About"] )

1 function for each HTML5 element

A ABBR ACRONYM ADDRESS AREA ARTICLE ASIDE AUDIO B BDI
BDO BIG BLOCKQUOTE BODY BR BUTTON CANVAS CAPTION CITE CODE COL COLGROUP COMMAND DATALIST DD DEL DETAILS DFN DIV DL DT EM EMBED FIELDSET FIGCAPTION FIGURE FOOTER FORM FRAME FRAMESET H1 H2 H3 H4 H5 H6 HEAD HEADER HGROUP HR HTML I IFRAME IMG INPUT INS KBD KEYGEN LABEL LEGEND LI LINK MAP MARK META METER NAV NOSCRIPT OBJECT OL OPTGROUP OPTION OUTPUT P PARAM PRE PROGRESS Q RP RT RUBY SAMP SCRIPT SECTION SELECT SMALL SOURCE SPAN SPLIT STRONG STYLE SUB SUMMARY SUP TABLE TBODY TD TEXTAREA TFOOT TH THEAD TIME TITLE TR TRACK TT UL VAR VIDEO WBR

domo.element( "a", {href:"about.html"}, ["About"] )

domo.a( {href:"about.html"}, ["About"] )

domo.a( {href:"about.html"}, "About" )

var href = "about.html" domo.a( {href: href}, "About" )

var href = "about.html" A({href: href}, "About")

var href = "about.html" var domo = domo.global(false) var A
= domo.A A({href: href}, "About")

var href = "about.html" var {A} = domo.global(false) A({href: href},
"About")

href = "about.html" {A} = domo.global no A({href: href}, "About")

href = "about.html" {A} = domo.global no A href: href,
"About"

href = "about.html" {A} = domo.global no A {href}, "About"

meanwhile, on the server...

var domo = require("domo")

822 minizipped bytes

var styleSheet = STYLE({type: "text/css"}, STYLE.on("a", {color: "red"}), STYLE.on("*", {margin:
0, padding: 0}) ) alert(styleSheet.innerHTML == "a{color:red;}\n*{margin:0;padding:0;}\n")

var blue = "#3B5998" var gray = "#3B3B3B" var defaultRadius
= 10 function roundedCorners(radius) { return { borderRadius : radius, WebkitBorderRadius : radius, MozBorderRadius : radius } } var styleSheet = STYLE({type: "text/css"}, STYLE.on("h2", {color: gray}, roundedCorners(defaultRadius)), STYLE.on("h1", {color: blue}, roundedCorners(defaultRadius * 2)) )

var nestedStyles = STYLE({type: "text/css"}, STYLE.on("a", {color: "red"}, STYLE.on("img", {borderWidth:
0}) ) ) var normalStyles = STYLE({type: "text/css"}, STYLE.on("a", {color: "red"}), STYLE.on("a img", {borderWidth: 0}) ) alert(nestedStyles.innerHTML == normalStyles.innerHTML)

If we are willing to let go of the surface
syntax of HTML and CSS...

we can now:

1. Reduce our exposure to XSS attacks 2. Eliminate a
separate compile step 3. Write our DOM code where it makes sense 4. Use JavaScript syntax everywhere 5. Decouple our syntax sugar 6. Reduce the number of moving parts 7. Reuse existing infrastructure 8. Lessen the burden of context switching

Thanks! @jedschmidt http://domo-js.com

Markup and Style without HTML and CSS

Markup and Style without HTML and CSS

More Decks by Jed Schmidt

Other Decks in Programming

Featured

Transcript