class: left, middle, title # Web + Mobile System Design #### DIGF 6039 - Digital Futures, OCAD University Session 5, starting at **3:10PM** --- class: left, middle ## Today's agenda - Server-side, database, and client-side - Flash, HTML5 and JavaScript - State of JS frameworks - jQuery --- class: left, middle ## Classification **Server-side**: What information is being requested, and how is it served? **Database**: What information is being saved and accessed? **Client-side**: What is the user seeing? How is the user interacting? --- class: left, middle ## Technologies **Server-side**: C#, Java, PHP, Ruby, etc. **Database**: MySQL, MSSQL, PostgreSQL, Oracle, etc. **Client-side**: HTML, CSS, and **JavaScript** --- class: left, middle ## JavaScript, Then - Originally avoided by developers - Open source in nature - **“Amateur language”** - Turbulent history - Bankruptcy of Netscape (origin of JavaScript) - Resistance from Microsoft and Yahoo --- class: center, middle ### JavaScript as Netscape-Exclusive
--- class: center, middle
--- class: center, middle ## Brendan Eich
--- class: center, middle ## Mozilla
--- class: center, middle ## Adobe Flash
--- class: center, middle ## Brave
--- class: left, middle ## JavaScript, Now - Now the **dominant language** on the Web - Embraced by Google - Expanding into other domains #### No longer confined in client-side development - Can handle server commands and databases - Languages and solutions inspired by JavaScript - Apple Swift and Node.JS --- class: left, middle ## HTML5 - The most current version of the HTML standard - Introduces **CSS3 and JavaScript** - Sparked the rivalry between **Apple and Adobe** --- class: left, middle ## "Thought on Flash" - Apple’s mobile products never supported Adobe Flash - 80% market share in 2014 - Open criticism against **Adobe Flash** - Claiming Flash is buggy, lacks security, and slow – substandard - Open support for **HTML5-CSS-JS** as a replacement --- class: center, middle
--- class: center, middle ## "We Love Apple"
--- class: left, middle ## Experimental Phase #### The Wilderness Downtown - Interactive music video by Chris Milk - Created as a Chrome Experiment - Collaboration with Arcade Fire #### Ro.me - 3 Dreams of Black - Follow-up project by Chris Milk - 3D graphics on the browser - Collaboration with Danger Mouse and Norah Jones --- class: center, middle
--- class: center, middle ### Chrome Speed Test
--- class: left, middle ## JavaScript #### A common programming language for the web - HTML is a markup language - CSS is a style language - PHP is a programming language for the server - SQL is a database language #### Designed to make the website more interactive / animated #### All current web browsers can interpret this language - Many similarities to CSS --- class: center, middle ## State of industry
Hint: it's a heavily abstracted mess --- class: center, middle ## Market Cannibalization
--- class: left, middle ## Reality of JS Frameworks - **Heavy abstraction** leads to confusion for beginners - Short lifecycle #### “There appear to be two major phases … there appears to be a quick ascent, as the framework gains popularity and then a slightly less quick but steady decline as developers adopt newer technologies. These lifecycles only last a couple of years.” - Skills gained from one framework **not transferable** to another - In short: embrace getting close to the **core technologies** --- class: left, middle ## JavaScript Frameworks #### **Powerful language**, but discrepancies between web browsers - Lack of cross-browser support and complicated syntax - To make Javascript development easier, many frameworks were released #### Each framework does plenty of **“heavy-lifting”** for developers - Often provides too much handholding and forces the user to adopt a rigid principle - Too opinionated - Less freedom --- class: center, middle
--- class: left, middle ## jQuery #### “Write less, do more” - 95%+ market share (70%+ of all websites) - One jQuery command **works for all** modern web browsers - Popularized JavaScript for the Web - Solved legibility / learning curve problems --- class: center, middle
--- class: center, middle
--- class: center, middle
--- class: left, middle ## Today's Exercise - Bootstrap and jQuery - Modularization review - jQuery events and effects - jQuery plugins