web over 9000
TRANSCRIPT
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!