Андрій Вандакуров Team Lead та Senior Developer у ELEKS Наскільки круто бути фронтенд розробником і які задачі вже можна вирішувати знаючи тільки JavaScript, HTML и CSS. Тулзи, підходи і технічки; можливості сучасного фронтенда (клієнський та серверний код, роботи та візуалізація данних).

1. Front end.
Global domination.
by Andrii Vandakurov, tech lead
eleks.com

3. Inventor of the World Wide Web
Had written the three fundamental technologies
that remain the foundation of today’s Web:
● HTML: HyperText Markup Language. The
markup (formatting) language for the Web.
● URI: Uniform Resource Identifier. A kind of
“address” that is unique and used to
identify to each resource on the Web. It is
also commonly called a URL.
● HTTP: Hypertext Transfer Protocol. Allows
for the retrieval of linked resources from
across the Web.
Tim Berners-Lee

4. Internet growth statistic
2000
5%
2007
15%
2014
40%
1995
js
1996
css
1990
web
Important events
2016
46%

5. Browser power

6. Example
Lets create simple chat where
you can communicate with
your friends in real time.

7. WebSocket API
Real time communication

8. Socket.io
JavaScript library for realtime web applications.
Primarily uses the WebSocket protocol with polling as a
fallback option, while providing the same interface.

9. WebRTC API (Real-Time Communications)
Peer to peer connection ( RTCPeerConnection API )

10. WebRTC API (Real-Time Communications)
MediaStream API ( aka getUserMedia ) for video chats

11. Check if user online/offline
navigator.onLine
We can change design based on user online/offline status
if (navigator.onLine) {
console.log('online');
} else {
console.log('offline');
}
window.addEventListener("offline", function(e{ console.log("offline"); });
window.addEventListener("online", function(e) { console.log("online"); });

12. LocalStorage and SessionStorage can use up to 10MB of
storage but the number is actually the sum of both.
Web Storage API
● sessionStorage maintains a separate storage area for each given origin
that's available for the duration of the page session (as long as the browser
is open, including page reloads and restores)
● localStorage does the same thing, but persists even when the browser is
closed and reopened.
// Store
localStorage.myVar = JSON.stringify({"data":1});
// Retrieve
var res = JSON.parse(localStorage.myVar);

13. You can use up to 50MB on desktop, 5MB on mobile for free.
However, the user can allow the limit to be removed by granting
permission.
IndexedDB API
Low-level API for client-side storage of significant amounts of structured data, including
files/blobs. This API uses indexes to enable high performance searches of this data.
var dbName = "todo";
var dbVersion = 1.0;
var todoDB = {};
var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;
todoDB.indexedDB = {};
todoDB.indexedDB.db = null;
if ('webkitIndexedDB' in window) {
window.IDBTransaction = window.webkitIDBTransaction;
window.IDBKeyRange = window.webkitIDBKeyRange;
}
todoDB.indexedDB.open = function() {
var request = indexedDB.open(dbName, dbVersion);
request.onsuccess = function(e) { ... }
}

14. The Database that Syncs!
It enables applications to store data locally while offline, then synchronize
it with CouchDB and compatible servers when the application is back
online, keeping the user's data in sync no matter where they next login.

15. Page Visibility API
Lets you know when a webpage is visible or in focus.
Use cases:
● Stop audio/video playback, animation, data fetching if user leave the page
● Notify user that something important happened while he was on other tab.

16. What about mobile devices ?

17. Add to home screen
Will set icon on your home screen that will run
selected site.

18. Provides an easy way for web content to be presented
using the user's entire screen.
Full Screen API
var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}

19. // manifest.json
{
"short_name": "Kinlan's Amaze App",
"name": "Amazing Application",
"icons": [
{
"src": "launcher-icon-3x.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "launcher-icon-4x.png",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "/index.html",
"display": "fullscreen",
"orientation": "landscape"
}
Web App Manifest
Simple JSON file that gives you,
the developer, the ability to control
how your app appears to the user
in the areas that they would expect
to see apps (for example the
mobile home screen), direct what
the user can launch and, more
importantly, how they can launch it.
// index.html
<link rel="manifest" href="/manifest.json">

20. Adding a Splash screen for
installed web apps
Web App Manifest
Show some awesome splash screen while
you loading your assets and other stuff.

21. Push notifications
Service Workers
Service Worker is a script
that is run by your
browser in the
background, separate
from a web page,
opening the door to
features which don't
need a web page or user
interaction.

22. Offline mode
Service Workers
The reason this is such an exciting API is that it
allows you to support offline experiences, giving
developers complete control over what exactly
that experience is.
Before service worker there was one other API
that would give users an offline experience on
the web called App Cache. The major issue with
App Cache is the number of gotcha's that exist as
well as the design working particularly well for
single page web apps, but not for multi-page
sites. Service workers have been designed to
avoid these common pain points.

23. Providing insight into the device's battery level and status
Battery API
// Get the battery!
var battery = navigator.battery
|| navigator.webkitBattery
|| navigator.mozBattery;
// A few useful battery properties
console.warn("Battery charging: ", battery.charging); // true
console.warn("Battery level: ", battery.level); // 0.58
console.warn("Battery discharging time: ", battery.dischargingTime);
// Add a few event listeners
battery.addEventListener("chargingchange", function(e) {
console.warn("Battery charge change: ", battery.charging);
}, false);

24. This API is clearly targeted toward mobile devices. The Vibration API
would be good for alerts within mobile web applications, and would be
especially awesome when used in games or media-heavy applications.
Vibration API
var supportsVibrate = "vibrate" in navigator;
// Vibrate once for one second
navigator.vibrate(1000);
// Vibrate multiple times for multiple durations
// Vibrate for three seconds, wait two seconds, then vibrate for one second
navigator.vibrate([3000, 2000, 1000]);

25. Makes it easy to add speech recognition to your web
pages.
Web Speech API
var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.onstart = function() { ... }
recognition.onresult = function(event) { ... }
recognition.onerror = function(event) { ... }
recognition.onend = function() { ... }

26. Feature that gives users a fluid and precise scrolling experience for touch
and input devices.
[Styles] Scroll snap points

27. The clip-path CSS property prevents a portion of an element from getting
displayed by defining a clipping region to be displayed
[Styles] Css Clip Path

28. CSS Shapes allow web designers to wrap content around custom paths,
like circles, ellipses and polygons, thus breaking free from the constraints
of the rectangle.
[Styles] Css Shape

29. [Styles] Css Shape

30. Multiply, screen, overlay, and soft light, to name a few can turn boring
opaque layers into beautiful pieces of stained glass.
[Styles] Css Blend Mode

31. [Styles] Css Blend Mode

32. CSS3 allows you to format your elements using 3D transformations.
[Styles] Css 3D

33. Creating 3D worlds with HTML and CSS
[Styles] Css 3D

35. Custom Elements

36. Shadow DOM
This specification describes a
method of combining multiple
DOM trees into one hierarchy and
how these trees interact with each
other within a document, thus
enabling better composition of the
DOM.

37. Web components libraries:
PolymerX-Tag

38. Server Side
Frameworks

39. With Electron, creating a desktop application for your company or idea is
easy. Initially developed for GitHub's Atom editor, Electron has since been
used to create applications by companies like Microsoft, Facebook, Slack,
and Docker.
Desktop apps

40. TV apps
Web apps built for webOS TV are
very similar to standard web
applications. Like the standard
web applications, you can create
web apps for webOS TV using
standards based web technologies
like HTML, CSS, and JavaScript.
Anyone with experience in building
web applications can easily start
developing web apps for webOS
TV.

41. Is the network of physical
objects—devices, vehicles,
buildings and other items—
embedded with electronics,
software, sensors, and network
connectivity that enables these
objects to collect and exchange
data.
[IOT] Internet of Things
Connect to real world!

42. // Arduino
var five = require("johnny-five"),
board, motor, led;
board = new five.Board();
board.on("ready", function() {
motor = new five.Motor({ pin: 5});
board.repl.inject({
motor: motor
});
motor.on("start", function() {
board.wait(2000, function() {
motor.stop();
});
});
motor.on("stop", function() {
console.log("stop", Date.now());
});
motor.start();
});
[IOT] Johnny-Five
Is the JavaScript Robotics &
IoT Platform.

43. var Cylon = require("cylon");
Cylon.robot({
connections: {
arduino: {
adaptor: "firmata",
port: "/dev/ttyACM0"
}
},
devices: {
motor: { driver: "motor", pin: 3 }
},
work: function (my) {
var speed = 0,
increment = 5;
every((0.05).seconds(), function () {
speed += increment;
my.motor.speed(speed);
if ((speed === 0) || (speed === 255)) {
increment = -increment;
}
});
}
}).start();
[IOT] Cylon JS
JavaScript Robotics, Next generation
robotics framework with support for
43 different platforms Get Started

44. QA ?

45. Links:
● History of the Web
● socket.io
● Desktop apps
● webrtc API
● pouchdb
● css blend mode
● TV
● WebComponents