Devel 2018 – Vývojářská konference

Dneska jsem vyrazil na konferenci Devel 2018. Překvapivě se tu dalo skvěle zaparkovat.

Na konferenci vystoupí velmi zvučná jména jako je Jakup Vrána @jakubvrana, David Grudl @DavidGrudl nebo Martin Michálek @machal. Předem se omlouvám za trochu neučesanou formu. Pojmu to pravděpodobně formou zápisků. Pokud budou dotazy, zkusím je zodpovědět v komentáři.

Dokončení posledních příprav

WiFi – jeden malý mínus – zásuvky jeden malý plus 🙂

Prošel jsem registrací, kde mě sice nenašli, ale díky potvrzení v telefonu identifikovali a tak jsem mohl pokračovat do přednáškového sálu. První otázka je kde jsou zásuvky. Je jich celkem dost pod stolem, takže většina lidí připojí své zařízení. A hned druhá otázka. Co WiFi? Všechny sítě jsou zabezpečené a heslo nikde nevidím. Ptám se organizátorů a ty také neví. Tak to zkusím. Jediná síť s pojmenováním Guest je FIT-guest. A nyní střelím heslo. Na první dobrou padlo devel2018 . Takže pokud potřebujete heslo, zde je.

Martin Michálek | @machal | Bootstrap 4

Martin Michálek a Bootstrap 4

Co je nového:

  • SASS
  • FLEX
  • Jednotky REM
  • Reboot
  • Odříznuté staré IE
  • Čistka

SASS – mnohem lépe uspůsobený pro složitější frameworky. Ve světe je mnohem více vývojařů v SASS než v Less. V čechách cca 50 / 50

PostCSS – příliš ranná specifikace a proto zatím není vhodné v něm psát styly. A proto i bootstrap 5 asi nebude v PostCSS

Flexbox – super nástroj na gridy.

REM jednotky

  • px je fixní jednotka. REM je jednotka dinamicka, takže po zvětšení se přizpůsobí i text.
  • Použití: Rem podle dokumentu, em podle rodiče.
  • Výhoda stačí napsat 1.2 rem a nemusí se počítat s původní promněnou s hodnotou velikosti

Reboot:

  • Normalize.css už dnes nemusí být potřebova
  • Native font stack – písmo podle systému
  • Vše v REM
  • Rytmu podle margin-bottom – vše se odsazuje ze spoda

Odříznutí starých IE:

  • IE 8 + 9 + 10 dává u běžného projektu 0,23%
  • Řešit tedy jen IE 11 +

Čistka

  • smazli:
    • panel
    • Thumbnail
    • Ikony
    • Komponenta Well
  • Přidali
    • Komponenta Card
      • Nahrazuje thumbnail a dají se s ní dělat divi

Inovace:

  • Minimum. Frontend je aktuálně stabilizovaný obor.

Užitkové třídy:

  • Pokud class obsahuje jednotlive sady vlastnosti (margin, padding, barva pozadí, popředí, …) class=“mb3 f6 …“ = margin-bottom: 3; font-size: 6 px
  • Jen pro vybranou sadu vlastnost
  • Chcete co nejrychleji tvořit UI
  • Chcete co nejméně psát css

Na co se bootstrap hodí (kam s ním?):

  • Bootstrap expo: seznam hezkých webů postavených na bootstrapu
    • Samotný web je postaven na bootstrapu ale jen na nejzákladnějších třídach
  • Málo firem umí udělat pěkný web na bootstrapu. Většinou to je proto, že to chtěl klient
  • Bootstrap je vhodný na aplikace a není vhodný na weby

Co je špatně:

  • Primarní barva je v bootstrapu modrá
  • Takže pokud se pužije červené tlačítko na close, tak vypadá dominantněji
  • Boobtstram obsahuje technickou dokumentaci, ale neobsahuje systém designu.
  • Je vhodné se podívat na Material Design, kde je pospáno, kde se co má jak používat. Ale nemá tak dobrou dokumentaci technickou jako Bootstrap

Bootstrap 4 je pořád nejpropracovanější knihovna pro web.

Začíná mu chybět systém designu, kde by se mohl učit například od Material Designu.

FAQ?

Přejít z z v3 na v4? Podle náročnosti přechodu.

Chcete systém designu? Kouknout na Material Design

Pokud se neřeší vzhled, tak bootstrap je vhodnější pro použití.

Otázky:

Vadí naimplementovaný bootstrap bez sassu? Nevadí. Je to v pohodě a to i v případě všech závislostí. Ale optimální je alespoň povypínat komponenty, které se nepoužívají.

Co se musí udělat při migraci? Poupravit třídy col, nový breakpoint. Uprava html, refaktarizace ikonek, navigační lišta se hodně změnila.

Tomáš Vondra | @fuzzycz | PostgreSQL

PostgreSQL 9.6+ – paralelizace – schopnost využít více procesorů pro vykonání dotazu

  • Ve verzi 9.6:Tomáš Vondra - PostreSQL
    • je paralelizace defaultně vypnutá
    • Podporované  paralelní operace:
      • Sekvenční sken
      • Hash Join
      • Nested Loop
      • Agregace
      • Gather (nová operace)
  • Ve verzi 10:
    • Ve výchozím stavu zapnutá
    • Další nové podporované paralelní operace:
      • Index scan
      • Bitmap Heap Scan
      • Merge Joins
      • Gather Merge (nová operace)
  • Ve verzi 11:
    • Vylepšení operací podporující paralelní exekuci
    • Hlavní vylepšení je Hash Join  – umí worker procesy, umí sdílet Hash tabulku
    • Vylepšeno:
      • Create index
      • Create table … as …
      • Create materialized view
      • Některé dotazy s Union

Stále má paralelizace omezení, nelze paralelizovat:

Insert, delete, update

PostgreSQL 11 umí paralelizovat Create table … as Select …

DDL (create/alter/drop/…) zatím nelze paralilozovat. PostgreSQL 11 už umí create index

Cursor – vypne paralelizaci – všechny dotazy co mohou usnout, vypnou paralelizaci

Paralelizace dokáže lineárně zkrátit dobu zpracování dotazů.

Deklarativní partitioning

  • Od verze 10
  • Použitelné to bude až ve verzi 11
  • Pomocí pravidel lze nadefinovat tabulku a rozdělit ji na nějaké části. Pak se snáze zálohuje a nebo umazává
  • Lze optimalizovat dotazy. Joinovat jen některá data třeba podle měsícu. Ušetří spoustu času
  • Horizontální škálování – umístění partition na jiný stroj
  • FDW – umožní komunikaci s jinou i non-PostreSQL databází
  • Dříve se to dalo obejí pomocí triggerů a inherit vazeb. Nyní je pro to deklarativní partition.
  • PostgreSQL11
    • Partiotion by hash
    • Defaultní partition, která se založí
    • Update může přesouvat data mezi partitions
    • Podpora Primary/foreign key, indexů, triggerů (s omezením)
  • Pokud budu chtít převést data s nopartition d opartition, musí vytvořit nový model, kde definuji podmínky pro partitions a pak už jen insert select.

Daniel Steigerwald | @steida | GraphQL

Github.cz/este/este – Výukové projekty a ukázky aplikací.

– kód je dokumentace 😀

Graphql.github.io

Deklarativní, typová data

REACT – označil za nejlepší UI technologii

GraphiQL endpoint je samopopoisný, hned se dozvíte co můžete dělat a co ne. Je tam autocomplete

Má super best practities:

  • Sosám jen to co potřebuji na frontu
  • Pokud něco potřebuji, tahám to jen v jednom requestu

Zeit.co

  • V dokumentaci má super příklad na to jak vytvořit GraphQL server a jak to zprovoznit celé.

Prisma.io

  • Pomocí SDL se definuje celá databáze
  • Díky tomu se vygeneruje kompletní api pro práci s daty

Relay – framework pro vývoj. Vygeneruje typy k GraphQL objektům

Brzo bude mít školení na GraphQL

Jakub Nešetřil | @jakubnesetril | Máte na víc než si myslíte!

Vícepresident v OracleJakub Nešetřil - Máte na víc než si myslíte!

Zakladatel a tvůrce apiary

Průvod historií internetu… vývoj prohlížečů: Netscape ->Internet explorer -> Mozilla -> Firefox -> Safary -> Chrome

Proč jsou programátoři tak žádaný? Protože mají moc ovlivnit masy.

V zahraničí to už funguje. Opensorce scéna popohnala stát a dohnaly elektronickou dobu.

Představil projekty jako je hlídač státu. Pomohl voličům s voličskými průkazy, ovlivnil stabilitu aplikace pro veřejné zakázky.

Zajímavá přednáška o možnostech a potenciálu programátorů. Zde ukázal, že jen jako programátoři můžeme měnit životy i celý svět. Jsou malé One man show projekty, které odkoupili korporáty jako Google, Microsoft a další, protože měnili lidem životy. A stačí na to jen jeden malý nápad a nadšení pro kód.

David Grudl | @DavidGrudl | Open source

David Grudl - Open sourceProč používat OS?

  • Zdarma
  • Neřeší se licence
  • Možnost zásahu do kódu
  • Lze převzít vývoj ale nikdo nechce

Proč vyvýjet Open source?

  • Je to zábava
  • Můžeme tím zlepšit svět
  • Memetika – máme radost z toho, že naše nápady můžou zapracovat

Co nám vadí na OS?

  • Dokumentace
  • Neřešení chyb
  • Chybějící odpovědnost
  • Nepřátelské prostředí pro přijetí nových návrhů

Ondřej Žára | @0ndras | CSS

  • Onřej Žára - CSS@supports – obalení CSS pravidel do tzv. feature queries – prohlížeč vykoná ten blok css jen když je pro něj validní
    • JS API css.supports() pro JS
  • currentColor – barva na kterou je barva na prvku aplikovana
    • Díky implementaci převezme barvu prvku z rodiče
  • object-* – Upřesnění rozměrů a pozic pro tzv. replaced elements
    • Object-fit: contain;
    • Object-position: rigth bottom
    • Nadefinuji požadovanou šířku / výšku a poté určíme, jak se má obrázek zachovat
  • attr() – generování obsahu pomocí CSS. Použije se v ::before nebo afeter. Pomocí content: pak můžeme vypsat obsah
  • :scope – pseudotřída patřící prvku, vůči kterému se selektor vyhodnocuje
  • ch – délková jednotka. Šířka znaku 0 v písmu. Takže třeba 2ch je délka jako 2 nuly vedle sebe
  • @counter-style – definice vlastního stylu pro čítače. Možnosti použití s list-style a counter()
  • @page – parametrizace stránky při tisku
    • Nemusí být v tiskovém stylu
  • [ i] – atribut selecktor dovoluje testovat podmnožinu hodnoty. Normálně je case sensitive, ale pokud přidám mezera i tak to bude insenzitice
  • tab-size – vlastnost jak bude široký <tab>. Výchozí hodnota je 8 mezer.

Roman Schejbal | @romanschejbal | ReasonML

Roman Schejbal - From madness to ReasonNavrženo ve Facebooku

Vypadá jako JavaScript

Typovaný jazyk

Vychází z OCaml.

Velmi bezpečný jazyk

Neumožní vytvoření chyby nebo opomenutí handlování chyby. Ihned nám to pak hlásí chybu a to včetně způsobu řešení.

Jako jazyk to  bude velmi bezpečné a hodně konkrétní. Přijde mi hodně ukecané. Spíš bych se stále vydával cestou REACT-Redux. Jeho obrovskou výhodou je maximální snížení chybovosti. Je v tom napsaný například Facebook messenger

Jakub Vrána | @jakubvrana | Dokazatelná bezpečnost

Jakub Vrána - dokazatelná bezpečnostInquisition – automatický test bezpečnosti využívaný v google. Podstrkuje neočekávané vstupy do aplikace

Problematická místa v DOM:

  • .innerHTML
  • document.write()
  • eval()
  • location.href
  • script.src
  • window.open

V google se rozhodly tyto konstrukce zakázat. Všechen kód se kompiluje. V kompilátorech jsou hooky kde se konstrukce zakázaly. Díky hooku se pak v těch nebezpečných vstupech vždycky vstupy escapují a ignoruje se tedy noescape.

Díky tomu se zamezí XSS

Protocol buffer posílá oproti json samotný data. Json posílá key : value . Protocol buffer pošle jen data a tím se ušetří data.

Martin Hochel | @martin_hotell | React &TypeScript

Martin Hochel - React & TypeScriptHodně zajímavý livecodding. Využití Reactu a TypeScriptu v praxi. Velmi efektivní kódování a hlavně celkem bezpečné. Ukázka toho, jak využít opakovaně komponenty a přepsat komponenty na minikomponenty, což zvýší možnost využit a rozšiřitelnosti kódu. Dle doporučení přednášejícího by komponenty měly být od malých komponent nabalujících další komponenty na sebe.

Tomáš Zvěřina | @tomucha | Flutter.io

Tomáš Zvěřina - Flutter.ioNa závěr jedna z nejvtipnějších přednášek… 🙂

Píše se v Dartu

Je to od google

Flutter 1 != ‚1‘

Reaktivní UI z widgetů

Kompiluje AOT do ARM strojáku

  • Díky tomu i 120 FPS, protože to jde přímo na GPU

Deploy na iOS i Android

Pojmenované parametry. Lze nastavit výchozí hodnoty funkcí a pak si při volání přenastavit c opotřebuji.

UI se kreslí na canvas.

  • přímí zápis na GPU
  • Material design si řeší sám

Všechno je widget

Podporuje HotReload při vývoji

  • Funguje jak v emulatoru tak i na kabelu v zařízení
  • Při reloadu se nepřijde o stav

Postřehy závěrem

Celkem se mi zadařil i pokec mimo přednášky. O pauze jsme se se s Romanem Schejbalem pobavil na téma React, Redux, TypeScrit, ReasonML, GraphQL. Následně jsme se s Martinem Michálkem potkaly na schodech a prohodil pár slov o front-endu. Jen je škoda, že jsem si zapomněl vzít s sebou knížku k podpisu.