Front-End development technológie

Vo februári 1997 bolo na sieti Internet prístupných milión webov. To bolo pred dvadsiatimi rokmi (tiež som si práve uvedomil aký som starý). Dnes by sme ich rátali v stovkách miliónov. Od tej doby prešiel vývoj webov neskutočnými zmenami. Z jednoduchých prezenčných stránok nakreslených v skicári a oživených HTML, CSS a JavaScript kódom sa stali zložité CMS, LMS, CRM a WTF systémy postavené na niektorých z desiatok back-end technológií. Dáta môžeme ukladať do SQL alebo NoSQL databázy a súbory už nenahrávame jednoducho na server cez FTP, ale používame zložité build systémy, ktoré náš kód najprv otestujú a až potom posunú do produkcie. Aplikácie otvárame na tabletoch, smartfónoch, laptopoch, chladničkách, … – preto je dobré ak majú responzívny dizajn. Aby tej terminológie nebolo málo. Jednému programátorovi to množstvo technológií, s ktorými sa denne stretáva, začína prerastať cez hlavu. Preto sa web vývojári začínajú špecializovať. Dve najvýraznejšie skupiny sú front-end a back-end vývojári. Ďalší by boli full-stack vývojári, DevOps.. Tento text ti pomôže pochopiť, čo je úlohou front-end a back-end vývojára a s akými technológiami najčastejšie tieto dve skupiny vývojárov pracujú. PolopatistickyAk chce programátor postaviť dom, najprv zavolá back-end tím: murára a tesára. Back-end murár mu vybetónuje základy, postaví steny, vymuruje otvory na dvere a okná. Neskôr mu pomôže back-end tesár. Ten postaví strechu. V takomto dome by sa však bývalo ťažko - preto príde front-end tím: maliar a bytový dizajnér. Front-end tím zútulní tehlové steny a zariadi dom – aby všetko vyzeralo parádne, spolu ladilo a hlavne plnilo svoj účel. Ak to premeníme na web-development svet, tak back-end je základom pre našu aplikáciu. Je to skrytá časť aplikácie (používateľ ju nevidí), ktorá úzko spolupracuje so serverom, databázou. Úlohou back-end programátora je tvoriť kód, ktorý je efektívny, zbytočne nezaťažuje server, databázu - napr. aby používateľ nečakal príliš dlho na potrebné dáta. Už dve sekundy sú nekonečno. Front-end je zase tá časť aplikácie, ktorú vidí a pracuje s ňou používateľ. Často je označovaná pojmom User Interface (UI). Úlohou front-end programátora je, aby sa aplikácia zobrazovala každému používateľovi správne a aby mu čo najviac uľahčila prácu s aplikáciou. Front-end programátor vie z tvojho jednoduchého kliku na tlačidlo vyrobiť parádnu animáciu, ktorá ti napr. odkryje ďalšie možnosti práce s aplikáciou. Jazyky, nástrojeVývojári pracujú s mnnožstvom technológií, ktoré sa niekedy menia od projektu k projektu. Diagramy zobrazujú len najpoužívanejšie technológie. Dôležité je rozumieť, že nie všetky technológie z diagramu musí vývojár ovládať - je však dobré o väčšine z nich aspoň niečo vedieť - pri veľkých projektoch môže mať niektorá technológia výhody, iná nevýhody. To je ale na dlhú debatu a mal by to riešiť vývojársky tím interne, najlepšie face-to-face. V žiadnom prípade neodporúčam pýtať sa na sociálnych sieťach, či je lepší React, alebo Vue JS. Nikam to nevedie :)  [Image] Backend technológie [Image] Frontend technológie Samostatnú kapitolu by mohli tvoriť webové frameworky ako Ruby on Rails, Laravel alebo ExpressJS. Tie nám uľahčujú postaviť celú aplikáciu - front-end aj back-end časť. Technológie v Learn2CodeKaždá webová aplikácia má iné nároky a výber technológií často súvisí aj so skúsenosťami a preferenciami tímu riadeného skúseným CTO. Takýto koktejl technológií sme namiešali v Learn2Code pre naše projekty: Front-EndPracujeme s frameworkom Ruby on Rails. S front-end časťou aplikácie nám v Rails pomáha SASS preprocesor, vďaka ktorému máme CSS štýly organizované v komponentoch a veľmi jednoducho sa v nich orientuje. Základ nášho layoutu tvorí framework Bootstrap, ktorého vzhľad je upravený pomocou CSS štýlov - opäť s využitím SASS. Na niektoré časti aplikácie https://skillmea.sk sme nasadili React - prezeranie videí, fórum. V starších projektoch stále využívame jQuery. Uvažovali sme nad experimentovaním s Vue.js, nakoniec túto technológiu neimplementujeme. Yablko však bude robiť online kurz na Vue.js :) React a všetky jeho závislosti spravuje NPM - Node Package Manager a WebPack, ktorý nakoniec vypľuje jeden veľký bundle.js súbor. Back-EndKeďže používame Rails, back-end je písaný v skriptovacom jazyku Ruby. Na testovanie používame RSpec. Používame relačnú databázu PostgreSQL, kde máme uložené všetky dáta. DevOpsAplikácie nám bežia na serveroch Heroku. Obrázky skladujeme na Amazon S3. Video obsah je uložený na serveroch Vimeo, s ktorými komunikuje React prostredníctvom REST API. Kód všetkých projektov skladujeme v privátnych repozitároch na GitHub. Na nekvalitný kód nás neustále upozorňuje RuboCop a JSHint. Nasadenie nových funkcií do hlavnej aplikácie je riadené s pomocou Continuous Integration - CodeShip.com. Niektoré z technológií, ktoré používame možno poznáš. Niektoré z nich ťa dokonca vieme naučiť aj u nás v Learn2Code, stačí pozrieť zoznam kurzov. V ďalších blogoch sa pozrieme na front-end aj back-end detailnejšie. Ak máš nejaké otázky, postrehy alebo si niečomu nerozumel, napíš komentár.

Nemáš diplom z informatiky a chceš byť programátor(ka)? Žiadny problém! Počas môjho interview na pozíciu programátora v Learn2Code nikoho nezaujímalo, čo/kde som študoval. Dôležité boli skúsenosti, portfólio a (snáď) rozumné odpovede na otázky.[Na programovanie nepotrebuješ titul] Kniha o JavaScripte, ktorú som nikdy neprečítalProgramovať webové aplikácie som sa naučil sám. Staval som na základoch zo strednej školy, kde som zistil, že web dokáže “postaviť” aj obyčajný smrteľník. Vtedy sme na hodinách informatiky programovali Pascal, neskôr vo vyššom ročníku aj VisualBasic, alebo C++. Tieto jazyky ma však veľmi nezaujali. Neriešili žiadny zásadný problém v mojom živote, preto nám v task-bare vždy svietil CounterStrike 1.6, alebo Divoké kmene - browserová online hra. V maturitnom ročníku nás však na predmete multimédiá naučili tvoriť jednoduché weby s využitím jazyka HTML a pravidiel CSS. HTML & CSS sú super v tom, že akonáhle zmeníte svoj kód, stačí refresh prehliadača a zmeny vidíte okamžite.  Žiadna kompilácia kódu, žiadne využívanie komplikovaných knižníc na zobrazovanie grafiky. Jednoduchý systém: pravidlo - výsledok. Web tiež stačilo nahrať cez FTP na niektorý z voľne dostupných free hostingových serverov a videl to celý svet. Síce vám to oblepili reklamou od vrchu až dole, ale kamošom som poslal len link a voila... Fotky z dozvukov si mohol pozrieť každý, kto mal internet. Počas predĺžených prázdnin pred štúdiom na vysokej škole som budoval svoju home-page. Chcel som tam veľmi mať moderné vysúvacie menu. Zistil som, že také menu bez JavaScriptu nedám. Kúpil som si teda svoju prvú “programátorskú” knihu: JavaScript - programujeme internetové aplikace. V českom jazyku. Nikdy som sa nedostal za 1. kapitolu: Začíname - stiahol som hotový .js súbor s menu, ktoré vyzeralo tak, ako som chcel. Vôbec som netušil, ako to celé funguje, ale hľadal som. Vtedy ma Google poslal na neskutočný zdroj informácií, web, ktorý som ako jediný prečítal celý: jakpsatweb.cz. Boom!  Guestbook.PHPKeďže web bez knihy návštev nebol webom, skúmal som možnosti. Potreboval som nejaké PHP a to zase potrebovalo nejaké MySQL a nejako to bolo spolu prepojené. Pochopiť princíp PHP a databáz mi pomohol český tutoriál, ktorý som už dnes žiaľ nenašiel. Podarilo sa mi dať dokopy súbor s asi 500 riadkami PHP spaghetti kódu a guestbook.php bol na svete.  Výber vysokej školy nemal nič spoločné s kariérou programátora. Študoval som učiteľstvo anglického jazyka a informatiky na Katolíckej univerzite v Ružomberku. Štúdium učiteľskej informatiky sa veľmi nelíši od stredoškolskej informatiky na technickej škole, takže som sa cez prednášky vrátil k Divokým kmeňom. Moja spolužiačka vtedy hľadala niekoho, kto pomôže jej kamarátovi propagovať webom neziskovú organizáciu, ktorá pomáha africkým deťom. Za peniaze. Keďže som zvládol guestbook.php, zvládnem aj toto. Neveril som vlastným očiam, keď som pri písaní tohoto textu našiel svoju prvú zákazku v živote: LiveAid CZ. Pamätám si, že môj honorár bol 400,- SK. WordPressKeďže som stále snoril okolo PHP, narazil som aj na redakčný systém Wordpress. Ten mi pomohol pracovať efektívnejšie a zvládnuť zákazky rýchlejšie. Pri práci s Wordpress som zvládol aj objektové programovanie v PHP - pomohla mi k tomu výborná kniha od O’reilly: Programming PHP, je to však skôr príručka ako nejaký tutoriál.  Ruby on RailsPočas celej tej doby som bol v kontakte so svojím kamarátom, spolužiakom zo strednej školy. Stále sme debatovali o Apple, IT, programovaní. Jemu PHP nikdy nesedelo. Bol vždy trendy a tiež stále niečo programoval - nevedel som však v akom jazyku. Keďže sme obaja študovali na VŠ (on na FEI STUBA) a bolo pre nás ako študentov pomerne jednoduché dostať sa do USA, využili sme to. Po niekoľkých týždňoch práce sme objednali svoje prvé MacBook Pro. Podstatné na tom celom je to, že on za tie tri mesiace v USA po večeroch naprogramoval vlastnú verziu browserovej hry Babylon (žiaľ, nikdy ju nepublikoval online). Občas spomenul nejaké railsy, ale nikdy som tomu nevenoval pozornosť. Až sme začali kecať a ja som postupne vymenil PHP za Ruby on Rails.  To, že sme investovali do laptopov si všimol aj majiteľ hotela, v ktorom sme pracovali. Dali sme reč, zistili sme, že mu vieme pomôcť s webom pre jeho hotely a odvtedy sme mali teplé miesto v kancelárii, kde sme vytvorili http://angelinnhotels.com/. Webdizajn nič moc, ale nemuseli sme čistiť klimatizácie a izby po Američanoch s nevychovanými deťmi.  VIVANTPo návrate z USA sme s Jozefom komunikovali intenzívnejšie. Vytvorili sme firmu a dostali sme sa k profi zákazke od Ministerstva školstva. Vyhrali sme súťaž na vytvorenie systému na správu neziskových organizácií v rámci SR. Rozdelili sme úlohy a pustili sa do toho. Bolo to vzrušujúce obdobie. Kupovali sme svoj vlastný server, ktorý sme umiestnili do serverovne v Bratislave. S pomocou Jozefovho brata - linuxového guru - sme ho nakonfigurovali. Na vývoj aplikácie sme samozrejme použili Ruby on Rails a databázu PostgreSQL. Bol to prvý seriózny projekt, ktorý však mal aj svoje zazmluvnené termíny. Projekt VIVANT, ako sme ho nazvali, sme dotiahli do úspešného konca. Používa sa dodnes (http://adam.iuventa.sk).  Reštart - online kurzyPočas práce na VIVANT som dokončil vysokú školu a začal pracovať ako učiteľ na ZŠ. Neviem či to bolo správne rozhodnutie, alebo nie. Povedal som si, že programovať budem môcť aj popri práci učiteľa. Kým som učil na polovičný úväzok, tak to aj bolo možné. Neskôr som však zistil, že prácu učiteľa na plný úväzok len ťažko dokážem spojiť s ďalšou mentálne náročnou prácou po večeroch. Učiteľovanie ma však natoľko vzalo, že som postupne prestal programovať takmer úplne. Sledoval som trendy, zaujímal sa o dianie, ale nepracoval som na žiadnom projekte.  Prestávka trvala takmer 6 rokov. Predstava seba - učiteľa na dôchodku - ma neskôr natoľko vystrašila, že som sa rozhodol odísť zo školstva a skúsiť reštart svojho programátorského remesla. Problém bol v tom, že som zameškal dve verzie Ruby On Rails, vo svete PHP pribudol nový dôležitý framework Laravel a zistil som, že svet JavaScriptu je totálne niekde inde ako pred piatimi rokmi - React, Angular, EmberJS, NodeJS... Nič z toho som neovládal. Aj pozostatky know-how spred piatich rokov už boli neaktuálne. Moje vedomosti potrebovali refresh. Zvolil som cestu online kurzov. Vďaka dobrej angličtine som siahol na kurzy Udemy. Neskôr som objavil aj iné portály - Codeschool, Pluralsight, Egghead, Codecademy. Z každého portálu som absolvoval aspoň jeden kurz. Naučil som sa čo je nové v Ruby a Ruby on Rails, ako viem testovať svoje webové aplikácie. Zlepšil som sa v Git. Pochopil som ako funguje JavaScript. Naučil som sa základy EmberJS, React a NodeJS. Zlepšil som svoje vedomosti v oblasti databáz, naučil som sa pracovať aj s NoSQL databázami. Nemusel som nikam chodiť. Všetko som zvládol v pohodlí domova, vlastným tempom. Job v Learn2CodeKeď sa mi ako-tak vrátilo sebavedomie a zrealizoval som zopár malých projektov, na Facebook-u zazdieľal niekto pozíciu Ruby on Rails programátora v Learn2Code. Zlátal som svoj životopis, dostavil sa na interview do veľkého mesta. Rada (CEO) som upozornil na svoju stroskotanú učiteľskú kariéru a porozprával som o svojich projektoch. Rozhodli sa to so mnou skúsiť. Ja neľutujem, Rada sa ale musíte opýtať vy :) Do it! Naučiť sa programovať weby nie je také náročné, ako by sa na prvý pohľad mohlo zdať. Absolvovať online kurzy bolo príjemné a vo väčšine prípadov aj zábavné, niekedy to však bola aj poriadna otrava - treba ale vydržať. Ľudia, ktorí kurzy vyrábajú tam nikdy nedajú vatu, aby natiahli čas. Teraz mám možnosť nahliadnuť aj do Yablkových kurzov a konštatujem, že môj guestbook.php by nemal podobu 500 riadkového spaghetti kódu, keby som mohol môj český tutoriál vymeniť za jeho Webrebel.

Blíži sa podávanie daňového priznania, a preto by sme sa vám radi pripomenuli. Aj tento rok majú zamestnanci, fyzické a právnické osoby možnosť pomôcť nášmu občianskemu združeniu. Darovaním 2% z vašich daní nám pomôžete k tomu, aby sme ďalej mohli poskytovať a šíriť vzdelávanie digitálnych zručností. Občianske združenie Learn2Code funguje od decembra 2012 a naším hlavným cieľom je priniesť kvalitné vzdelávanie v oblasti najmodernejších technológií deťom, študentom, absolventom, uchádzačom o prácu, mladým ľuďom a zároveň každému, kto by sa chcel naučiť ovládať IT jazyk. Aký bol rok 2016?V rámci roku 2016 sme s našim tímom priniesli niekoľko zaujímavých online a prezenčných kurzov, nechýbali ani rôzne akcie a novinky. Spomeňme aspoň zopár z nich. Vytvorili sme niekoľko bezplatných workshopov pre učiteľov, kde sa naučili všetko to, čo potrebujú vedieť pre samostatné vedenie programátorských krúžkov na svojej škole, taktiež získali kompletné materiály a metodické postupy. [Image] Nezabúdame ani na najmenších a aj tento rok sme organizovali programátorské tábory Summer Code Camp, kde sa deti naučili vytvoriť si svoju vlastnú hru. Ako je už pravidlom, tak aj tento posledný rok sme mysleli na ženy, keď sa viac ako 40 žien učilo programovať na Rails Girls v Bratislave. Prišli skúsení mentori nielen zo Slovenska, ale zavítali aj hostia z Prahy a Viedne. Organizátori workshopu mysleli na všetko, dievčatá rozdelili do skupín podľa doterajších skúsenosti s programovaním. [Image] Rails Girls Bratislava 2016  V októbri sme v rámci EU Code Week zorganizovali kurzy na popularizáciu programovania na základných školách, okrem Bratislavy sme zavítali aj do Žiliny, Banskej Bystrice a Košíc.[Image] V roku 2016 sme takisto učili našu najstaršiu generáciu základy práce s počítačom, ako si vyhľadávať na internete a o počítačovej bezpečnosti. Viac o tomto projekte Vnúčik nájdete na webovej stránke. [Image] Čo sme pre vás pripravili v roku 2017V tomto roku pokračujeme opäť s detskými kurzami, v ktorý sa deti vo veku od 8 rokov učia základy programovania v jazyku Scratch, MIT App Inventor alebo dokonca v dospeláckom jazyku JavaScript. Ďalej pokračujeme v príprave rôznych podujatí,, samozrejme nebude chýbať obľúbené podujatie pre ženy Rails Girls alebo súťaž pre programátorov - frontendistov Code in the Dark. Zamerali sme sa opäť viac na učiteľov. Ako? Aj v tomto roku ponúkame vzdelávanie učiteľov cez worskhopy, ktoré sú úplne zadarmo. Na úvod februára 2017 sme pripravili školenie pre učiteľov informatiky, v rámci ktorého predstavujeme interaktívnu vzdelávaciu hru pre deti. Pomocou nej sa deti naučia programovať hravou formou. A to je tiež veľká novinka, ktorú by sme chceli čo najviac rozšíriť na základné školy. Interaktívna vzdelávacia hra GalaxyCodr je zadarmo a deti vo veku od 7 rokov sa pomocou nej učia základy programovania hravou formou.[Image] Tiež sme mysleli na samotné školy a počas roka pripravujeme množstvo vzdelávacích materiálov, ktoré budeme distribuovať na všetky základné a stredné školy na Slovensku úplne zdarma. Ako darovať 2%?Identifikačné údaje o občianskom združení, ktoré je potrebné uviesť v daňovom priznaní alebo ich oznámiť vášmu zamestnávateľovi: Názov: Learn2Code Forma: občianske združenie Sídlo: Vajnorská 100/A, 83104 Bratislava IČO: 42346703 DIČ: 2023850763 Ak ste zamestnanec a nepodávate daňové priznanie: Do 15.2.2017 požiadajte svojho zamestnávateľa o vykonanie ročného zúčtovania zaplatených preddavkov na daň. Požiadajte ho o vystavenie Potvrdenie o zaplatení dane. Ak ste v roku 2016 odpracovali dobrovoľnícky minimálne 40 hodín a získate o tom Potvrdenie od organizácie/organizácií, pre ktoré ste v roku 2016 dobrovoľnícky pracovali, vypočítajte si 3% zo zaplatenej dane. Vyplňte VYHLÁSENIE o poukázaní 2% a obe tlačivá spolu s Potvrdením doručte do 30.4.2017 na daňový úrad podľa vášho bydliska (ak poukazujete 3% z dane, povinnou prílohou je aj Potvrdenie o odpracovaní minimálne 40 hodín dobrovoľníckej činnosti). Ak ste fyzická osoba, ktorá si daňové priznanie podáva sama (SZČO): Ak ste v roku 2016 neboli dobrovoľníkom, alebo dobrovoľnícky odpracovali menej ako 40 hodín, vypočítajte si 2% zo zaplatenej dane (suma musí byť minimálne 3 €). Ak ste v roku 2016 odpracovali dobrovoľnícky minimálne 40 hodín a získate o tom Dobrovoľníctvo-Vysielajúca organizácia 2016 alebo Dobrovoľníctvo-Príjemca 2016, vypočítajte si 3% zo zaplatenej dane. V daňovom priznaní pre fyzické osoby sú kolónky na poukázanie 2(3)% dane v prospech Learn2Code o.z. Riadne vyplnené daňové priznanie doručte do 31.3.2017 na daňový úrad podľa Vášho bydliska a v tomto termíne aj zaplaťte daň z príjmov. Ak ste právnická osoba: Ak do 31.3.2017 darujete na verejnoprospešné účely sumu vo výške aspoň 0,5% svojej dane, môžete poukázať 1,5% dane z príjmu. Ak do dátumu podania daňového priznania nedarujete na verejnoprospešné účely sumu vo výške aspoň 0,5% svojej dane, môžete poukázať iba 1% dane z príjmu. Riadne vyplnené daňové priznanie doručte v lehote, ktorú máte na podanie daňového priznania, na daňový úrad podľa Vášho sídla a v tomto termíne aj zaplaťte daň z príjmov. V prípade akýchkoľvek otázok nám napíšte email alebo zavolajte 0948 828 228. Ďakujeme za podporu našich vzdelávacích aktivít.