The STATE of the web
Managing complexity in modern web applications
Memtech
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/6861876/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/6861884/MTF-Stacked-Badge.png)
Overview
The state of the web
A brief history of the internet
Modern User Interfaces
Managing complexity in web apps
(featuring mobx and typescript)
Part 1
The State of the Web
A Brief History of the Internet
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/6861889/pasted-from-clipboard.png)
In the Beginning
1991-1999
1991
HTTP
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/6861905/pasted-from-clipboard.png)
1993
HTML
1996
CSS
1994
JavaScript
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/6861909/triforce.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/6878777/pasted-from-clipboard.png)
1998
1997
ECMA standardizes JS
1999
EcmaScript V3
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/6861919/pasted-from-clipboard.png)
First Browser Wars
1995 - 2001
"Best viewed in"
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/6861937/1024px-Netscape_icon.svg_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/6861939/Internet_Explorer_9_icon.svg.png)
Search Engines
1994-98
yahoo, ask jeeves, google, etc...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/6861947/Google1998.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/6861957/pasted-from-clipboard.png)
Massive Adoption and Growth
2000-2006
Social Media
Facebook Public Access 2006
Twitter 2006
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/6861961/the_facebook_blue.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/6861962/TwitterListsLocationOriginalView.png)
2005
The Term AJAX is coined
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/6861968/pasted-from-clipboard.png)
2006
jQuery
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/6861973/pasted-from-clipboard.png)
2007
Zero Day
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/6861977/pasted-from-clipboard.png)
Post Mobile
2007-Present
2007
iphone
2009
android
2008
App Store
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/6861997/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/gpspake/images/762418/mobile_home_page_design.png)
2009
ES5
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/6877834/pasted-from-clipboard.png)
2010-2011
Responsive Design/Mobile First
Bootstrap & Foundation
SASS/LESS
NPM/Bower
Grunt/Gulp
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/6862004/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/6862010/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/6862018/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/4789857/npm.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/gpspake/images/762981/logo-235e394c.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/gpspake/images/762983/less-css-logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/gpspake/images/763025/bower-logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/gpspake/images/763044/grunt-logo-400.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/gpspake/images/763045/gulp-2x.png)
2011-2015
Chaos
Rise of SPAs
Leverage AJAX to the extreme
Angular, Backbone, Ember
REACT!!
Babel & Webpack
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/6862055/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/6862058/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/6862060/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/6862063/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/6862066/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/6862068/pasted-from-clipboard.png)
2015
EcmaSript 6
ES2015
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/6862069/pasted-from-clipboard.png)
2016-2020
Meanwhile...
Agile, DevOps, MicroServices, Cloud, Gaming
Part 2
User Experiences
External Forces
The browser is the target
Web design is not (only) about pretty colors and rounded corners anymore
UX is Data Driven
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/6873882/pasted-from-clipboard.png)
New Technologies allow us to break convention
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/6873876/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/6873892/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/6873894/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/6873904/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/6873907/single-cc-demo.gif)
Text
Text
Web applications are inherently complex
Part 3
Managing Complexity
Thinking in React
Atomic Design
State Management
Redux
Mobx
Redux
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/6849967/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6d656469612d702e736c69642e65732f75706c6f6164732f3336343831322f696d616765732f323438343535322f415243482d5265647578322d7265616c2e676966.gif)
Mobx
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/6849963/pasted-from-clipboard.png)
UI Components
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/6873978/pasted-from-clipboard.png)
UI State
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/6873939/stores.png)
Organizing State in Multiple Stores
![](https://s3.amazonaws.com/media-p.slid.es/uploads/134450/images/6874054/pasted-from-clipboard.png)
TypeScript
The STATE of the web
By gpspake
The STATE of the web
- 920