Google I/O 2014 - Web updates

#WebFundamentals, #WebStarterKit, #Polymer

Transcript

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
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/
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/
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
14. PageSpeed insights [Mobile] • Adjust viewport • Adapt content • Font & active element size • Plugins (Flash and etc)
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>
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> </core-toolbar>
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.