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


  1. Google updates in the Web Dmitrijs Vrublevskis

  2. Quick facts about me - Developer @ “Transact PRO” -

    Unhappy with PHP - In love with Ruby - Believe in Linux
  3. Web goes mobile

  4. None
  5. Web Fundamentals Best practices for modern web development

  6. What? “Web Fundamentals is a comprehensive resource for multi-device web

    development.” https://developers.google.com/web/fundamentals/
  7. None
  8. “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
  9. Web Starter Kit Boilerplate & Tooling for Multi-Device Development

  10. 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/
  11. None
  12. $ 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
  13. None
  14. PageSpeed insights [Mobile] • Adjust viewport • Adapt content •

    Font & active element size • Plugins (Flash and etc)
  15. None
  16. Polymer Welcome to the future

  17. Web components Templates Custom Elements Shadow DOM Imports

  18. Web components [Templates] <template id="commentTemplate"> <div> <img src=""> <div class="comment-text"></div>

    </div> </template> <script> function addComment(imageUrl, text) { var t = document.querySelector("#commentTemplate"); var comment = t.content.cloneNode(true); comment.querySelector('img').src = imageUrl; comment.querySelector('.comment-text').textContent = text; document.body.appendChild(comment); } </script>
  19. Web components [Custom Elements] <user-card name="Dmitry"></user-card> <user-card name="Alexey"></user-card> <script> var

    userCard = Object.create(HTMLElement.prototype); userCard.showName = function() { this.innerHTML = this.getAttribute('name') + "<br>"; }; document.registerElement('user-card', { prototype: userCard }); document.querySelector('user-card:first-child').showName(); document.querySelector('user-card:last-child').showName(); </script>
  20. Web components [Shadow DOM] <div id="article"></div> <template id="comment"> <hr/> Comment

    text </template> <script> var article = document.querySelector('#article'); var r = article.createShadowRoot(); var commentTemplate = document.querySelector('#comment'); r.appendChild(commentTemplate.content.cloneNode(true)); r.appendChild(commentTemplate.content.cloneNode(true)); </script>
  21. Web components [Imports] <link rel="import" href="widget.html"> <script> var link =

    document.querySelector('link[rel="import"]'); var importedContent = link.import; importedContent.querySelector('article'); </script>
  22. None
  23. 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
  24. core-toolbar <core-toolbar> <core-icon-button icon="menu"></core-icon-button> <span flex>Toolbar</span> <core-icon-button icon="refresh"></core-icon-button> <core-icon-button icon="add"></core-icon-button>

  25. core-menu <core-menu selected="0"> <core-item icon="settings" label="Settings"></core-item> <core-item icon="favorite" label="Favorite"></core-item> <core-item

    icon="account-box" label="Account"></core-item> </core-menu>
  26. 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
  27. 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.
  28. None
  29. None