WEB TECHNOLOGIES
IN PRACTICE


Sebastian Sztyper
Lead frontend developer

@ssztyper

BROWSERS






How it's working ?

Dev tools

Dev tools - modify

Protocols
HTTP 1
HTTP 2.0
DDP
REST
SSL


XML
DATA FORMATS
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>JSON
DATA FORMATS

{
"id": 1,
"name": "Foo",
"price": 123,
"tags": [
"Bar",
"Eek"
],
"stock": {
"warehouse": 300,
"retail": 20
}
}REST API

SERVER SIDE









Database

API
Serwer side rendering



CLIENT SIDE
FRAMEWORKS




Javascript


Typescript

GLOBAL TRENDS
INTEGRATIONS
API <-> server
API <-> client

RWD
RESPONSIVE
WEB DESIGN


ELECTRON.JS




ElectronJS
ADVANTAGES
Multiplatform
Performance
Chromium features
HTML+CSS+javascript

ElectronJS
DISADVANTAGES
Native app
Weight
System API - safety
Small group of customers


MOBILE
TECHNOLOGIES
PWA
Apache Cordova
Xamarin
Native Script
React Native
Ionic
... and more :)
PWA
Service workers
Google play
Notification API
Browser features

Bluetooth
Cache API
Sync API
Notification API
ADVANTAGES
PWA
NFC
Support Chrome/Firefox
APP Store
DISADVANTAGES
PWA
EXAMPLES


PWA
EXAMPLES


PWA
EXAMPLES


PWA
EXAMPLES



CORDOVA
WebView (url)
Fast development
Google play
App store
Native functions
Quick effect
ADVANTAGES
CORDOVA
Android developer tools
WebView -> Native functions
Complication plugins (google maps)
DISADVANTAGES

FEATURE

The demand
for technologies
is created by
the needs
of users
FEATURE
TECHNOLOGIES
machine learning
blockchain
performance
safety


Questions
Thank You
Web technologies in practise - basic
By Sebastian Sztyper
Web technologies in practise - basic
- 130