$30 off During Our Annual Pro Sale. View Details »

New Techniques in Frontend Development

New Techniques in Frontend Development

Talk in CODES Coding Summit 2017

Bilal Çınarlı

April 18, 2017
Tweet

More Decks by Bilal Çınarlı

Other Decks in Technology

Transcript

  1. New Techniques in
    Frontend Development
    CODES - Coding Summit 2017

    View Slide

  2. Bilal Çınarlı
    Frontend Architect
    Software Engineer @Adidas
    @bcinarli
    github.com/bcinarli
    bcinarli.com

    View Slide

  3. Technology Evolves

    View Slide

  4. We moved from this

    View Slide

  5. …to these in no time

    View Slide

  6. Old web sites…

    View Slide

  7. New Websites…

    View Slide

  8. … for lots of screens and devices

    View Slide

  9. SVG

    View Slide

  10. Scalable Vector Graphics (SVG) is an XML-based markup language for
    describing two-dimensional vector graphics.

    View Slide

  11. View Slide

  12. height="65" width="68">

    View Slide

  13. .logo {
    background-image: url(bblogo.svg);
    }

    View Slide

  14. Your browser does not support
    iframes

    View Slide


  15. View Slide

  16. Your
    browser does not support SVGs

    View Slide





  17. View Slide

  18. View Slide

  19. Responsive Images

    View Slide

  20. Images that work well on devices with widely differing screen sizes,
    resolutions, and other such features

    View Slide

  21. View Slide


  22. View Slide

  23. sizes="(max-width: 320px) 280px,
    (max-width: 480px) 440px,
    800px"
    src="sample-image-800w.jpg" alt="Sample Image for
    medium sized screens">

    View Slide

  24. View Slide

  25. Flexbox

    View Slide

  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.

    View Slide

  27. View Slide

  28. View Slide

  29. .flex-container {
    flex-direction: row | row-reverse;
    }

    View Slide

  30. .flex-container {
    flex-direction: column | column-reverse;
    }

    View Slide

  31. .flex-container {
    flex-wrap: nowrap | wrap;
    }

    View Slide

  32. .flex-container {
    justify-content: flex-end | flex-start;
    }

    View Slide

  33. .flex-container {
    justify-content: center;
    }

    View Slide

  34. .flex-container {
    justify-content: space-between | space-around;
    }

    View Slide

  35. .flex-container {
    align-items: stretch;
    }

    View Slide

  36. .flex-container {
    align-items: center;
    }

    View Slide

  37. .flex-container {
    align-items: flex-start | flex-end;
    }

    View Slide

  38. .flex-container {
    align-content: stretch;
    }

    View Slide

  39. .flex-container {
    align-content: center;
    }

    View Slide

  40. .flex-container {
    align-content: flex-start | flex-end;
    }

    View Slide

  41. CSS Grid

    View Slide

  42. CSS Grid layout brings a two-dimensional layout tool to the web, with
    the ability to lay out items in rows and columns.

    View Slide

  43. View Slide

  44. View Slide

  45. View Slide

  46. View Slide

  47. View Slide

  48. View Slide

  49. View Slide

  50. View Slide

  51. View Slide

  52. Progressive Web Apps

    View Slide

  53. View Slide

  54. Progressive - Works for every user, regardless of browser choice
    because it's built with progressive enhancement as a core tenet.

    View Slide

  55. Responsive - Fits any form factor: desktop, mobile, tablet, or
    whatever is next.

    View Slide

  56. View Slide

  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.

    View Slide

  58. View Slide

  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.

    View Slide

  60. View Slide

  61. Engaging - Progressive Web Apps are installable and live on the
    user's home screen, without the need for an app store.

    View Slide

  62. Service Workers

    View Slide

  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.

    View Slide

  64. View Slide

  65. View Slide

  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);
    });
    });
    }

    View Slide

  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);
    })
    );
    });

    View Slide

  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;
    }
    );
    })
    );
    });

    View Slide

  69. HTTP2

    View Slide

  70. Non-blocking faster load times for websites

    View Slide

  71. View Slide

  72. View Slide

  73. View Slide

  74. Questions?

    View Slide

  75. Thank you
    @bcinarli

    View Slide