THE RAPID EVOLUTION OF WEB DEVELOPMENT HTML5, CSS3 and Chrome 19 is so yesterday! Or Thomas A. Powell [email protected] @PINTSD
Jun 19, 2015
THE RAPID EVOLUTION OF WEB DEVELOPMENT
HTML5, CSS3 and Chrome 19 is so yesterday!Or
Thomas A. [email protected]
@PINTSD
Who Am I?
• Yeah I worked on the Old Timey Internet
• Wrote a bunch of books
• Taught a lot people
• Web Agency Background
• Started a few successful Web Software Plays
Why Am I Here?
• Hoping to talk about Data Viz & Big Data
• “Too Specific. How about HTML5?”
• Ok, easy enough
• “Scratch that! Too techie, talk about changes and trends in Web dev instead!”
• Ok...sure (head scratching)
Here We Are Then• ~45 mins or so, let’s start the clock
• Time to talk about hopefully interesting things
• Sure you might be into marketing, but we need context so let’s talk about:
• Techie stuff : HTML5, JS, Networks, etc.
• Security and Privacy
• Performance
• Trends
Oh and Memes
A Long Time Ago...
• I wrote this book on paper
• Premise: Web Sites/Apps == Software, thus treat dev as such
• Then : “Wow, makes sense”
• Now : “Eh...Duh”
• So we’ve evolved and fast!?
What Makes Web Different?
• The Public Network
• Dev Practices
• Ownership
• Other Theories
The Network
• You don’t control it end to end
• Delivery time not guaranteed
• Latency is significant
• HTTP impacts
• Simple but...
• Stateless
• Slow
• Security - an after thought
Dev Practices
• What are those?
• Software Engineering without _________
• Release cycles
• You mean when we change code?
• QA
• Always doing or never doing?
• Let the users tell us!
Owner Effects
• Strong Patron and Walled Gardens
• Many Patrons and Open Market
• Convention and consensus over some predetermined standard
• Is there a right answer?
• Trade-offs always!
Theories• It’s different because
• Easy to leave ... but stickiness=lock-in
• Biz model ... but freemium looks like shareware
• Distribution ... but software is now the same
• Platform ... but browser becomes OS
• UI Issues ... but look at history
Let’s Take a Tour
• Different or not it doesn’t matter
• Time to tour the Web Dev Space
• We’ll go up and down the stack
• Visit some buzzwords
• Expose some pros and cons
• Hopefully seed many questions for the end
Browser Wars
• Version Number Battle
• Chrome 19*, Firefox 13, Opera 12, and coming up last IE 10
• Near monthly releases and nightly updates
• Tons of invented features
• Trouble: Continuous QA cycle!
Zombie Browsers
• Yes IE6 sucks (7/8 too)
• But did it back then?
• Consider that Chrome 19 will suck in 10 years
• Dev today for features which you expect to be standard which later aren’t...what happens?
Browser as Platform
• Browsers have more privileged access
• File System, Geoloc, WebCam, Gamepad, and more
• Native is ultimate goal - see Google Native Client
• Netscape’s early vision finally realized
• Browser as OS - see Chrome OS
• Outcomes: Security, Complexity, Portability just in new container
What is HTML5?• Sad Truth: Most often a buzzword for
anything new, focused on some feature of interest and tremendously confused with heavy JavaScript use
• Sprawling Spec under constant change
• Evolution of HTML 4
• Acknowledges failure of XHTML
• Paves cowpaths with non-standard to standard
• Secret Win: Tag Soup Parse Rules
HTML5 : Semantic Tags
• <header>, <footer>, <section>, <article>, <aside>, <nav>, <figure>, <mark>, <time>
• You can easily use them now
• HTML5 Shim, Modernizr
• Better than <div> - itis
• Outcomes: Semantics (maybe SEO), outlining
HTML5 : Web Forms
• Rich Form Widgets
• Date Pickers, Color Pickers, Sliders, Search box, Autocomplete Lists
• Semantic Types
• email, tel, url, number
• Validation without JavaScript
• pattern, required, semantic types
HTML5 : Media
• <audio> and <video> tags
• Flash video begone!
• But...codec chaos returns
• And maturity and integration jumps backwards
HTML5 : Canvas
• <canvas> tag + Canvas API using JavaScript = Programmatic Bitmap Graphics
• Pros: Small API and fast esp. if GPU accelerated
• Cons: Too low level, no IE until IE9, Not retained mode (no picking), accessibility is bad
Canvas Alternatives
• SVG - tag based, retained mode, in some cases faster
• JS DOM Animation - flexible but can be slow
• Flash - yes Flash, get over it
• CSS Animations and Transitions
• Fast but specialized and feature limited
JavaScript Everywhere• Client-Side (with many names - DHTML,
Ajax, HTML5, etc.)
• Library Mania: jQuery, ExtJS, Backbone,...
• Server-Side:
• node.js, silk.js, Helma, Ringo, even classic ASP
• Mobile
• Sencha Touch, Phone Gap, ...
• Even Desktop
Hating on JavaScript• It has “Ugly Parts”
• Rework it - ECMAScript5, 6, etc.
• Compile to it - Coffeescript, GWT
• It’s Slow
• Yeah and other dynamic langs?
• Great improvements: V8, Chakra
• It’s insecure
• Is it? Or is it what you are doing with it?
CSS 1,2,3,4...
• Multiple Columns, Drop Shadows, Custom Fonts, Image Borders, Layouts, Media-Queries, Animations, Filters!?
• CSS Bloat
• Welcome to -vendor prefix hell!
• Compilers Emerge
• Less, Sass, Stylus
• BTW CSS Variables are here too
Server-Side
• First stop the “____ won’t scale” nonsense, that’s a different problem
• JavaScript to erode PHP, Ruby, Python
• All continue with C# and Java a bit more entrenched
• More biz logic moves client-side.
• Server side becomes service layer
• REST won, URL as command line, and JSON everywhere
Database Drama
• The Rise of NoSQL (ex. MongoDB)
• Lots of hype here
• Good reasons why we want it but...
• DB research and tradition thrown out the window
• Change for sure, I expect a hybrid winner
Security Challenges
• Hack traffic is nearly ambient at this point
• Exploits are now industrialized
• Pants are down all over the place
• Anonymous is really not that l33t
• Trust relationship are not understood or admitted to
Security Face Palms
• The client-side is untrustworthy!
• You can’t can’t can’t trust inputs
• You must encrypt your transmission
• Especially given heavy public WiFi use
• Open Source is open to all (hackers included)
Web Security Truths
• Tech can’t solve the security problem
• There is no such thing as perfect security
• Security is a posture, not a feature
• The business model of Web security is mostly flawed
Delivery Woes• Speed matters! Can never be fast
enough
• Bandwidth fallacy still reigns, but latency is more important!
• Even 100ms can equal loss
• Client Side problems are source of > 80% of speed problems
• 3rd Party Includes and Scripts are major problem
• Speed, Security, even SPOF!
Serving Changes
• Performance & scale matter!
• Apache is fading
• Others rising Ngnix, Lighthttpd, node.js, etc.
• Protocols are changing - SPDY
• # of requests is the issue
• I/O is still a bottleneck
• CDNs use is more common
Analytics Shake-Up
• Reliances on JavaScript, Cookies and 3rd party hosts are quite troubling
• Lots of handwaving and conflicts of interest
• There is increasing tracking abuse
• Regulation is coming
• EU Cookie Law
• Could be a good business opportunity
Big Data != Big Wisdom
• We want to know everything!
• Storing and processing all that data is expensive and time consuming
• Viz helps
• Good questions help more
Data Driven to Disaster
• Lots of “data science” but often lack some basic scientific thinking patterns
• Causality and correlation are quite often confused
• Tons of confirmation bias
• Lots of sampling bias
• Crowd Wisdom is ruling a bit much
• Science isn’t easy, be skeptical
Mobile! Mobile! Mobile!
• Indeed huge changes!
• Mobile won’t completely rule
• On Star Trek ...
• In Japan...
• Creation vs. Consumption
• Walled Garden versus Open Garden tension again
Tool/Tech Blaming
• The languages, services, tools, hosts, etc. you use don’t make you do dumb things we tend to do that fine on our own
• Looking for the perfect _____ is going to be a long process
• Trade-offs exist, deal with them
Implementation over Function?
• Who cares what your app is written in?
• Hackers? Competitors?
• What does Google or ____ use?
• Does it matter?
• BTW ever viewed Google’s source?
Evaluation Solely By Looks
The Constant
• Being human is the constant, new technology is the variable
• Human nature tends to trend to norms over time
• The Web doesn’t make you (or your kids or customers) a smarter, super-friend making multi-tasker
User General Truths• Customer always right, listen to the
customer, nobody likes to wait, less work-more gain, etc.
• I’ve tended to find more insight in books like Robert Cialdini’s Influence: The Psychology of Persuasion or general works on General Biz, Psych, CogSci, Interface Design, etc. then Web specific ones
• BTW have you heard? The Web is the real world?