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

New Techniques in Frontend Development

New Techniques in Frontend Development

Talk in CODES Coding Summit 2017

80d92d5d0bd0170aebf6e07589a0b571?s=128

Bilal Çınarlı

April 18, 2017
Tweet

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.
  11. None
  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>
  18. None
  19. Responsive Images

  20. Images that work well on devices with widely differing screen

    sizes, resolutions, and other such features
  21. None
  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">
  24. None
  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.
  27. None
  28. None
  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.
  43. None
  44. None
  45. None
  46. None
  47. None
  48. None
  49. None
  50. None
  51. None
  52. Progressive Web Apps

  53. None
  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.
  56. None
  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.
  58. None
  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.
  60. None
  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.
  64. None
  65. None
  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

  71. None
  72. None
  73. None
  74. Questions?

  75. Thank you @bcinarli