Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Google I/O 2014 - Web updates

Google I/O 2014 - Web updates

#WebFundamentals, #WebStarterKit, #Polymer

Dmitrijs Vrublevskis

July 03, 2014
Tweet

More Decks by Dmitrijs Vrublevskis

Other Decks in Programming

Transcript

  1. Google updates in the Web
    Dmitrijs Vrublevskis

    View full-size slide

  2. Quick facts about me
    - Developer @ “Transact PRO”
    - Unhappy with PHP
    - In love with Ruby
    - Believe in Linux

    View full-size slide

  3. Web goes mobile

    View full-size slide

  4. Web Fundamentals
    Best practices for modern web development

    View full-size slide

  5. What?
    “Web Fundamentals is a comprehensive
    resource for multi-device web development.”
    https://developers.google.com/web/fundamentals/

    View full-size slide

  6. “We're just getting started and want your
    help, if you see something amiss or have a
    suggestion file an issue or submit a pull
    request.”
    https://github.com/google/WebFundamentals

    View full-size slide

  7. Web Starter Kit
    Boilerplate & Tooling for Multi-Device Development

    View full-size slide

  8. What?
    “Web Starter Kit is a starting point for multi-
    screen web development.”
    https://github.com/google/web-starter-kit
    https://developers.google.com/web/starter-kit/

    View full-size slide

  9. $ git clone https://github.com/google/web-starter-kit.git
    $ cd web-starter-kit
    $ gem install sass
    $ sudo npm install --global gulp
    $ sudo npm install
    $ gulp serve

    View full-size slide

  10. PageSpeed insights [Mobile]
    ● Adjust viewport
    ● Adapt content
    ● Font & active element size
    ● Plugins (Flash and etc)

    View full-size slide

  11. Polymer
    Welcome to the future

    View full-size slide

  12. Web components
    Templates
    Custom Elements
    Shadow DOM
    Imports

    View full-size slide

  13. Web components [Templates]






    <br/>function addComment(imageUrl, text) {<br/>var t = document.querySelector("#commentTemplate");<br/>var comment = t.content.cloneNode(true);<br/>comment.querySelector('img').src = imageUrl;<br/>comment.querySelector('.comment-text').textContent = text;<br/>document.body.appendChild(comment);<br/>}<br/>

    View full-size slide

  14. Web components [Custom Elements]


    <br/>var userCard = Object.create(HTMLElement.prototype);<br/>userCard.showName = function() {<br/>this.innerHTML = this.getAttribute('name') + "<br>";<br/>};<br/>document.registerElement('user-card', { prototype: userCard });<br/>document.querySelector('user-card:first-child').showName();<br/>document.querySelector('user-card:last-child').showName();<br/>

    View full-size slide

  15. Web components [Shadow DOM]



    Comment text

    <br/>var article = document.querySelector('#article');<br/>var r = article.createShadowRoot();<br/>var commentTemplate = document.querySelector('#comment');<br/>r.appendChild(commentTemplate.content.cloneNode(true));<br/>r.appendChild(commentTemplate.content.cloneNode(true));<br/>

    View full-size slide

  16. Web components [Imports]

    <br/>var link = document.querySelector('link[rel="import"]');<br/>var importedContent = link.import;<br/>importedContent.querySelector('article');<br/>

    View full-size slide

  17. Core elements
    Set of utility elements including general-purpose UI
    elements, as well as non-UI elements providing
    features like AJAX, signaling and storage.
    http://www.polymer-project.org/docs/elements/core-elements.html

    View full-size slide

  18. core-toolbar


    Toolbar



    View full-size slide

  19. Paper elements
    The Paper elements are a set of UI elements that
    implement the material design system.
    http://www.polymer-project.org/components/paper-elements/demo.html

    View full-size slide

  20. Material design
    Material design is a unified system of visual, motion,
    and interaction design that adapts across different
    devices. Material design is inspired by tactile
    materials, such as paper and ink.

    View full-size slide