Front-End development technologie

V únoru 1997 bylo na síti Internet přístupných milion webů. To bylo před dvaceti lety  (také jsem si právě uvědomil jak jsem starý) . Dnes bychom je počítali ve stovkách milionů. Od té doby prošel vývoj webů neskutečnými změnami. Z jednoduchých prezenčních stránek nakreslených ve skicáři a oživených HTML, CSS a JavaScript kódem se staly složité CMS, LMS, CRM a WTF systémy postavené na některých z desítek back-end technologií. Data můžeme ukládat do SQL nebo NoSQL databáze a soubory již nenahráváme jednoduše na server přes FTP, ale používáme složité build systémy, které náš kód nejprve otestují a teprve poté posunou do produkce. Aplikace otevíráme na tabletech, chytrých telefonech, laptopech, ledničkách, … – proto je dobré pokud mají responzivní design. Aby té terminologie nebylo málo. Jednomu programátorovi to množství technologií, se kterými se denně potýká, začíná přerůstat přes hlavu. Proto se web vývojáři začínají specializovat. Dvě nejvýraznější skupiny jsou front-end a back-end vývojáři. Další by byli  full-stack  vývojáři,  DevOps .. Tento text ti pomůže pochopit, co je úkolem front-end a back-end vývojáře as jakými technologiemi nejčastěji tyto dvě skupiny vývojářů pracují. PolopatistickyPokud chce programátor postavit dům, nejprve zavolá back-end tým: zedníka a tesaře. Back-end zedník mu vybetonuje základy, postaví stěny, vyzdí otvory na dveře a okna. Později mu pomůže back-end tesař. Ten postaví střechu. V takovém domě by se však bývalo těžko – proto přijde front-end tým: malíř a bytový designér. Front-end tým zútulní cihlové zdi a zařídí dům – aby vše vypadalo parádně, spolu ladilo a hlavně  plnilo svůj účel . Pokud to přeměníme na web-development svět, tak back-end je základem pro naši aplikaci. Je to skrytá část aplikace (uživatel ji nevidí), která úzce spolupracuje se serverem, databází. Úkolem back-end programátora je tvořit kód, který je efektivní, zbytečně nezatěžuje server, databázi. aby uživatel nečekal příliš dlouho na potřebná data. Už dvě vteřiny jsou nekonečno. Front-end je zase ta část aplikace, kterou vidí a pracuje s ní uživatel. Často je označována pojmem  User Interface  (UI). Úkolem front-end programátora je, aby se aplikace zobrazovala každému uživateli správně a aby mu co nejvíce usnadnila práci s aplikací. Front-end programátor umí z tvého jednoduchého kliku na tlačítko vyrobit parádní animaci, která ti např. odkryje další možnosti práce s aplikací. Jazyky, nástrojeVývojáři pracují s řadou technologií, které se někdy mění od projektu k projektu. Diagramy zobrazují jen nejpoužívanější technologie . Důležité je rozumět, že ne všechny technologie z diagramu musí vývojář ovládat – je však dobré o většině z nich alespoň něco vědět – u velkých projektů může mít některá technologie výhody, jiná nevýhody. To je ale na dlouhou debatu a měl by to řešit vývojářský tým interně, nejlépe face-to-face. V žádném případě nedoporučuji ptát se na sociálních sítích, zda je lepší React, nebo Vue JS. Nikam to nevede :)  [Backend technologie] [Frontend technologie] Samostatnou kapitolu by mohly tvořit webové frameworky jako Ruby on Rails, Laravel nebo ExpressJS. Ty nám usnadňují postavit celou aplikaci – front-end i back-end část. Technologie v Learn2CodeKaždá webová aplikace má jiné nároky a výběr technologií často souvisí i se zkušenostmi a preferencemi týmu řízeného zkušeným CTO. Takový koktejl technologií jsme namíchali v Learn2Code pro naše projekty: Front-EndPracujeme s frameworkem Ruby on Rails. S  front-end  částí aplikace nám v Rails pomáhá SASS preprocesor, díky kterému máme CSS styly pořádané v komponentech a velmi snadno se v nich orientuje. Základ našeho layoutu tvoří framework Bootstrap, jehož vzhled je upraven pomocí CSS stylů – opět s využitím SASS. Na některé části aplikace https://skillmea.sk jsme nasadili React – prohlížení videí, fórum. Ve starších projektech stále využíváme jQuery. Uvažovali jsme nad experimentováním s Vue.js, nakonec tuto technologii neimplementujeme. Yablko však bude dělat online kurz na Vue.js :) React a všechny jeho závislosti spravuje NPM – Node Package Manager a WebPack, který nakonec vyplivuje jeden velký  bundle.js soubor. Back-EndJelikož používáme Rails,  back-end  je psán ve skriptovacím jazyce Ruby. K testování používáme RSpec. Používáme relační databázi PostgreSQL, kde máme uložena všechna  data. DevOpsAplikace nám běží na serverech Heroku. Obrázky skladujeme na Amazon S3. Video obsah je uložen na serverech Vimeo, se kterými komunikuje React prostřednictvím REST API. Kód všech projektů skladujeme v privátních repozitářích na GitHub. Na nekvalitní kód nás neustále upozorňuje RuboCop a JSHint. Nasazení nových funkcí do hlavní aplikace je řízeno s pomocí Continuous Integration-CodeShip.com . Některé z technologií, které používáme možná znáš. Některé z nich tě dokonce umíme naučit iu nás v Learn2Code, stačí podívat se na seznam kurzů . V dalších blozích se podíváme na front-end i back-end detailněji. Pokud máš nějaké otázky, postřehy nebo jsi něčemu nerozuměl, napiš komentář.

Nemáš diplom z informatiky a chceš být programátor(ka)? Žádný problém! Během mého interview na pozici programátora v Learn2Code nikoho nezajímalo, co/kde jsem studoval. Důležité byly zkušenosti, portfolio a (snad) rozumné odpovědi na otázky. [Na programování nepotřebuješ titul] Kniha o JavaScriptu, kterou jsem nikdy nepřečetlProgramovat webové aplikace jsem se naučil sám. Stavěl jsem na základech ze střední školy, kde jsem zjistil, že web dokáže "postavit" i obyčejný smrtelník. Tehdy jsme na hodinách informatiky programovali Pascal, později ve vyšším ročníku i VisualBasic nebo C++. Tyto jazyky mě však moc nezaujaly. Neřešili žádný zásadní problém v mém životě, proto nám v task-baru vždy svítil CounterStrike 1.6 nebo Divoké kmeny - browserová online hra. V maturitním ročníku nás však na předmětu multimédia naučili tvořit jednoduché weby s využitím jazyka HTML a pravidel CSS. HTML & CSS jsou super v tom, že jakmile změníte svůj kód, stačí refresh prohlížeče a změny vidíte okamžitě.  Žádná kompilace kódu, žádné využívání komplikovaných knihoven pro zobrazování grafiky. Jednoduchý systém: pravidlo - výsledek. Web také stačilo nahrát přes FTP na některý z volně dostupných free hostingových serverů a viděl to celý svět. Sice vám to oblepili reklamou od vrchu až dolů, ale kámošům jsem poslal jen link a voila... Fotky z dozvuků si mohl prohlédnout každý, kdo měl internet. Během prodloužených prázdnin před studiem na vysoké škole jsem budoval svoji home-page. Chtěl jsem tam moc mít moderní vysouvací menu. Zjistil jsem, že takové menu bez JavaScriptu nedám. Koupil jsem si tedy svou první "programátorskou" knihu: JavaScript - programujeme internetové aplikace . V českém jazyce. Nikdy jsem se nedostal za 1. kapitolu: Začínáme - stáhl jsem hotový .js soubor s menu, které vypadalo tak, jak jsem chtěl. Vůbec jsem netušil, jak to celé funguje, ale hledal jsem. Tehdy mě Google poslal na neskutečný zdroj informací, web, který jsem jako jediný přečetl celý: jakpsatweb.cz. Boom!  Guestbook.PHPJelikož web bez knihy návštěv nebyl webem, zkoumal jsem možnosti. Potřeboval jsem nějaké PHP a to zase potřebovalo nějaké MySQL a nějak to bylo spolu propojeno. Pochopit princip PHP a databází mi pomohl český tutoriál, který jsem už dnes bohužel nenašel. Podařilo se mi dát dohromady soubor s asi 500 řádky PHP spaghetti kódu a guestbook.php byl na světě.  Výběr vysoké školy neměl nic společného s kariérou programátora. Studoval jsem učitelství anglického jazyka a informatiky na Katolické univerzitě v Ružomberku. Studium učitelské informatiky se moc neliší od středoškolské informatiky na technické škole, takže jsem se přes přednášky vrátil k Divokým kmenům. Moje spolužačka tehdy hledala někoho, kdo pomůže jejímu kamarádovi propagovat webem neziskovou organizaci, která pomáhá africkým dětem. Za peníze. Jelikož jsem zvládl guestbook.php, zvládnu i toto. Nevěřil jsem vlastním očím, když jsem při psaní tohoto textu našel svoji první zakázku v životě: LiveAid CZ. Pamatuji si, že můj honorář byl 400, - SK. WordPressJelikož jsem pořád snořil kolem PHP, narazil jsem i na redakční systém Wordpress. Ten mi pomohl pracovat efektivněji a zvládnout zakázky rychleji. Při práci s Wordpress jsem zvládl i objektové programování v PHP – pomohla mi k tomu výborná kniha od O'reilly: Programming PHP, je to však spíše příručka než nějaký tutoriál.  Ruby on RailsBěhem celé té doby jsem byl v kontaktu se svým kamarádem, spolužákem ze střední školy. Stále jsme debatovali o Apple, IT, programování. Jemu PHP nikdy nesedělo. Byl vždy trendy a také pořád něco programoval – nevěděl jsem však v jakém jazyce. Jelikož jsme oba studovali na VŠ (on na FEI STUBA) a bylo pro nás jako studenty poměrně snadné dostat se do USA, využili jsme toho. Po několika týdnech práce jsme objednali své první MacBook Pro. Podstatné na tom celém je to, že on za ty tři měsíce v USA po večerech naprogramoval vlastní verzi browserové hry Babylon (bohužel ji nikdy nepublikoval online). Občas zmínil nějaké railsy , ​​ale nikdy jsem tomu nevěnoval pozornost. Až jsme začali kecat a já jsem postupně vyměnil PHP za Ruby on Rails.  To, že jsme investovali do laptopů, si všiml i majitel hotelu, ve kterém jsme pracovali. Dali jsme řeč, zjistili jsme, že mu umíme pomoci s webem pro jeho hotely a od té doby jsme měli teplé místo v kanceláři, kde jsme vytvořili http://angelinnhotels.com/ . Webdesign nic moc, ale nemuseli jsme čistit klimatizace a pokoje po Američanech s nevychovanými dětmi.  VIVANTPo návratu z USA jsme s Josefem komunikovali intenzivněji. Vytvořili jsme firmu a dostali jsme se k profi zakázce od Ministerstva školství. Vyhráli jsme soutěž na vytvoření systému pro správu neziskových organizací v rámci ČR. Rozdělili jsme úkoly a pustili se do toho. Bylo to vzrušující období. Kupovali jsme svůj vlastní server, který jsme umístili do serverovny v Bratislavě. S pomocí Josefova bratra - linuxového guru - jsme ho nakonfigurovali. Na vývoj aplikace jsme samozřejmě použili Ruby on Rails a databázi PostgreSQL. Byl to první seriózní projekt, který však měl také své zasmluvené termíny. Projekt VIVANT, jak jsme jej nazvali, jsme dotáhli do úspěšného konce. Používá se dodnes ( http://adam.iuventa.sk ).  Restart - online kurzyBěhem práce na VIVANT jsem dokončil vysokou školu a začal pracovat jako učitel na ZŠ. Nevím jestli to bylo správné rozhodnutí, nebo ne. Řekl jsem si, že programovat budu moci i při práci učitele. Než jsem učil na poloviční úvazek, tak to také bylo možné. Později jsem však zjistil, že práci učitele na plný úvazek jen stěží dokážu spojit s další mentálně náročnou prací po večerech. Učitelování mě však natolik vzalo, že jsem postupně přestal programovat téměř úplně. Sledoval jsem trendy, zajímal se o dění, ale nepracoval jsem na žádném projektu.  Přestávka trvala téměř 6 let. Představa sebe – učitele v důchodu – mě později natolik vystrašila, že jsem se rozhodl odejít ze školství a zkusit restart svého programátorského řemesla. Problém byl v tom, že jsem zameškal dvě verze Ruby On Rails, ve světě PHP přibyl nový důležitý framework Laravel a zjistil jsem, že svět JavaScriptu je totálně někde jinde než před pěti lety - React, Angular, EmberJS, NodeJS... Nic z toho jsem neovládal. I pozůstatky know-how před pěti lety už byly neaktuální. Mé znalosti potřebovaly refresh. Zvolil jsem cestu online kurzů. Díky dobré angličtině jsem sáhl na kurzy Udemy. Později jsem objevil i jiné portály – Codeschool, Pluralsight, Egghead, Codecademy. Z každého portálu jsem absolvoval alespoň jeden kurz. Naučil jsem se co je nového v Ruby a Ruby on Rails, jak umím testovat své webové aplikace. Zlepšil jsem se v Git. Pochopil jsem, jak funguje JavaScript. Naučil jsem se základy EmberJS, React a NodeJS. Zlepšil jsem své znalosti v oblasti databází, naučil jsem se pracovat is NoSQL databázemi. Nemusel jsem nikam chodit. Všechno jsem zvládl v pohodlí domova, vlastním tempem. Job v Learn2CodeKdyž se mi jak-tak vrátilo sebevědomí a zrealizoval jsem pár malých projektů, na Facebooku zasdílel někdo pozici Ruby on Rails programátora v Learn2Code. Zlátal jsem svůj životopis, dostavil se na interview do velkého města. Rada (CEO) jsem upozornil na svou ztroskotanou učitelskou kariéru a promluvil jsem o svých projektech. Rozhodli se to se mnou zkusit. Já nelituji, Ráda se ale musíte zeptat vy :) Do it! Naučit se programovat weby není tak náročné, jak by se na první pohled mohlo zdát. Absolvovat online kurzy bylo příjemné a ve většině případů i zábavné, někdy to však byla i pořádná otrava – je třeba ale vydržet. Lidé, kteří kurzy vyrábějí tam nikdy nedají vatu, aby natáhli čas. Teď mám možnost nahlédnout i do Yablkových kurzů a konstatuji, že můj guestbook.php by neměl podobu 500 řádkového spaghetti kódu, kdybych mohl můj český tutoriál vyměnit za jeho Webrebel .

Daňová přiznání se blíží, takže bychom vám rádi připomněli. Také v letošním roce mají zaměstnanci, fyzické a právnické osoby příležitost pomoci našemu občanskému sdružení. Darováním 2% vašich daní nám pomůžete dále poskytovat a šířit vzdělávání v oblasti digitálních dovedností. Občanské sdružení Learn2Code funguje od prosince 2012 a naším hlavním cílem je přinést kvalitní vzdělání v nejmodernějších technologiích dětem, studentům, absolventům, uchazečům o zaměstnání, mladým lidem a zároveň všem, kdo by se chtěl naučit mluvit IT. Jaký byl rok 2016?V roce 2016 jsme s týmem přinesli několik zajímavých online a prezenčních kurzů a nezmeškali jsme různé události ani zprávy. Zmiňme alespoň několik z nich. Vytvořili jsme několik bezplatných seminářů pro učitele, kde se naučili vše, co potřebují vědět pro oddělené řízení programových prstenů ve své škole, jakož i kompletní materiály a metodické postupy. [Image] Nezapomínáme na ty nejmenší a letos jsme také uspořádali letní kódové tábory, kde se děti naučily vytvářet vlastní hru. Zpravidla jsme letos mysleli na ženy, když se více než 40 žen naučilo programovat Rails Girls v Bratislavě. Zkušení mentoři pocházeli nejen ze Slovenska, ale také přivítali hosty z Prahy a Vídně. Organizátoři semináře mysleli na všechno, dívky byly rozděleny do skupin podle dosavadních zkušeností s programováním. [Image] Rails Girls Bratislava 2016  V říjnu jsme uspořádali kurzy popularizace programování na základních školách v rámci Týdne EU Code Week a kromě Bratislavy jsme také přivítali Žilinu, Banskou Bystrici a Košice.[Image] V roce 2016 jsme také naučili naši nejstarší generaci základy počítačové práce, jak hledat internet a zabezpečení počítače. Více o tomto projektu Na webu najdete vnitřek. [Image] Co jsme pro vás připravili v roce 2017V letošním roce pokračujeme opět s dětskými kurzy, ve kterých se děti od 8 let učí základům programování v Scratch, MIT App Inventor nebo dokonce JavaScript u dospělých. Pokračujeme v přípravě různých akcí, samozřejmě, že pro ženy Rails Girls nebude žádná oblíbená událost nebo soutěž pro programátory - frontenisty Kód ve tmě. Zase jsme se více zaměřili na učitele. Jak? I v letošním roce nabízíme vzdělávání učitelů prostřednictvím pracovních seminářů, které jsou zcela zdarma. Začátkem února 2017 jsme připravili školení pro učitele informatiky, ve kterém představujeme interaktivní vzdělávací hru pro děti. Díky tomu se děti naučí programovat v hravé formě. A to je také velká novinka, kterou bychom chtěli co nejvíce rozšířit na základní školy. Interaktivní vzdělávací hra GalaxyCodr je zdarma a děti od 7 let jej používají k tomu, aby se naučily základy programování v hravé formě.[Image] Také jsme mysleli na samotné školy a během roku připravujeme řadu vzdělávacích materiálů, které budeme distribuovat všem základním a středním školám na Slovensku zcela zdarma. Jak darovat 2%?Identifikační údaje o občanském sdružení, které mají být uvedeny v daňovém přiznání nebo sděleny vašemu zaměstnavateli: Název: Learn2Code Forma: občanské sdružení Sídlo: Vajnorská 100 / A, 83104 Bratislava IČO: 42346703 DIČ: 2023850763 Pokud jste zaměstnanec a nepodáváte daňové přiznání: Do 15.2.2017 požádejte svého zaměstnavatele, aby provedl roční vypořádání placených daňových záloh. Požádejte ho, aby vystavoval Osvědčení o zaplacení daně. Pokud jste v roce 2016 pracovali dobrovolně minimálně 40 hodin a dostanete se o tom Potvrzení od organizace / organizace, pro které jste dobrovolně pracovali v roce 2016, vypočítejte 3% zaplacené daně. Vyplňte PROHLÁŠENÍ o poukaz 2% a doručte oba formuláře spolu s potvrzením daňovému úřadu podle vašeho bydliště (, pokud poukážete na 3% daně, povinná příloha je také potvrzením práce nejméně 40 hodin dobrovolnictví ). Pokud jste fyzická osoba, která sama podá daňové přiznání ( SZČO ): Pokud jste nebyli dobrovolníkem v roce 2016 nebo jste dobrovolně méně než 40 hodin, musíte vypočítat 2% zaplacené daně ( suma alespoň 3 € ). Pokud jste v roce 2016 pracovali dobrovolně minimálně 40 hodin a dostanete se o tom Organizace pro dobrovolnictví a vysílání 2016 nebo Dobrovolnictví-příjemce 2016, vypočítat 3% zaplacené daně. V daňovém přiznání pro fyzické osoby jsou voucher boxy 2 ( 3 )% daně ve prospěch Learn2Code o.z. Do 31.3.2017 doručte řádně vyplněné daňové přiznání daňovému úřadu podle svého bydliště a v této lhůtě zaplatíte daň z příjmu. Pokud jste právnická osoba: Pokud do 31. března 2017 věnujete částku alespoň 0,5% své daně pro účely veřejné výhody, můžete nahlásit 1,5% své daně z příjmu. Pokud darujete alespoň 0,5% své daně pro veřejné účely až do data podání daňového přiznání, můžete nahlásit pouze 1% své daně z příjmu. Dodejte řádně vyplněné daňové přiznání daňovému úřadu podle svého sídla ve lhůtě, kterou máte k podání daňového přiznání, a v této lhůtě zaplatíte daň z příjmu. Máte-li jakékoli dotazy, napište nám nebo zavolejte na číslo 0948 828 228. Děkujeme za podporu našich vzdělávacích aktivit.