Web over 9000

Real-Time Release Framework

Efficiency Standards Ease of Development.0

A lightning talk presented at the San Diego JS Meetup Aug 4

SETH CALDWELL

Working on Ajax and Jquery long before the terms existed.

Lets make building great things easy.

BBS - little hacker with millions of AOL accounts“Group Network” ’98 – “The Social Network” at RBHS

Locally: ARES, Collarfree, ArtisticHub, DealCurrent, TillsterApp store: Super Coffee Man, CliqMusic, SnapChallenge

Now? Contractor, Security Consultant, CTO, arrogant asshole

WEB WHAT?

Web 2.0 describes WWW sites that emphasize user-generated content, usability, and interoperability. Popularized 2004, but first used in 1999.

Web 3.0 (semantic web): connective intelligence;Connecting data, concepts, applications and ultimately people.Siri type technology. single page application, internet of things

Web 9000.0: A webpage is an app, a desktop application, a mobile web application…A ‘single page’ app incrementally loaded, with runtime self modification

The webpage extends life. The webpage expands consciousness. The webpage is vital to space travel… Dune /s/spice/webpage(10Mbit down 3Mbit up!)

DEMO!

What I did here: Opened snapchallenge.net showed a viewAsked audience to open on phoneOpened sublime, changed a view.html fileTabbed to sourcetree, committed/pushed changeTabbed to terminal, ran php publish.phpTabbed back to browser to show it changed

EFFICIENCY

Things most frameworks are good at:

Automation Tasks and plugins

Minification Some even make image maps!

Linting Showing common js errors, warnings

Testing Find what changes break older code

Things we aren’t good at:

Releases – full update every iteration Bug Fixes – existing bugs are ‘out there’ On-demand content – has to be programmed

Grunt!

Profile the app lifecycle and identify the slow/weak points

WRONG THINGS RIGHT

Inline CSS

Inline javascript!?

What is a view?

Edit a file, save the file, TEST the site INSTANTLY

Version Listening: What is a realtime view?

<div style="position:relative; width:300px; height:300px; background-color:white;"> <div style="position:absolute; left:50px; top:50px; width:100px; background-color:red; color:black;">o</div></div>

<style>#outer {

position: relative; width: 300px;height: 300px;background-color: white;

}#inner {

position: absolute;left: 50px;top: 50px;width: 100px;background-color: red;color: black;

}</style><div id="outer"> <div id="inner">o</div></div>

FUNCTION INTROSPECTION

Scripts in views are evaluated and compiled in browser

Data binding like angular

DOM optimization – Reduce Reuse Recycle!

Questions?