New Techniques in Frontend Development

Talk in CODES Coding Summit 2017

Transcript

1. New Techniques in Frontend Development CODES - Coding Summit 2017
2. Bilal Çınarlı Frontend Architect Software Engineer @Adidas @bcinarli github.com/bcinarli bcinarli.com
3. Technology Evolves
4. We moved from this
5. …to these in no time
6. Old web sites…
7. New Websites…
8. … for lots of screens and devices
9. SVG
10. Scalable Vector Graphics (SVG) is an XML-based markup language for describing two-dimensional vector graphics.
12. <img src="bblogo.svg" alt="Breaking Borders Logo" height="65" width="68">
13. .logo { background-image: url(bblogo.svg); }
14. <iframe src="bblogo.svg">Your browser does not support iframes</iframe>
15. <embed type="image/svg+xml" src="bblogo.svg" />
16. <object type="image/svg+xml" data="bblogo.svg">Your browser does not support SVGs</object>
17. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 65"> <path fill="#1A374D" d="M42 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v21l12 15-7 15.7c14.5 13.9 35 2.8 35-13.7 0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/> <path d="M14 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v41c0 8.2 9.2 17 20 17s20-9.2 20-20c0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/> </svg>
19. Responsive Images
20. Images that work well on devices with widely differing screen sizes, resolutions, and other such features
22. <img src="sample-image-800w.jpg" alt="Sample Image for medium sized screens">
23. <img srcset="sample-image-320w.jpg 320w, sample-image—480w.jpg 480w, sampleimage—800w.jpg 800w" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px" src="sample-image-800w.jpg" alt="Sample Image for medium sized screens">
25. Flexbox
26. A layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices.
29. .flex-container { flex-direction: row | row-reverse; }
30. .flex-container { flex-direction: column | column-reverse; }
31. .flex-container { flex-wrap: nowrap | wrap; }
32. .flex-container { justify-content: flex-end | flex-start; }
33. .flex-container { justify-content: center; }
34. .flex-container { justify-content: space-between | space-around; }
35. .flex-container { align-items: stretch; }
36. .flex-container { align-items: center; }
37. .flex-container { align-items: flex-start | flex-end; }
38. .flex-container { align-content: stretch; }
39. .flex-container { align-content: center; }
40. .flex-container { align-content: flex-start | flex-end; }
41. CSS Grid
42. CSS Grid layout brings a two-dimensional layout tool to the web, with the ability to lay out items in rows and columns.
52. Progressive Web Apps
54. Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet.
55. Responsive - Fits any form factor: desktop, mobile, tablet, or whatever is next.
57. Reliable - When launched from the user’s home screen, service workers enable a Progressive Web App to load instantly, regardless of the network state.
59. Fast - 53% of users will abandon a site if it takes longer than 3 seconds to load! And once loaded, users expect them to be fast—no janky scrolling or slow-to-respond interfaces.
61. Engaging - Progressive Web Apps are installable and live on the user's home screen, without the need for an app store.
62. Service Workers
63. A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction.
66. if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('/sw.js') .then(function(registration) { // Registration was successful console.log('ServiceWorker registration successful with scope: ', registration.scope); }, function(err) { // registration failed :( console.log('ServiceWorker registration failed: ', err); }); }); }
67. var CACHE_NAME = 'my-site-cache-v1'; var urlsToCache = [ '/', '/styles/main.css', '/script/main.js' ]; self.addEventListener('install', function(event) { // Perform install steps event.waitUntil( caches.open(CACHE_NAME) .then(function(cache) { console.log('Opened cache'); return cache.addAll(urlsToCache); }) ); });
68. self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) .then(function(response) { // Cache hit - return response if (response) { return response; } // IMPORTANT: Clone the request. A request is a stream and can only be consumed once. Since we are consuming this // once by cache and once by the browser for fetch, we need to clone the response. var fetchRequest = event.request.clone(); return fetch(fetchRequest).then( function(response) { // Check if we received a valid response if(!response || response.status !== 200 || response.type !== 'basic') { return response; } // IMPORTANT: Clone the response. A response is a stream and because we want the browser to consume the response // as well as the cache consuming the response, we need to clone it so we have two streams. var responseToCache = response.clone(); caches.open(CACHE_NAME) .then(function(cache) { cache.put(event.request, responseToCache); }); return response; } ); }) ); });
69. HTTP2
70. Non-blocking faster load times for websites
74. Questions?
75. Thank you @bcinarli