Web developer's
guide to the Google I/O
Don't Panic

Nove mogućnosti i alati

A More Awesome Web

CSS

  • vw, vh, vmin, vmax
    • Chrome, Safari, Firefox, Internet Explorer
  • min-content, fit-content, max-content, fill-available
    • Chrome, Firefox
  • CSS varijable
    • Chrome Canary
  • @supports
    • Chrome, Opera, Firefox nightly
  • position: sticky
    • Chrome Canary

A More Awesome Web

Media

  • WebRTC
    • Chrome, Firefox beta
  • RTCDataChannel
    • Chrome Canary, Firefox nightly
  • Web audio API
    • Chrome, Firefox, Safari, Opera
  • Web speech API
    • Chrome

Web Components

HTML Templates - Chrome, Opera Next, Firefox nightly

  • Parsira se
  • Ne prikazuje se, resursi se ne učitavaju
  • Izoliran od dokumenta

Web Components

Shadow DOM - Chrome

  • Enkapsulacija DOM-a i stilova
  • Već postoji u browserima
    • <input type="date" />
    • <input type="file" />
    • <video>
  • Vanjski CSS se ne primjenjuje po defaultu
  • "API" - insertion points

Web Components

Custom elementi - Chrome (djelomično), Firefox nightly

  • Definiranje novih tagova
    • JavaScript
    • HTML
  • Ima konstruktor
  • Callbackovi
    • ready
    • inserted
    • removed

Web Components

HTML Imports - polyfill

  • <link rel="import" href="x-gangnam-style.html">

Web Components

Sve zajedno

  • <link rel="import" href="x-gangnam-style.html">
  • <gangnam-style></gangnam-style>

Web Components

Kako ih koristiti već danas

  • platform.js - 31kB
    • Mutation observers
    • Pointer events
    • Shadow DOM
    • Custom elementi
    • HTML imports
    • MDV - model driven views
    • Web animacije - CSS+SVG

Welcome to the Dart side

Što je Dart i zašto ga koristiti

  • Objektno orijentirani jezik sa sintaksom u C stilu
    • Utjecaji: JavaScript, Java, C#, Smalltalk, Erlang
  • Kako
    • Dartium
    • dart2js
    • Stand-Alone
  • Zašto
    • Performanse
      • Trenutno je oko 2x brži od JavaScripta
      • dart2js je na oko 80% brzine običnog JavaScripta
    • Biblioteke
    • Package manager

WebP

Zašto

  • Slike čine 60% prometa stranice
  • Trenutni scenarij:
    • Trebaš animacije -> gif
    • Trebaš prozirnost -> png
    • Trebaš što manje slike -> jpg
  • Mogućnosti:
    • Lossy
    • Lossless
    • Transparentnost
    • Animacije
    • Metadata
  • Prosječno 30% manje od jpg s istom razinom kompresije

WebP

Problemi

  • Enkodiranje sporije 5-10x od jpg
  • Dekodiranje sporije oko 30% od jpg
    • eBay eksperiment
    • Ubrzanje kod učitavanja veće od usporavanja kod dekodiranja
  • Podrška
    • Chrome, Opera, Android 4, Android i iOS biblioteke, pluginovi, webpjs

Chrome DevTools

Novosti

  • Workspaces
  • Sass styles
  • chrome://inspect
  • Reverse port forwarding
  • JavaScript i canvas profiliranje
  • Continuous repaint mode
  • Show paint rectangles & layer borders

Mobile

Nove stvari

Danas

  • Media upiti
    • Visina/širina
    • Aspect ratio
    • Pixel density
    • Orijentacija
  • Pohrana
    • localStorage
    • WebSQL
    • IndexedDB
  • Android intents
  • getUserMedia

Nove stvari

Uskoro

  • vw, vh, vmin, vmax
  • @viewport
  • position: sticky
  • Pointer eventovi
  • WebRTC
  • Web Audio API
  • Web Speech API
  • image-set
  • srcset

Optimizacija

#perfmatters

Zašto su performanse važne

  • 1s duže učitavanje
    • 11% manje pagevieowa
    • 16% manje zadovoljstvo
    • 7% manja zarada
  • 3s duže učitavanje
    • 57% korisnika napušta stranicu
    • 46% se ne vraća
    • 22% kaže prijateljima

O čemu se pričalo na I/O

  • Kako trošiti što manje baterije pri komunikaciji
  • Prečesta aktivacija garbage collectora
  • Optimizacija/deoptimizacija koda
  • Izbjegavanje nepotrebnih paintova
  • Promocija elemenata u odvojene layere

Showoff

JAM with Chrome

  • jamwithchrome.com
  • 19 instrumenata
  • Web Audio API
  • Cilj: što manji lag
    • Do 100ms u pro modu
    • Do 300ms u easy modu

Find Your Way To OZ

Kako funkcionira

  • Upravljanje
    • glas/pokreti
    • touchpad
  • Sučelje - timeline
    • Kartice
      • Tekst
      • HTML
      • Slika / Video
    • Lijeva strana - budućnost (vremenska prognoza, kalendar, ...)
    • Desna strana - prošlost (poruke, slike, ...)

Development

  • Google Mirror API
    • OAuth + REST + JSON
    • Google server je proxy i brine o sinkronizaciji
  • Glass Development Kit
    • Uskoro
    • Offline aplikacije
    • Android

Linkovi

Nove tehnologije i alati

Mobile

Optimizacija

Showoff

Glass

Ostali talkovi koji nisu direktno vezani uz neku temu iz predavanja