Slide 1
Slide 1 text
New Techniques in
Frontend Development
CODES - Coding Summit 2017
Slide 2
Slide 2 text
Bilal Çınarlı
Frontend Architect
Software Engineer @Adidas
@bcinarli
github.com/bcinarli
bcinarli.com
Slide 3
Slide 3 text
Technology Evolves
Slide 4
Slide 4 text
We moved from this
Slide 5
Slide 5 text
…to these in no time
Slide 6
Slide 6 text
Old web sites…
Slide 7
Slide 7 text
New Websites…
Slide 8
Slide 8 text
… for lots of screens and devices
Slide 9
Slide 9 text
SVG
Slide 10
Slide 10 text
Scalable Vector Graphics (SVG) is an XML-based markup language for
describing two-dimensional vector graphics.
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
Slide 13
Slide 13 text
.logo {
background-image: url(bblogo.svg);
}
Slide 14
Slide 14 text
Your browser does not support
iframes
Slide 15
Slide 15 text
Slide 16
Slide 16 text
Your
browser does not support SVGs
Slide 17
Slide 17 text
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
Responsive Images
Slide 20
Slide 20 text
Images that work well on devices with widely differing screen sizes,
resolutions, and other such features
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
Slide 23
Slide 23 text
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
Flexbox
Slide 26
Slide 26 text
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.
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
.flex-container {
flex-direction: row | row-reverse;
}
Slide 30
Slide 30 text
.flex-container {
flex-direction: column | column-reverse;
}
Slide 31
Slide 31 text
.flex-container {
flex-wrap: nowrap | wrap;
}
Slide 32
Slide 32 text
.flex-container {
justify-content: flex-end | flex-start;
}
Slide 33
Slide 33 text
.flex-container {
justify-content: center;
}
Slide 34
Slide 34 text
.flex-container {
justify-content: space-between | space-around;
}
Slide 35
Slide 35 text
.flex-container {
align-items: stretch;
}
Slide 36
Slide 36 text
.flex-container {
align-items: center;
}
Slide 37
Slide 37 text
.flex-container {
align-items: flex-start | flex-end;
}
Slide 38
Slide 38 text
.flex-container {
align-content: stretch;
}
Slide 39
Slide 39 text
.flex-container {
align-content: center;
}
Slide 40
Slide 40 text
.flex-container {
align-content: flex-start | flex-end;
}
Slide 41
Slide 41 text
CSS Grid
Slide 42
Slide 42 text
CSS Grid layout brings a two-dimensional layout tool to the web, with
the ability to lay out items in rows and columns.
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
Progressive Web Apps
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
Progressive - Works for every user, regardless of browser choice
because it's built with progressive enhancement as a core tenet.
Slide 55
Slide 55 text
Responsive - Fits any form factor: desktop, mobile, tablet, or
whatever is next.
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
Reliable - When launched from the user’s home screen, service
workers enable a Progressive Web App to load instantly, regardless of
the network state.
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
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.
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
Engaging - Progressive Web Apps are installable and live on the
user's home screen, without the need for an app store.
Slide 62
Slide 62 text
Service Workers
Slide 63
Slide 63 text
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.
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
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);
});
});
}
Slide 67
Slide 67 text
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);
})
);
});
Slide 68
Slide 68 text
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;
}
);
})
);
});
Slide 69
Slide 69 text
HTTP2
Slide 70
Slide 70 text
Non-blocking faster load times for websites
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
No content
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
Questions?
Slide 75
Slide 75 text
Thank you
@bcinarli