Основні технології HTML5 & CSS3 Flex та Grid CSS CSS препроцесори Git & GitHub Знання про веб-технології та мережу інтернет JavaScript JavaScript Core (DOM, AJAX, JSON) REST API Алгоритми та структури даних Фреймворки JavaScript Інструменти керування станом програми (State Management) TypeScript Основи Figma Англійська мова Необов’язкові технології Патерни проєктування JavaScript Лінтери Тестування Webpack Gulp / Grunt SOLID принципи Зарплати FrontEnd розробників Підсумки FrontEnd – одна з найлегших професій розробника в ІТ. Вона вигідно вирізняється тим, що поєднує в собі програмування та творчість, оскільки девелопер працює над оживленням дизайнерського макету та створенням відповідної користувацької логіки. Також перевагою фронтенду є те, що побачити результат своєї роботи можна майже одразу – в будь-якому браузері. Відносна легкість фронтенду породжує велику популярність серед бажаючих потрапити в ІТ, а враховуючи наслідки відкритої агресії по відношенню до України – особливо велику популярність, адже це можливість працювати віддалено (на ІТ-компанію або на фрилансі) і отримувати гарну зарплату. Відповідно, конкуренція серед Trainee/Junior FrontEnd розробників шалена, а тому роботодавці вимушені закручувати гайки і підвищувати вимоги до кандидатів, аби відібрати найкращих.   Тож як стати фронтенд розробником? Якими технологіями необхідно володіти, аби стати Intern/Junior FrontEnd розробником у 2023 році? Проаналізувавши вакансії на українському ринку айті, ми склали список актуальних інструментів, які зазвичай вимагають роботодавці від кандидатів. Їхній перелік – нижче у статті. Frontend developer roadmap. Основні технології HTML5 & CSS3 HTML5 і CSS3 – це фундаментальні технології, без знання яких не обійтися жодному веб-розробнику. За допомогою мови гіпертекстової розмітки HTML створюється розмітка (каркас) кожної веб-сторінки. Потім мова стилів CSS збагачує візуальне оформлення сайту і надає йому привабливого та ефектного зовнішнього вигляду. Крім цього, необхідно володіти: кросбраузерним адаптивним верстанням, щоб вміти створювати сайти під мобільні пристрої, планшети і широкоформатні екрани та для різних браузерів; семантичним верстанням для підвищення якості розмітки та покращення пошукової індексації сайту; валідним верстанням, яке передбачає повну відповідність коду розробника всім стандартам W3C - організації, яка створює та впроваджує технологічні стандарти для World Wide Web. Приділіть особливу увагу верстанню під мобільні пристрої, тому що сучасний веб-споживач дуже багато часу проводить у смартфоні. Існує навіть спеціальний підхід, при якому спочатку верстається веб-сайт під мобільні пристрої, а потім під десктопи – називається Mobile First. Це загальні вимоги щодо верстання. Тепер розглянемо більш детально вимоги безпосередньо щодо мови стилів – CSS. Тут ви повинні знати основні властивості CSS3: фони, градієнти, тіні, анімації, трансформації, переходи, а також технології Flex та Grid, про які ми ще поговоримо. Гарне володіння HTML та CSS вже дозволяє займатися верстанням сайтів та заробляти гроші. Саме з цих двох базових технологій починається шлях до професії FrontEnd розробника. Якісно вивчити HTML та CSS ви зможете за допомогою наступних наших курсів: HTML5 & CSS3 Стартовий; HTML5 & CSS3 Базовий; HTML5 & CSS3 Поглиблений. Flex та Grid CSS Технології верстання надійних адаптивних веб-сторінок, які дозволяють легше створювати динамічні сайти та зручніше структурувати їх вміст. Найкраще Flex-верстання в дії показує інтерактивний сайт flexboxfroggy.com, а Grid-верстання – cssgridgarden.com. На нашому ресурсі також є курси, які гарно пояснюють теми Flex та Grid верстання: "Верстання сайту на CSS Grid", "Верстання сайту на FlexBox CSS". CSS препроцесори CSS препроцесор — це програма, яка має власний синтаксис, але може згенерувати з нього CSS-код. Найпопулярнішими вважаються SASS, Stylus, LESS і PostCSS, проте найбільше ком'юніті саме у SASS. Препроцесори призначені для: прискорення процесу написання коду; спрощення читання коду та його подальшої підтримки; мінімізації рутинної роботи під час написання коду. Для підвищення ефективності написання CSS-коду цілком достатнім буде вивчення лише одного препроцесора. Git & GitHub Git - найбільш популярна система контролю версій, яка дозволяє вести історію розроблення проєкту з можливістю доступу до кожної збереженої версії. Крім того, варто вміти працювати з сервісом онлайн-хостингу проєктів, який використовує систему контролю версій. У даному випадку це GitHub. У тандемі з Git він дозволяє розробникам зберігати свій код онлайн у хмарному сховищі, а потім взаємодіяти з іншими розробниками у різних проєктах. Дані системи дозволяють команді програмістів працювати над одним проєктом одночасно, зберігаючи внесені зміни, і навіть відслідковувати виконання завдань кожним членом групи. Git & GitHub — дуже важливі інструменти для будь-якого IT-розробника, вивченням яких слід зайнятися якомога раніше. Ми рекомендуємо вивчати Git на ITVDN за допомогою курсу «Основи роботи з Git». Знання про веб-технології та мережу інтернет Щоб якісно виконувати свою роботу, фронтенд розробник повинен розбиратися у вебі і розуміти принципи його функціонування. Таким чином, необхідно знати: як працює інтернет; протоколи HTTP/HTTPS, веб-сокети; як працюють браузери; що таке DNS та як він працює; що таке доменне ім'я; що таке хостинг. Також буде непогано, якщо ви спробуєте налаштувати сайт на якомусь безкоштовному хостингу, прив'яжете домен до цього хостингу. JavaScript Мова програмування, яка використовується як при розробленні клієнтської сторони веб-застосунку, так і серверної. За допомогою JavaScript (скорочено JS) можна писати навіть настільні та мобільні додатки, використовуючи певні програмні платформи та бібліотеки. Ця мова дозволяє: динамічно змінювати HTML-розмітку; здійснювати інтерактивну взаємодію з користувачем; анімувати зображення; здійснювати валідацію форм; керувати мультимедіа тощо. Іншими словами, JavaScript "оживлює" сторінку та додає їй функціональності. Гарне володіння цією мовою програмування є обов'язковим пунктом для кожного FrontEnd розробника. JavaScript використовує офіційний стандарт ECMAScript (скорочено - ES), який має на увазі певний формальний опис синтаксису, базових об'єктів та алгоритмів. На даний момент існує багато різних версій ES. Роботодавці найчастіше вимагають знання ES6+. Однак спочатку необхідно вивчити чистий JavaScript (vanilla JavaScript) і лише потім вникати в нові стандарти. Як не крути, а класику треба знати. Завдяки гарному володінню JS можна швидко розібратися в будь-якій версії ES, а потім опанувати будь-який фреймворк або бібліотеку. ITVDN надає можливість вивчити JavaScript з нуля до поглибленого рівня за допомогою курсів: JavaScript Стартовий; JavaScript Базовий; JavaScript: Розширені можливості. JavaScript Core (DOM, AJAX, JSON) DOM (Document Object Model) – об'єктне представлення вихідного HTML-документу. Ключовим є поняття DOM-дерева, яке описує структуру сторінки. За допомогою об'єктної моделі JavaScript отримує повну владу над HTML-документом: можливість редагувати, видаляти та додавати елементи і атрибути HTML, змінювати CSS-код тощо.   AJAX (Asynchronous JavaScript And XML) – це синтез технологій JavaScript і XML, який фактично являє собою комбінацію: вбудованого в браузер XMLHttpRequest-об'єкту (щоб запитувати дані з веб-сервера); JavaScript та HTML DOM (щоб відображати або використовувати дані). AJAX дозволяє веб-сторінкам здійснювати асинхронне оновлення, обмінюючись даними з веб-сервером. Завдяки цій технології сторінка не потребує перезавантаження – оновлюється лише конкретна її частина (згадайте стрічку новин у соціальних мережах). JSON (JavaScript Object Notation) – це загальний формат обміну даними. Дозволяє здійснювати обмін інформацією між програмними продуктами, котрі написані різними мовами. Таким чином, клієнт, який використовує JavaScript, може легко передавати дані на сервер, реалізований за допомогою Ruby/Java/PHP. Всі три технології мають особливу цінність для кожного веб-розробника та розкривають організацію роботи інтернет-застосунку. REST API API – Application Programming Interface – це набір правил, при дотриманні яких програми можуть між собою взаємодіяти. Розробник створює API на сервері та дозволяє клієнтам звертатися до нього. Красномовним прикладом буде API від Google Maps, котрий дозволяє веб-розробнику вказати на гугл мапі розташування певної будівлі (точку видачі інтернет-замовлень, офіс компанії абощо) на своєму сайті. Таким чином програміст позбавляє себе необхідності самому розроблювати власну мапу і користується вже готовим рішенням від Google, використовуючи набір правил від API. REST – Representational State Transfer – це архітектурний підхід, котрий регламентує, як саме API мають виглядати. Цьому набору правил має слідувати девелопер під час створення власного застосунку. Простими словами, REST – це звичайний запит виду «клієнт-сервер» з використанням HTTP-протоколу. Фронтенд розробнику необхідно розбиратися у REST API, оскільки ця технологія використовується усюди, де є необхідність працювати з даними від сервера. Алгоритми та структури даних Розуміння алгоритмів та структур даних – обов'язок будь-якого грамотного програміста. До структур даних відносяться: стеки, черги, зв'язані списки, графи тощо. Вивчивши їх, ви зможете керувати складністю своїх програм, роблячи їх більш доступними для розуміння, а також розробляти високопродуктивні програми, які ефективно працюватимуть з пам'яттю. Знання алгоритмів дозволить вам створювати складні конструкції для ефективного розв'язання широкого спектра завдань. Коли говорять про алгоритми, зазвичай мають на увазі алгоритми сортування та пошуку: сортування прямим включенням, прямим вибором, злиттям, пірамідальне, прямий пошук, бінарний, індексно-послідовний та інші. Важливо розумітися і на нотації Big O, яка описує складність кожного алгоритму. Даний механізм допомагає визначити, за яких умов вигідніше використовувати той чи інший алгоритм. Зазначимо, що як новачкові, вам не треба пірнати вглиб цих тем. Буде достатньо теоретичного володіння, розуміння, де яку структуру даних слід використати, а також уміння написати декілька алгоритмів. У розробленні сайтів це не дуже потрібно, але практично жодна співбесіда не оминає тему алгоритмів і структур даних. Фреймворки JavaScript Це інструменти, за допомогою яких створюються динамічні веб-/мобільні/десктопні застосунки мовою JavaScript. Вони прискорюють розроблення веб-додатків та передбачають чітко структуровану організацію коду, підвищуючи його якість та чистоту. Найпопулярнішими фреймворками для фронтенд розроблення можна назвати Vue.js, Angular та бібліотеку React. Кожен із них призначений для вирішення свого спектру завдань і має різний ступінь складності: Vue.js – найлегший (але й з найменшою спільнотою), React – середньої складності, Angular – високої складності. Варто сконцентруватися на глибокому вивченні одного фреймворку, але в той же час дуже рекомендується знати особливості та сферу застосування всіх перерахованих вище технологій. Який фреймворк все ж обрати? Думки щодо цього розходяться. Інструментарій вибирається індивідуально під проєкт та важко передбачити, які задачі вам потрібно буде вирішувати. На даний момент найбільшою популярністю користується React, оскільки він збалансований як з точки зору складності, так і з точки зору багатства функціоналу. До того ж найбільша кількість вакансій припадає саме на цей фреймворк, а значить, що він цікавий не тільки розробникам, а й бізнесу. Кожен із фреймворків доступний для вивчення на платформі ITVDN. За напрямком Angular: Angular 11.0 Базовий; Angular Поглиблений. За напрямком React: React Базовий; React Поглиблений. За напрямком Vue.js: Vue.js Стартовий; Vue.js Базовий. Інструменти керування станом програми (State Management) Великі веб-застосунки постійно зростають у складності, а тому зберігати дані, які можуть використовуватися в різних місцях, стає все складніше. Для вирішення цієї проблеми були вигадані окремі бібліотеки, що йдуть паралельно з фреймворками — вони служать для управління глобальним сховищем даних усього веб-застосунку і називаються менеджерами станів. Їх застосування вже стало стандартом у FrontEnd розробленні. Для девелоперів, які використовують Vue.js, це VueX, для React-розробників – Redux і MobX, для Angular-девів – RxJS, NgRx. TypeScript Кросплатформна строго типізована мова, яка є розширенням JavaScript. Строга типізація дозволяє зменшити кількість потенційних помилок у вихідному коді, написаному на TypeScript. Також ця мова реалізує концепції, які близькі до об'єктно-орієнтованих мов, таких як C#, Java та подібних. TypeScript підвищує швидкість та зручність написання комплексних програм, внаслідок чого їх стає легше підтримувати, масштабувати та тестувати. У вакансіях ця мова зустрічається досить часто незалежно від цільового фреймворку. При цьому для Angular розробників знання TypeScript є обов'язковим. Через високу затребуваність даної мови ми помістили її у список обов’язкових для вивчення. Основи Figma Figma – це популярний дизайнерський інструмент для створення інтерактивних прототипів застосунків або веб-сайтів. З його допомогою дизайнер створює дизайн, який фронтенд-розробник потім верстає за допомогою HTML/CSS і додає інтерактивність при участі JavaScript. Знання основ фігми дозволяє девелоперу зручно взаємодіяти з дизайнерським прототипом: швидко дізнаватися необхідні розміри тих чи інших елементів, робити експорт картинок та іконок тощо. Додатковий плюс – можливість використання браузерної версії Figma. Англійська мова План навчання Front-end повинен обов'язково включати підтягування English. Знання англійської є однією з основних вимог до фронтенд-розробника, оскільки велика кількість корисної інформації знаходиться саме на англомовних сайтах. Рівень читання технічної документації буде достатньо для комфортного користування іноземними ресурсами (Intermediate). Однак чим вищий рівень вашої англійської, тим більші шанси отримати job-офер. Інгліш використовується не тільки при роботі з документацією, а і при комунікації з командою та клієнтами. Серед програмістів побутує вислів: «Яку мову програмування слід вчити першою? Вчи англійську!». Тому не пошкодуйте ваш час і гарненько підтягніть англійську – цілком можливо, що саме гарне володіння нею стане вирішальним при розгляді вашої кандидатури. Необов’язкові технології Патерни проєктування JavaScript Це найкращі практики, які описують типові способи вирішення поширених завдань, що виникають під час проєктування програмного забезпечення. Знання шаблонів проєктування дозволяє писати більш чистий, зрозумілий і читабельний код, а також уникати "винайдення велосипеда". Більше того, володіння патернами показує вашу грамотність як розробника і підвищує вашу цінність в очах роботодавця, що допоможе виділитися на тлі конкурентів. Щоб ви могли добре розібратися з темою шаблонів JavaScript, рекомендуємо курс “JavaScript Шаблони”. Лінтери Інструменти, які дозволяють аналізувати якість JavaScript-коду відповідно до стандарту ES. Вони вбудовуються в середовище розроблення і вказують на наявність невідповідностей стандарту коду, якщо такі є. Даний механізм корисний як для одноосібного розроблення (для самоконтролю), так і для командного, коли кожен розробник повинен слідувати тим самим мовним конструкціям, аби на виході отримати єдиний, цілісний проєкт. Один із найвідоміших лінтерів – ESLint. Це необов’язковий інструмент для роботодавця, але він дуже корисний для веб-розробників у силу його можливостей з контролю якості коду. Тестування Jest та Cypress– головні інструменти модульного тестування, яке покладається на плечі розробника. Але що це таке? Unit тестування (воно ж – модульне тестування) – процес, який полягає у створенні тестів для перевірки працездатності окремих ділянок написаного програмістом коду. Виконується безпосередньо автором коду. Яку користь приносить Unit тестування: суттєве скорочення багів у коді; спрощення рефакторингу коду; забезпечення якісного відокремлення інтерфейсу від реалізації; краще розуміння написаного коду; можливість протестувати найдрібніші ділянки коду. Усі інструменти вчити не треба — достатньо навчитися працювати лише з одним із них. Webpack Потужний збирач модулів, який дозволяє скомпілювати в один файл кілька різних модулів. Використовується для роботи над об'ємними проєктами. Успішно використовується як у фронтенд-розробці, так і при створенні бекенду. Gulp / Grunt Системи збирання, які автоматизують рутинні завдання розробників: мініфікацію коду, оптимізацію зображень, тестування, аналіз якості коду та інше. Підходять для розроблення невеликих проєктів. SOLID принципи SOLID – це принципи, які є своєрідним ременем безпеки для тих, хто працює відповідно до парадигм об'єктно-орієнтованого програмування. Вони були створені з метою убезпечити ООП-орієнтованого розробника від незрозумілого, заплутаного спагеті-коду, який також ще й дуже важко підтримувати. SOLID - це акронім, який складається з п'яти букв, що кодують п'ять основних принципів: S - Single Responsibility Principle (принцип єдиної відповідальності) O - Open-Closed Principle (принцип відкритості-закритості) L - Liskov Substitution Principle (принцип підстановки Барбари Лісков) I - Interface Segregation Principle (принцип розділення інтерфейсу) D - Dependency Inversion Principle (принцип інверсії залежностей) Володіння цими принципами дозволяє грамотно проєктувати та розробляти такі програмні системи, які з великою ймовірністю зможуть тривалий час розвиватися, розширюватися та підтримуватися. Хоча SOLID принципи написані переважно для ООП, їхні ідеї цілком застосовні і до сучасного JavaScript розроблення, що допоможе фронтенд-розробникам створювати більш чистий та лаконічний код. Зарплати FrontEnd розробників Звернемося до статистики, опублікованої на сторінці української IT-спільноти DOU, а саме – до зарплатної аналітики українських розробників за літо 2023 року. Медіанна зарплата всіх українських розробників, які взяли участь в опитуванні (а їх 6605), наступна: Intern Software Engineer – 450 USD; Junior Software Engineer – 1000 USD; Middle Software Engineer – 2600 USD; Senior Software Engineer – 4900 USD. Тепер поглянемо на медіанну ЗП FrontEnd розробників: Junior – 950 USD; Middle – 2500 USD; Senior – 4750 USD. Виходить, медіана фронтендників на всіх тайтлах трохи менша, ніж загальна медіана, проте розрив досить невеликий. Погляньмо, скільки заробляє цей фахівець за межами України. У цьому нам допоможуть результати опитування Stack Overflow Developer Survey 2023 (понад 90 000 респондентів із США, Індії, Німеччини, Канади, Великої Британії та інших країн). Ця цифра – 59 970 USD на рік (приблизно 5000 USD на місяць).   При цьому буде важливо сказати, що фронтендники з даного опитування мають у середньому 8 років професійного кодингу – і це один із найнижчих показників. Нижче за них розташовуються лише Data Scientist / ML Specialist – 7.9 років досвіду, а також студенти, які мають трохи більше 2.8 років досвіду у професійному створенні коду. Підсумки FrontEnd розробник – досить універсальний боєць у світі веб-розроблення. Він повинен вміти і верстати, і створювати логіку роботи клієнтської частини, і розуміти роботу серверної частини веб-застосунку. Для опанування такого великого інструментарію варто запастися часом, терпінням та завзятістю. Зазначені у статті засоби розроблення сайтів також мають аналоги, оскільки для вирішення різних завдань підходять різні веб-інструменти. Однак ми вибрали найпопулярніші та найефективніші з них. Якщо у вас є бажання опановувати цю професію і ви хочете самостійно “помацати”, чим займається фронтенд розробник, на ITVDN створено комплексну програму навчання у форматі відео навчання, яка включає 44 відео курси. Аби отримати доступ до всіх відео курсів на ITVDN терміном на 12 місяців з можливістю скачувати на ваш пристрій відео матеріали (що дуже актуально під час блекаутів), радимо розглянути пакет підписки «Преміум Plus». Якщо ж вам більше до вподоби живе онлайн навчання з тренером та у групі з іншими учнями, пропонуємо формат Live Online для вивчення спеціальності FrontEnd (Angular або React напрямки). Бажаємо вам успіхів у досягненні ваших цілей! Залишайтеся з ITVDN!

В рамках сегодняшней статьи я рад представить новый экспериментальный проект от команды ASP.NET под названием Blazor. Что такое Blazor? Blazor – это экспериментальный веб UI – фреймворк на базе C#, Razor и HTML, который работает непосредственно в браузере посредством WebAssembly. Цель эксперимента – в значительной мере упростить задачу построения простых и качественных одностраничных приложений, которые могут быть запущены в рамках любого браузера. Достигается это за счет написания .NET веб-приложений, которые при помощи открытых веб-стандартов могут запускаться на стороне клиента. В случае если вы уже работаете с .NET, подобный подход открывает перед вами следующие перспективы: вы сможете использовать навыки разработки браузерных приложений в дополнение к существующим сценариям серверных, облачных, нативных и игровых приложений. Однако, даже если вы непосредственно с .NET не знакомы, мы надеемся, что Blazor подтолкнет к его изучению. Зачем использовать .NET для браузерных приложений? Хотя веб-разработка за прошедшие годы значительно упростилась, создание современных веб-приложений - задача далеко не всегда тривиальная. Построение же веб-приложений на базе .NET предоставляет уникальную возможность улучшить качество написания подобного рода программ. Среди основных преимуществ стоит выделить: Стабильность и целостность: инструменты стандарта .NET на протяжении многих лет зарекомендовали себя в качестве надежных помощников при разработке приложений. Современные инновационные языки: с использованием C# и F# процесс создания программ, по сути, становится чем-то вроде развлечения, настолько широким спектром возможностей эти языки обладают. Популярная среда разработки: стек IDE Visual Studio обеспечивает максимальное удобство работы с Windows, Linux и macOS. Быстрота вычислений: .NET обладает длинной историей по улучшению производительности, надежности и защиты веб-приложений для серверов. Соответственно, при разработке full-stack .NET приложений все указанные преимущества также ощущаются. Browser + Razor = Blazor! Blazor базируется на существующих веб-технологиях, таких как HTML и CSS, но в этом случае для создания UI-элементов вы используете C# и Razor – синтаксис вместо JavaScript. Однако отметьте, что это не то же самое, что и деплой существующего проекта UWP или Xamarin в браузер. Blazor будет обладать всеми ключевыми особенностями современных веб-фреймворков, включая: Компонентную модель для построения комплексных UI Маршрутизацию Слои Формы и валидацию Внедрение зависимостей Поддержку JavaScript Перезагрузку в браузере во время разработки «вживую» Рендеринг на стороне сервера Полноценную поддержку .NET – отладки (как в браузере, так и в IDE) IntelliSense и прочие различные инструменты Возможность запускать более старые (не WebAssembly) браузеры через asm.js Публикацию и мониторинг размера приложения Изменения WebAssembly Запуск .NET – приложений в браузере стал возможен благодаря WebAssembly, новому веб-стандарту для «портативных, умеренных в размерах и быстрых» веб-приложений. Таким образом, WebAssembly вводит фундаментально новый способ построения веб-приложений, так как код, скомпилированный под WebAssembly, не уступает скорости нативных .NET-приложений. Никаких прочих сторонних зависимостей нам не нужно: вы можете запустить обычные .NET-сборки в браузере с использованием WebAssembly. В августе прошлого года наши друзья из команды Xamarin Microsoft анонсировали планы по созданию Mono .NET специально для браузеров с использованием все той же WebAssembly. По сути, Blazor частично базируется на результатах их работы. Новый эксперимент Сейчас мы восхищаемся возможностями Blazor-технологии, но не стоит забывать, что сейчас это лишь экспериментальная технология, а не официально выпущенная и готовая для полноценной работы. На этой стадии мы можем более глубоко ознакомиться с основными функциональными возможностями представленной технологии, а также выразить свои замечания и пожелания разработчикам. Я хочу попробовать! Найти технологию вы можете в Blazor repo, который сейчас доступен для использования. Это проект с полностью открытым исходным кодом: все текущие изменения и дополнения могут быть отслежены в вышеупомянутом репозитории. Пожалуйста, отметьте, что технология находится в статусе раннего доступа. Здесь еще нет никаких инсталляторов или шаблонов проектов, кроме того, многое из заявленного еще не реализовано. Даже то, что уже сделано, не оптимизировано. Если вам интересно, вы можете загрузить репозиторий, построить его и протестировать, но пытаться на его базе разработать рабочий проект – задумка явно не удачная. Что же касательно предложений и поддержки, вы можете использовать issue tracker репозитория. Через месяц мы планируем выпустить первые черновые версии заготовок веб-проектов и инструментов, сделав технологию более доступной для широкой аудитории. Автор перевода: Евгений Лукашук Источник

Моя идея состояла в том, чтобы построить простой репликабельный проект на Angular с бэкэндом на Django. Я искал и не смог найти нужных решений, пришлось во всем разбираться самому. В итоге я разобрался и решил сам написать гайд для всех, кого может заинтересовать данная проблема.  Данная статья поможет вам построить простое приложение Angular с бэкэндом на Django, организованного с помощью Webpack. Проблема Я хочу настроить проект на Angular 1.1.x и скормить ему данные с сервера Django. Мне бы хотелось использовать Django REST Framework (DRF), чтобы пострить RESTful API. Я также хочу сбандлить JS ассеты. Сейчас я собираюсь запустить сайт на одном сервере. Предварительные требования Python 2.x Django 1.9.x npm 2.15.8+ Webpack 1.13.x (sudo npm i -g webpack) ESLint 2.13.1+ (sudo npm i -g eslint) NodeJS 4.4.7+ Содержание Скаффолдинг проекта. Создайте свои начальные директории. Скаффолдинг проекта на Django. Настрока переменных среды, нужных для запуска сервера Django. Установка Django REST Framework и настройка Django с использованием переменных среды. Создание API. Запуск Django сервера с использованием dev settings. Инициализация npm-пакета и установка front-end JS зависимостей. Создание Angular entry-point и загрузка начальных зависимостей. Настройка Webpack'а. Дайте команду Django загрузить приложение. Создайте шаблон базы приложения Angular. Напишите компонент home. Напишите Angular роуты, ведущие к вашему компоненту home и странице 404. Добавьте директивы ангуляр-маршрутизатора к шаблону входной точки приложения. Проверьте ваше REST API в приложении Angular.  Шпаргалка. Итак, начнем! 0. Настройте среду для Python. mkvirtualenv mysite 1. Скаффолдинг проекта на Django. Создайте начальные директории. Мы хотим сфокусироваться на модулярности в ходе разработки. Следовательно, существует множество директорий в конечном итоге использования. Мы хотим, чтобы наше дерево изначально выглядело так: mysite ├── backend │ ├── docs │ ├── requirements └── frontend ├── app │ ├── components │ └── shared ├── assets │ ├── css │ ├── img │ ├── js │ └── libs ├── config ├── dist └── js  Сделайте следующее: mkdir mysite && cd mysite mkdir -p backend/docs/ backend/requirements/ \ frontend/app/shared/ \ frontend/app/components/ \ frontend/config \ frontend/assets/img/ frontend/assets/css/ \ frontend/assets/js/ frontend/assets/libs/ \ frontend/dist/js/  *Примечание: Структура этого проекта была навеяна опытом с несколькими другими проектами. Я считаю эту организацию идеальной, но вам не обязательно ей следовать. Но, пока вы читаете этот гайд, вы должны придерживаться этой структуры. 2. Скаффолдинг проекта на Django. В директории backend/ создайте Django проект: python django-admin.py startproject mysite  Также создайте requirements.txt: pip freeze > requirements/requirements.txt В директории (вашего проекта) backend/mysite/ произведите скаффолдинг директории, той, где будет жить ваше API: mkdir -p applications/api/v1/ touch applications/__init__.py applications/api/__init__.py \ applications/api/v1/__init__.py applications/api/v1/routes.py \ applications/api/v1/serializers.py applications/api/v1/viewsets.py Теперь создайте структуру директории настроек: mkdir -p configlord/settings/ touch configlord/settings/__init__.py \ configlord/settings/base.py configlord/settings/dev.py configlord/settings/prod.py \ configlord/dev.env configlord/prod.en 3. Настройте переменные окружения, которые нужны для запуска сервера Django. На этом этапе я предпочитаю пользоваться django-environ для работы с переменными окружения. Существует множество способов сделать это, но пакет django-environ чрезвычайно упрощает этот процесс, поэтому я использую его во всех своих проектах. Установите django-environ: pip install django-environ  В mysite/dev.env добавьте следующее: DATABASE_URL=sqlite:///mysite.db DEBUG=True FRONTEND_ROOT=path/to/mysite/frontend/ SECRET_KEY=_some_secret_key Мы собираемся использовать эти переменные среды в наших настройках. Выгода от использования наших переменных окружения в отдельных файлах состоит в основном в том, что такая настройка позволяет облегчить переключение между средами. В нашем случае файл the dev.env является списком переменных, которые мы бы использовали в локальной среде разработки. *Примечание: SECRET_KEY можно взять из settings.py, который был сгенерирован django-admin.py startproject. 4. Установите Django REST Framework и настройте Django, используя переменные среды. Установка DRF: pip install djangorestframework Наполните settings/base.py  следующим: Укажите, где искать переменные окружения. import environ project_root = environ.Path(__file__) - 3 env = environ.Env(DEBUG=(bool, False),) CURRENT_ENV = 'dev' # 'dev' is the default environment # read the .env file associated with the settings that're loaded env.read_env('./mysite/{}.env'.format(CURRENT_ENV)) Установите базу данных. В данном случае мы собираемся использовать встроенные в django-environ настройки SQLite. DATABASES = { 'default': env.db() } Установите SECRET_KEY ,а также debug. SECRET_KEY = env('SECRET_KEY') DEBUG = env('DEBUG') Добавьте DRF в пул приложений, которые Django должен использовать. # Application definition INSTALLED_APPS = [ ... # Django Packages 'rest_framework', ] Ссылки будут «жить» в специальном URL модуле, созданном с помощью базы проекта. ROOT_URLCONF = 'mysite.urls' Укажите Django, где искать все шаблоны и другие статические ассеты. STATIC_URL = '/static/' STATICFILES_FINDERS = [ 'django.contrib.staticfiles.finders.FileSystemFinder', 'django.contrib.staticfiles.finders.AppDirectoriesFinder', ] STATICFILES_DIRS = [ env('FRONTEND_ROOT') ] TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [env('FRONTEND_ROOT')], 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', ], }, }, ] В соответствии с настройкой TEMPLATES Django должен будет искать шаблоны внутри frontend/ directory. Это то, где Angular приложение будет жить. Мы используем только Django, чтобы обслужить шаблон, внутри которого Angular приложение будет загружаться, которое будет выполнено через entry-point директиву. Если вы не знаете, о чем я, продолжайте чтение...  Наполните settings/dev.py: from mysite.settings.base import * CURRENT_ENV = 'dev' Здесь мы указываем, что этот файл настроек унаследывает настройки из base.py и переопределяет строку CURRENT_ENV, найденную в base.py. Мы говорим: «Используй это значение вместо значения, найденного в наследуемом модуле». 5. Создайте API. Нам нужно нечто, с помощью чего мы сможем протестировать службы Angular, поэтому давайте создадим небольшое API. Этот шаг можно пропустить, но я не советовал бы делать этого. Нам важно знание того, что настройки приложения Angular работают исключительно с точки зрения его потенциала, чтобы облегчить HTTP запросы. Сгенерируйте приложение. manage.py startapp games Создайте модель в games/models.py. class Game(models.model): title = models.CharField(max_length=255) description = models.CharField(max_length=750) Создайте DRF сериализатор для модели игры в  applications/api/v1/serializers.py. from rest_framework.serializers import ModelSerializer from applications.games.models import Game class GameSerializer(ModelSerializer): class Meta: model = Game Создайте  DRF viewset для модели в приложениях applications/api/v1/viewsets.py. from rest_framework import viewsets from applications.games.models import Game from applications.api.v1.serializers import GameSerializer class GameViewSet(viewsets.ModelViewSet): queryset = Game.objects.all() serializer_class = GameSerializer В applications/api/v1/routes.py зарегистрируйте роуты, используя DRF's router registration features. from rest_framework import routers from applications.api.v1.viewsets import GameViewSet api_router = routers.SimpleRouter() api_router.register('games', GameViewSet) Обозначьте ссылки для зарегистрированного DRF роута внутри mysite/urls.py: from django.contrib import admin from django.conf.urls import include, url from applications.api.v1.routes import api_router urlpatterns = [ url(r'^admin/', admin.site.urls), # API:V1 url(r'^api/v1/', include(api_router.urls)), ] 6. Запустите сервер Django, используя dev settings. manage.py runserver --DJANGO_SETTINGS_MODULE=mysite.settings.dev Впуская DJANGO_SETTINGS_MODULE в runserver, мы «говорим» - работать используя специфические параметры. Если все работает, у вас появится возможность открыть localhost:8000/api/v1/games и увидеть ответ от DRF. Если все работает – самое время заняться построением приложения Angular. Если нет – направьте автору проблему. Если вы застряли на этом этапе – оставьте комментарий автору под оригиналом публикации. 7. Инициализируйте npm-пакет и установите front-end JS зависимости. Приложение Angular не будет работать так, как мы хотим, если правильные зависимости не будут установленны. Самое время установить базовые пакеты, которые понадобятся. Инициализируйте npm-пакет. Прямо из  frontend/ запустите npm init --yes By passing the --yes flag into init, you're telling NPM to generate a package.json using NPM defaults. Otherwise, if you don't pass that in, you'll have to answer questions... Boring. Установите dev dependencies.  npm install --save-dev eslint eslint-loader Установите общие зависимости. npm install --save eslint eslint-loader angular angular-resource angular-route json-loader mustache-loader lodash Файл package.json file во frontend/ должен выглядеть приблизительно следующим образом: { "name": "my-app", "version": "0.0.1", "description": "This is my first angular app.", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "eslint": "^3.1.1", "eslint-loader": "^1.4.1" }, "dependencies": { "angular": "^1.5.8", "angular-resource": "^1.5.8", "angular-route": "^1.5.8", "eslint": "^3.1.1", "eslint-loader": "^1.4.1", "json-loader": "^0.5.4", "lodash": "^4.13.1", "mustache-loader": "^0.3.1" } } Здесь то, что мы только что установили: eslint – отличный линтер, благодаря которому код JavaScript будет в порядке (последователен). eslint-loader – для запуска eslint через Webpack. Чуть позже я объясню концепцию «загрузчиков». angular -  MVC фреймворк. Если  вы не знали об этом, стоит подумать о том, чтобы закрыть эту страничку прямо сейчас. angular-resource -  (Angular) HTTP библиотека выбора. Это абстракция $http. json-loader - загрузчик (снова, используемый Webpack) для распаковки JSON из .json файлов с помощью require() во время работы нашего приложения. mustache-loader – загрузчик, который мы будем использовать, чтобы парсить наши mustache шаблоны. Mustache шаблоны – это веселье. Я могу спокойно предположить, что вы не знаете, как все эти пакеты заиграют вместе.  Не переживайте, братишки. 8. Создайте entry-point в Angular, объявите начальные зависимости, объявите первоначальные глобальные переменные. В frontend/app/app.js добавьте следующее: /* Libs */ require("angular/angular"); require("angular-route/angular-route"); require("angular-resource/angular-resource"); /* Globals */ _ = require("lodash"); _urlPrefixes = { API: "api/v1/", TEMPLATES: "static/app/" }; /* Components */ /* App Dependencies */ angular.module("myApp", [ "ngResource", "ngRoute", ]); /* Config Vars */ // @TODO in Step 13. /* App Config */ angular.module("myApp").config(routesConfig); app.js это то, где Webpack будет искать модули, чтобы бандлить их вместе. Лично я ценю такую организацию и методику вызовов, но такой порядок не обязателен. Существует 6 секций: Libs – главные библиотеки, используемые на протяжении работы Angular приложения; Globals – зарезервированные глобальные переменные, которые мы можем использовать во время работы приложения; Components (Компоненты) – особенные модули проекта; App Dependencies (Зависимости приложения) – объявление входной точки приложения и его зависимостей; Config Vars – переменные, где хранятся настройки, такие как route config; App Config - вводит configs (настройки) в приложение, используя сохраненные из предыдущей секции. Для того, чтобы globals работали, вам следует указать ESLint на то, какие из переменных - глобальные. В config/eslint.json добавляем следующее: { "env": { "node": true }, "extends": "eslint:recommended", "rules": { "indent": [ "error", 2 ], "linebreak-style": [ "error", "unix" ], "quotes": [ "error", "double" ], "semi": [ "error", "always" ], "no-console": 0 }, "globals": { "_": true, "_urlPrefixes": true, "angular": true, "inject": true, "window": true }, "colors": true } Ниже несколько переменных, о которых мы предупредили ESLint: _ представить lodash. _urlPrefixes – объект, который мы будем использовать в приложении для гиперссылок. Я расскажу об этом позже. angular, чтобы представить AngularJS object driving our entire application. inject, который будет использоваться для ввода зависимостей Angular. window, которая просто представляет объекты окон в JavaScript, является представителем  DOM. 9. Настройка Webpack. Теперь, когда мы выложили большинство наших зависимостей приложения, мы можем построить config file для Webpack. Webpack будет консолидировать все зависимости, а также модули для приложений, которые мы создаем в один файл. В bundle. В frontend/webpack.config.js добавляем следующее. module.exports = { entry: "./app/app.js", output: { path: "./dist/js/", filename: "bundle.js", sourceMapFilename: "bundle.js.map", }, watch: true, // eslint config eslint: { configFile: './config/eslint.json' }, module: { preLoaders: [{ test: /\.js$/, exclude: /node_modules/, loader: "eslint-loader" }], loaders: [ { test: /\.css$/, loader: "style!css" }, { test: /\.html$/, loader: "mustache-loader" }, { test: /\.json$/, loader: "json-loader" }] }, resolve: { extensions: ['', '.js'] } }; Для того, чтобы Webpack бандлил все наши статические зависимости, нам нужно указать ему, где их брать, какие зависимости обрабатывать и как управлять ими до банлинга. Давайте посмотрим на то, что указывает Webpack с помощью webpack.config.js: Entry - это путь к тому, что Webpack'у нужно для старта бандлинга. Это можеть быть полный путь или путь, относительный тому, где webpack.config.js располагается. В данном случае мы говорим о последнем варианте. output -  это объект, содержащий в себе path, который является директорией, в которую связанные зависимости будут помещаться; filename - это название бандла; и, в данном случае, мы решили использовать sourceMapFilename, чтобы обозначить, что наша() source map будет вызван(а). watch указывает Webpack следить за изменениями в файле, пока он выполняется. Если это не настроено как true, Webpack прогонит процесс бандлинга единожды и остановится. eslint содержит в себе специфические ESLint настройки, используемые eslint-loader. module указывает Webpack'у, что делать с модулями, с которыми он работает. module.preLoaders «говорит», что делать перед бандлингом. В данном случае мы хотим запустить модули (исключив модули установленные npm) через eslint. module.loaders - это то, где указана последовательность загрузчика. В нашем случае мы просто настраиваем test и loader,  где test указывает Webpack’у, какие модули запускать в загрузчике (по соответствию с паттерном regex), и loader говорит Webpack’y, какой загрузчик использовать в модулях, которые соответствуют regex паттерну в test. Каждый загрузчик указан в строке и разделен восклицательным знаком. Ex:  loader!another_loader!yet_another_loader module.preLoaders указывает, какие preLoaders'у запускать модули. Используемые настройки такие же точно, какие мы использовали в module.loaders. Но, Грег, какая  разница между preLoaders и loaders? Я рад, что ты спросил, мой дорогой друг!! A loader указывает Webpack'у, как бандлить требуемые файлы. Loader смотрит на модуль и говорт: «Эй, так как вы упаковываете это в один файл как строку – это то, как оно должно быть преобразованно для bundle'а». A preLoader обрабатывает код перед loaders, например, чтобы слинтить JavaScript модули. A postLoader является плагином Webpack'а, который обрабатывает код после бандинга. Мы не специфицировали ни один  postLoader ради простоты. 10. Укажите Django загрузить приложение. Прямо сейчас все, что нужно сделать – указать Webpack’у что создавать, как создавать и что должно быть создано. (На данном этапе я бы очень удивился, если вы попробуете запустить его и он заработает без ошибок. Если так и есть, я чертов мужик.) Так как Django использует свой собственный URL процессор в нашем приложении, мы можем быть рады тому, как любезно Django управляет всем тем, что введено в строку браузера пользователя. Как бы то ни было, мы бандлим одностраничное приложение, используя абсолютно другой фреймворк, и хотим, чтобы у приложения был полный контроль над тем, что пользователь вводит. Все, что нам нужно  – обслуживать одну страничку, в которой работает SPA. Следовательно... В backend/mysite/mysite/urls.py добавляем в список urlpatterns следующее: # Web App Entry url(r'^$', TemplateView.as_view(template_name="app/index.html"), name='index'), Это значит, что когда пользователь открывает mysite.com/, env('FRONTEND_ROOT') + app/index.html будет находить STATICFILES_FINDERS  в порядке рендера HTML шаблона. 11. Создайте шаблон базы приложения Angular. frontend/app/components/app/index.html шаблон должен выглядеть как обычный шаблон Django. В frontend/app/index.html добавляем следующее: {% load staticfiles %} <html ng-app="myApp"> <head> <title>My Sitetitle> <script src="{% static 'dist/js/bundle.js' %}">script> head> <body> body> html> В таком случае вам удастся запустить Webpack. Если вы запустите Django сервер и откроете localhost:8000,вы увидите пустую страничку. Если нет – дайте знать автору. 12. Напишите home component. Давайте напишем наш первый компонент. Он отобразит текст на страничке, пока пользователь открывает localhost:8000. Создайте директорию для компонента и базовые файлы. В frontend/app/components/: mkdir home && touch home/home-controller.js home/home.js home/home.html В frontend/app/components/home/home.html добавляем следующее: <div ng-controller="HomeController as ctrl"> <div> <h1>Home!h1> div> div> Теперь добавим следующее в  frontend/app/components/home/home-controller.js: function HomeController() { var that = this; that.foo = "Foo!"; console.log(that); // should print out the controller object } angular.module("Home") .controller("HomeController", [ HomeController ]) Определение модуля Angular должно быть объявлено в home.js: angular.module("Home", []); require("./home-controller"); Теперь мы можем сослаться на "Home" в области зависимости определения модуля. Давайте сделаем это! В app/app.js добавьте следующее: /* Components */ require("./components/home/home"); /* App Dependencies */ angular.module("myApp", [ "Home", // this is our component "ngResource", "ngRoute" ]); 13. Пропишите пути Angular'а, ведущие к home component и страничке 404. Нам нужно настроить первый путь. Когда пользователь попадает на localhost:8000, Angular должен взять контроль над загрузкой отрендеренного шаблона. Чтобы сделать это, нам потребуется использовать angular-router. В frontend/app/routes.js пишем следующее: function routesConfig($routeProvider) { $routeProvider .when("/", { templateUrl: _urlPrefixes.TEMPLATES + "components/home/home.html", label: "Home" }) .otherwise({ templateUrl: _urlPrefixes.TEMPLATES + "404.html" }); } routesConfig.$inject = ["$routeProvider"]; module.exports = routesConfig; Если мы не добавим _urlPrefixes.TEMPLATES, angular-router предположит, что components/home/home.html является действительной ссылкой, которую узнает сервер. Так как STATIC_URL в настройках предполагает неправильную работу localhost:8000/components/home/home.html. Также, если вы еще не заметили, вы увидите otherwise({...})  в коде роутов. Это то, как будут реализованы страницы 404. В frontend/app/404.html добавляем следующее: <h1>NOT FOUNDh1> И в завершении  добавляем frontend/app/app.js: /* Config Vars */ var routesConfig = require("./routes"); 14. Добавьте директивы angular-router к шаблону точки входа приложения. А теперь нам нужно указать Angular, где будет происходить переключение отображаемого, когда пользователь пользуется навигацией. Чтобы сделать это, мы используем всю силу angular-router. В тэг    в frontend/app/index.html добавляем: <base href="/"> Теперь в тэг  добавляем: <div ng-view>div> Ваш index.html теперь должен выглядеть так: {% load staticfiles %} <html ng-app="myApp"> <head> <title>My Sitetitle> <script src="{% static 'dist/js/bundle.js' %}" >script> <base href="/"> head> <body> <div> <div ng-view>div> div> body> html> Запустите Webpack. Откройте localhost:8000. Вы должны увидеть, что произошло в home/home.html. (Если ничего, отправьте эти данные автору J ). 15. Проверьте REST API в приложении Angular. Если все сделано, у вас появится возможность написать angular службы для Django API. Давайте создадим небольшой компонент, чтобы увидеть, можем ли мы это сделать. Этот компонент должен перечислять игры. Я предполагаю, что вы уже заполнили базы данных, следовательно запрос HTTP к localhost:8000/api/v1/games вернет список игр. Создайте скаффолд компонент в frontend/app/components/: mkdir -p game/list/ && touch game/list/game-list-controller.js game/list/game-list-controller_test.js game/game-service.js game/game.js game/game.html Этот компонент будет перечислять игры. Этот компонент должен перечислять игры. Я предполагаю, что вы уже заполнили базы данных, следовательно запрос HTTP к localhost:8000/api/v1/games вернет список игр. В game/game-service.js: function GameService($resource) { /** * @name GameService * * @description * A service providing game data. */ var that = this; /** * A resource for retrieving game data. */ that.GameResource = $resource(_urlPrefixes.API + "games/:game_id/"); /** * A convenience method for retrieving Game objects. * Retrieval is done via a GET request to the ../games/ endpoint. * @param {object} params - the query string object used for a GET request to ../games/ endpoint * @returns {object} $promise - a promise containing game-related data */ that.getGames = function(params) { return that.GameResource.query(params).$promise; }; } angular.module("Game") .service("GameService", ["$resource", GameService]); Обратите внимание на ссылку $resource, которую мы используем для того, чтобы настроить механизмы HTTP в нашей службе. В game/list/game-list-controller.js: function GameListController(GameService) { var that = this; /* Stored game objects. */ that.games = []; /** * Initialize the game list controller. */ that.init = function() { return GameService.getGames().then(function(games) { that.games = games; }); }; } angular.module("Game") .controller("GameListController", [ "GameService", GameListController ]); В game/game.html: <div ng-controller="GameListController as ctrl" ng-init="ctrl.init()"> <div> <h1>Gamesh1> <ul> <li ng-repeat="game in ctrl.games">{{ game.title }}li> ul> div> div> В game/game.js: angular.module("Game", []); require("./list/game-list-controller"); require("./game-service"); Затем обратимся к компоненту в app.js: /* Components */ require("./components/game/game"); /* App Dependencies */ angular.module("myApp", [ "Home", "Game", "ngResource", "ngRoute" ]); В конце концов, мы собираемся настроить роуты для списка игр, поэтому в frontend/app/routes.js добавьте следующее в объект $routeProvider: .when("/game", { templateUrl: _urlPrefixes.TEMPLATES + "components/game/list/game-list.html", label: "Games" }) Запустите Webpack снова. Все должно верно скомпилироваться. Если нет – дайте знать автору. Откройте localhost:8000/#/games. Вы увидите список игр. Сделано! Это все. Сомнения/Мысли Но есть некоторые сомнения: Глобальные переменные могут конкретно подставить вас, если вы не знаете, как с ними работать. Их локальное поведение не гарантирует того же на продакшене. Насколько я помню, их можно заставить работать, если правильно описан метод. Ваше приложение на Angular тесно связанно с Django. Поэтому ваше приложение не будет просто слиянием back- и фронтенда. Если ваш Django-RIP давно устарел, значит поменялись и маршруты, следовательно сконфигурируете ваш бэкенд согласно тому, как должны вести себя статические файлы. Так же вам будет необходимо заменить index.html с точкой входа Angular. Маленькие проекты не дадут вам особо попотеть, а вот большие явно заставят понервничать. Совет: единственное место, где должны сопрягаться приложение на Angular и Django сервер - это одна точка входа. Деплоймент должен быть выполнен так же, как любой обычный деплоймент приложения. Это все. Если у вас есть какие-либо вопросы и вы испытываете трудности, пожалуйста, оставьте их в комментариях в исходной статье! Чит! Автор пообещал выложить на гитхабе репозиторий со всем кодом. Оригинальная статья на английском языке. 

Світ ІТ приваблює багатьох: висока зарплата, віддалена робота, цікаві завдання. Але перед тим як почати навчання, чимало людей зупиняються… через страх. І часто причина — у міфах, які давно не мають нічого спільного з реальністю. У цій статті ми розвінчуємо п’ять найпоширеніших міфів, що заважають новачкам почати шлях у програмуванні. Міф 1  «Щоб стати програмістом, треба бути математичним генієм» Цей стереотип і досі лякає багатьох. Насправді ж для старту в ІТ потрібне логічне мислення, а не знання вищої математики. Так, у деяких напрямках (наприклад, Data Science або GameDev) математика важлива. Але у Web-розробці, QA, DevOps, Backend-проєктах ти можеш працювати, навіть якщо в школі не любив алгебру. Факт: згідно з дослідженням IBM, 72% ІТ-фахівців мають гуманітарну освіту, а не технічну. Міф 2 «Навчання триває роками» Традиційна вища освіта — це 4-5 років, але в ІТ усе інакше. Онлайн-курси, буткемпи, інтенсиви — дозволяють отримати базу за 6–12 місяців. На платформі ITVDN студенти вивчають HTML, CSS, JavaScript, Python або C# у своєму темпі та отримують практичні навички, які потрібні роботодавцям.Навіть після кількох місяців навчання можна знайти стажування або пройти тестове завдання. Міф 3  «Програмування — це тільки для “ботаніків”» Є уявлення, що програміст — це замкнена людина, яка говорить лише з комп’ютером. Насправді це творча і командна професія. В ІТ цінують комунікацію, ініціативу, вміння шукати рішення. Багато розробників починали як фітнес-тренери, вчителі, маркетологи або менеджери. Програмування — це навичка, яку може опанувати кожен. Міф 4 «Без університету тебе ніхто не візьме» Сучасні компанії цінують скили, а не дипломи. Якщо у тебе є GitHub, виконані проєкти, сертифікати, знання англійської — це вже дає перевагу на старті. Більшість студентів ITVDN не мають ІТ-диплому, але після навчання успішно проходять співбесіди та отримують першу роботу. Під час рекрутингу найважливіше — практика, мислення і портфоліо, а не формальна освіта. Міф 5 «Щоб стати програмістом, треба одразу знати всі мови» Це один із найбільш шкідливих міфів. Насправді достатньо обрати одну мову для старту — і з неї побудувати фундамент. Наприклад: Python — чудовий для аналітики, автоматизації, бекенду JavaScript — ідеальний для веб-розробки C# / .NET — популярний для корпоративних застосунків Потім ти зможеш додати інші мови, але спочатку важливо навчитися думати, як програміст. Міфи — це психологічні бар’єри. Вони народжуються з незнання, чужого досвіду або застарілих уявлень. А правда така:  ✅ У програмування можна прийти з нуля  ✅ Навіть якщо тобі далеко не 20  ✅ Без технічної освіти  ✅ І без “геніального” рівня IQ Головне — мотивація, правильна програма та підтримка, які допоможуть пройти шлях від першого коду до першого оферу.

На нашій платформі вже доступний курс «JavaScript Базовий» — справжній must have для всіх, хто хоче зануритися у світ веброзробки. Якщо ви давно мріяли зрозуміти, як працює JavaScript, але щоразу відкладали через плутанину в тутоіоалах —  настав час діяти. Ми пропонуємо покрокове занурення у фундаментальні концепції JavaScript  без зайвої води. JavaScript — це серце фронтенду та універсальний інструмент для веброзробки. Від інтерактивних кнопок до повноцінних додатків — все працює завдяки JavaScript. Тому якщо ви хочете бути затребуваним розробником, без цієї мови програмування нікуди. Курс «JavaScript Базовий» охоплює такі теми: Змінні та типи даних — розуміння різних типів даних та їх використання. Умовні оператори та цикли — створення логіки програм та повторюваних дій. Функції — створення та використання функцій для організації коду. Об'єкти та масиви — робота зі складними структурами даних. Робота з DOM — взаємодія з елементами вебсторінки та обробка подій. JavaScript — це не просто мова програмування, а справжня суперсила веброзробника. Він дозволяє створювати інтерактивні сайти, писати логіку для вебдодатків і навіть будувати повноцінні серверні рішення. Якщо ви давно мріяли почати кодити, але боїтеся складних термінів і плутаних пояснень — цей курс саме для вас. Ми крок за кроком проведемо вас через основи JavaScript, пояснимо, як працюють змінні, цикли, функції та масиви. Ви навчитеся змінювати вміст вебсторінок, обробляти події користувача та створювати власні скрипти. А ще — зрозумієте, чому без console.log не обходиться жоден розробник. Готові до знайомства з найпопулярнішою мовою програмування у світі? Тоді вперед! Автор курсу – Дмитро Охріменко, тренер-консультант, експерт з побудови розподілених та веборієнтованих додатків. Курс складається з 20 відеоуроків загальною тривалістю 14 годин 39 хвилини. Структура курсу: DOM та пошук елементів. Навігація по DOM елементам. Модифікація DOM дерева. Властивості та атрибути. Стилі. Події. Частина 1. Події. Частина 2. Події. Частина 3. HTML-шаблони. Функції конструктори. Класи. Класи. Успадкування. Контекст функції. Замикання. Форми та елементи управління. Перевірка даних форми. Cookies і Web Storage. Обробка винятків. Асинхронний код. Promise. Мережеві запити. Чого ви навчитеся на даному курсі: Розуміти основні концепції JavaScript, такі як змінні, типи даних, оператори та вирази. Писати та викликати функції, використовувати замикання та працювати з областю видимості. Використовувати масиви та об'єкти для організації даних у вашому коді. Розуміти принципи роботи з DOM і змінювати вміст вебсторінки за допомогою JavaScript. Використовувати події та обробляти взаємодію користувачів із вебінтерфейсом. Працювати з циклами, умовними конструкціями та операторами для керування виконанням коду. Основам асинхронного програмування та взаємодії з API через запити. Попередні вимоги Курс буде корисним як для початківців у програмуванні, які прагнуть освоїти основи JavaScript, так і для фронтенд-розробників, що хочуть покращити свої навички. Також він стане чудовим ресурсом для студентів технічних спеціальностей, які шукають структуроване розуміння мови програмування. Дивіться перший урок у вільному доступі. Курс вже доступний на нашому сайті в повному обсязі – до кожного уроку є практичні завдання та опорний конспект. Якщо у вас є активна підписка, ви можете дивитися його прямо зараз. Курс входить до комплексної програми підготовки за спеціальністю: JavaScript Developer. Frontend Developer.     

Прагнете підняти свій JavaScript на новий рівень? Курс «JavaScript Шаблони» створений саме для вас і вже доступний на нашому сайті. Ми зосередилися на кращих практиках програмування та впровадженні популярних шаблонів проєктування, щоб ви могли писати чистий, ефективний та масштабований код. Курс «JavaScript Шаблони» охоплює такі теми: Кращі практики програмування — дізнайтеся, як писати чистий та ефективний код. Популярні шаблони проєктування — ознайомтеся з такими шаблонами, як Singleton, Factory, Decorator та іншими. Робота з DOM та оптимізація — навчіться маніпулювати ДОМ-деревом та покращувати продуктивність застосунків. Практичні завдання — закріпіть знання через реальні приклади та вправи. Що на вас чекає? У модулях 1-3 ви поглибите розуміння основ JavaScript. Ви вийдете за межі стандартних можливостей, розглядаючи розширені об'єкти та масиви, навчитеся створювати користувацькі конструктори, ефективно керуватимете значеннями за допомогою Set і Map, а також опануєте різні типи функцій. У модулях 4-5 ви вивчатимете шаблони проєктування в JavaScript. Навчитеся контролювати створення та доступ до об'єктів через Singleton, Factory, Facade, розширювати функціональність за допомогою Proxy, Decorator, Iterator, та організовувати складні системи взаємодії з використанням Strategy, Mediator, Observer. Модуль 6 присвячений DOM, вебворкерам та розгортанню. Ви навчитеся професійно маніпулювати DOM, підвищите продуктивність застосунків за допомогою вебворкерів і дізнаєтеся, як використовувати async та defer для оптимізації завантаження при розгортанні. Ваша подорож до вершин JavaScript починається тут! Автор курсу – Максим Руденко, FrontEnd Developer Курс складається з 6 відеоуроків загальною тривалістю 3 години 31 хвилини. Структура курсу: Літерали та конструктори.   Функції. Шаблони створення обєктів. Структури та породжуючі шаблони. Поведінкові шаблони. Робота з DOM деревом, шаблони та антишаблони. Чого ви навчитеся на даному курсі: Писати чистий та підтримуваний код з використанням кращих практик. Створювати та маніпулювати об'єктами та масивами для ефективної роботи з даними. Застосовувати різні типи функцій залежно від потреби. Впевнено використовувати популярні шаблони проєктування у своїх проєктах. Оптимізувати роботу вебзастосунків та покращувати користувацький досвід. Попередні вимоги Курс підходить для розробників, які вже володіють базовими знаннями HTML, CSS та JavaScript і бажають підняти свій професійний рівень. Дивіться перший урок у вільному доступі. Курс вже доступний на нашому сайті в повному обсязі – до кожного уроку є практичні завдання та опорний конспект. Якщо у вас є активна підписка, ви можете дивитися його прямо зараз. Курс входить до комплексної програми підготовки за спеціальністю: Frontend Developer. JavaScript Developer.     

Добрий день, друзі! Сьогодні маємо гарні новини для всіх, хто хоче навчитися створювати гнучкі веб-сайти за допомогою сучасних технологій – на ITVDN опубліковано новий курс “CSS Flexbox”. Курс українською мовою! Flexbox (читається як "флексбокс") покликаний спростити позиціонування елементів на сторінці. Він дозволяє забути про проблеми з незручним ручним налаштуванням розмірів і положення блоків, яке забрало б у вас купу часу, так і не давши бажаного результату. За допомогою технології флексбокс можна задати бажану поведінку всім елементам сторінки, прописавши мінімум коду. Це особливо зручно при адаптивному та мобільному верстанні, коли розміри вашої інтернет-сторінки не фіксовані та змінюють свій розмір залежно від пристрою, з якого користувач зайшов на сайт. Іншими словами, це сучасний інструмент верстки, що дозволяє швидко створювати складні гнучкі макети та функції, спрощуючи вирішення завдань, для яких раніше використовували чистий CSS. Сьогодні флексбокси дуже популярні у використанні та підтримуються майже всіма сучасними браузерами. Автор курсу – Олексій Кучеренко, Frontend розробник та тренер-консультант CyberBionic Systematics. Курс складається з 4 уроків загальною тривалістю 2 години 40 хвилин. Програма курсу: Знайомство з Flexbox. Верстання трьох секцій. Зміна потоку та медіа-запити. Адаптивне верстання сайту. Чого ви навчитеся на даному курсі: Виконувати верстання header-a макету та меню в ньому. Створювати просте меню на сайті за допомогою флексбокс технології. Використовувати властивості flex-grow та flex-shrink для створення «гумового» верстання. Виконувати планшетну та мобільну версії простої сторінки без використання додаткових правил медіа-запитів. Розуміти функції властивостей align-items, flex-wrap, order, а також їх нюанси та переваги використання. Працювати з додатковим потоком у flexbox, розміщуючи елементи у потрібній позиції. Розуміти, як, навіщо і коли потрібно змінити напрямок основного потоку. Розміщувати багато рядових блоків, незалежно від їхньої кількості, працюючи з флексбоксами. Попередні вимоги Матеріал розрахований на тих, хто має базові знання з HTML & CSS. Дивіться перший урок у вільному доступі. Курс вже доступний на нашому сайті в повному обсязі – до кожного уроку є практичні завдання, опорний конспект та онлайн тести для більш глибокого засвоєння матеріалу. Якщо у вас є активна підписка, ви можете дивитися його прямо зараз. Курс входить до програм підготовки за напрямками FrontEnd Developer та Верстальник сайтів.                

Всем привет! Друзья, у нас отличная новость для всех, кто владеет языком программирования РНР и собирается углубляться в изучение популярного фреймворка Symfony — на ITVDN вышел видео курс “Веб-разработка на РНР Symfony”. Symfony – это один из самых популярных PHP фреймворков, часто выбираемый для создания больших веб-проектов, реализуемых на уровне организаций. Разработчики ценят Symfony за высокую производительность и стабильность, а также наличие удобной технической документации. Курс «Веб разработка на PHP Symfony» позволит вам изучить основы работы с этим популярным фреймворком на примере разработки небольшого приложения. На данном курсе вы познакомитесь с Symfony Security, научитесь использовать в Symfony валидатор и формы. Также, на курсе будут рассмотрены особенности Dependency Injection и применения сервис-контейнеров, особенности различных подходов в тестировании Symfony-приложения, работа с базами данных и сериализация в Symfony. Автор курса — Демьян Костельный, Middle PHP Developer. В записанных видео уроках он делится эффективными техниками работы с фреймворком Symfony, опираясь на собственный опыт и лучшие практики.   Структура курса: Знакомство с Symfony. Настройка рабочего окружения. Роутер, контроллеры, ParamConverter, views. Сервис-контейнер. Doctrine (репозитории, entity менеджер, фикстуры). Doctrine (lifecycle callbacks, query builder, relations). Symfony Security. Twig. Валидатор и формы. Event Listener. Сериализатор. Тестирование.   Чему вы научитесь на данном курсе: Создавать небольшое полноценное приложение с помощью фреймворка Symfony. Понимать особенности механизма контроллеров в рамках паттерна MVC и их реализации в Symfony. Работать с Doctrine для организации объектно-реляционного представления ваших сущностей. Понимать особенности и способы организации маршрутизации в Symfony, в частности реализовывать ее через YAML и Annotations. Понимать особенности работы и уметь работать с шаблонизатором Twig. Работать с сериализацией и десериализацией в Symfony. Понимать принципы DI и уметь работать с сервис-контейнерами. Реализовывать аутентификацию и авторизацию в Symfony приложении. Понимать особенности работы и разницу между Event Listener и Event Subscriber. Организовывать полноценное функциональное и юнит-тестирование вашего приложения.   Предварительные требования Для качественного восприятия информации данного курса необходимы знания HTML/CSS, основ PHP, основ работы с MySQL и базовое понимание языка SQL. Смотрите первый урок в свободном доступе. Все уроки курса уже на сайте и доступны в полном объеме для тех, у кого есть подписка. Вы можете приступить к изучению “Веб-разработки на РНР Symfony” в удобное для вас время и в удобном темпе! Также, на ITVDN есть записанные видео курсы по другим РНР-фреймворкам: Laravel Практический курс по Laravel YII2 Базовый YII2 Углубленный

Мы объявляем об открытии сети видео обучения технологиям Microsoft – ITVDN.com! Присоединяйтесь к нам и пользуйтесь всеми преимуществами удалённого обучения, проходя видео курсы и отдельные видео уроки, к сертификациям и тестированию, выполняя практические работы, подтверждающие повышение Вашего профессионального уровня. Сервис ITVDN – IT Video Developers Network -  это портал видео обучения и онлайн консультирования IT специалистов, желающих изучить технологии Microsoft. Уникальный веб-ресурс от Международного учебного центра CyberBionic Systematics, который по данным Национального Бизнес агентства Украины является лидером отрасли IT обучения и IT специалистов Microsoft, а также является членом Европейской ассоциации Бизнес партнёрства (EBA). Вашему вниманию предлагаются видеокурсы по наиболее популярным и востребованным технологиям – программирование на языке С#, основы SQL, ADO.NET, Entity Framework, Шаблоны проектирования, ASP.NET, полный набор необходимых видеокурсов для веб-разработчика – HTML&CSS, JavaScript, jQuery, HTML5&CSS3. В каталоге ITVDN представлены 16 полноценных учебных курсов, 7  коротких семинаров и тренингов – всего около 300 часов видео для начинающих и опытных разработчиков программного обеспечения. Также к Вашим услугам индивидуальные консультации от сертифицированных Microsoft преподавателей, радио-подкаст, корпоративный блог, программы лояльности и партнёрства,  акции, призы и мощная поддержка в сетях социальных медиа. ITVDN - это отличная возможность получить IT образование, не покидая зону комфорта, пользуясь всеми преимуществами видео обучения и онлайн поддержки, имея возможность пройти тестирование и сертификацию, подтверждающие уровень Ваших знаний. Международная и интернациональная ориентированность проекта даёт иностранным студентам ITVDN возможность изучать избранные технологии на родном для них языке, пользуясь всеми преимуществами общения с преподавателем-носителем языка. Такая возможность будет полезна и для отечественных IT специалистов, ориентированных на работу в иностранных компаниях, ведь наряду с базовым или углублённым изучением технологий программирования специалисты получат практические навыки в повышении своего уровня знания иностранных языков. Технологический прорыв в области использования самых современных способов обучения и применения новаторских технологий видео образования ITVDN закрепляет открытием линейки бесплатных ознакомительных курсов, публикуемых на брендированном канале в сети YouTube и проведением Вебинаров, а также разыгрывая среди клиентов компании технические новинки от Microsoft, чьим Silver Partner является CybeBionic Systematics – «альма матер» нового проекта видео обучения. Приобретайте видеокурсы и видеоуроки от ITVDN, становитесь участниками акций и бонусных программ, получайте возможность использовать онлайн-консультации для обсуждения изучаемых технологий, получйте скидки и специальные предложения для клиентов и партнёров уникального в своём роде IT Video Developers Network.

Привіт! Друзі, ми пропонуємо вам увійти в весну з крутими ідеями та планами, і створюємо для вас нові можливості! З 22 до 29 лютого на ITVDN діє спеціальна пропозиція: ви можете пройти повне навчання за спеціальністю FrontEnd розробник, навчаючись за відео курсами. Акційна ціна – 59 USD (замість 104.99 USD). Ви отримаєте на 7 місяців доступ до 50 відео курсів.   Чому FrontEnd? Попит на FrontEnd розробників стабільно високий, адже кожному бізнесу потрібно мати стильний та функціональний вебсайт, а вже існуючі вебсервіси потребують підтримки, оновлення дизайну, додавання нових розділів та фіч. А головне – веб FrontEnd розробка – це можливість працювати віддалено на будь-який бізнес (в тому числі закордонний) і отримувати гарну зарплату. Як показала пандемія і війна, віддалена робота – це велика перевага. Навчання за відео курсами – це сучасно, зручно і вигідно Найдоступніший спосіб вивчення фронтенду – відео уроки. Можна, звичайно, дивитися відео на YouTube, але цього буде замало, адже в розробці 80% успіху закладено в практиці. Відео курси ITVDN за спеціальністю FrontEnd Developer натомість надають повний пакет навчальних матеріалів, практичні завдання, можливість консультації з досвідченим ментором, тестування з сертифікацією за вивченими технологіями, доступ до Інтерактивного практикуму для відточення навичок кодингу. FrontEnd розробник має багато шляхів розвитку, і вам точно буде куди рухатись відповідно до особистих вподобань. Детальніше про це ви можете прочитати в нашій нещодавній статті “Що повинен знати FrontEnd розробник у 2024 році?”. Що ви отримаєте Пакет підписки за спеціальністю FrontEnd Developer включає в себе: Доступ до 50 відео курсів за напрямком FrontEnd Developer на 7 місяців Презентації, опорні конспекти, д/з Вихідний код навчальних проєктів Консультації з ментором – 60 хвилин Доступ до інтерактивних практикумів Онлайн тестування з 12 курсів та сертифікати Фінальне тестування за спеціальністю з отриманням Диплому Доступ до нових курсів напрямку FrontEnd, які виходитимуть під час дії підписки Must have технології фронтенд розробника Ядро фронтенду складають: проста мова верстання HTML, таблиця стилів CSS і лаконічна мова JavaScript. Перші дві вивчаються досить швидко, вони призначені для створення каркасу та привабливого вигляду вебсторінки. JavaScript додає логіку і дозволяє реалізувати клієнтський функціонал, складні анімації тощо. Також кожен розробник вивчає розподілену систему контролю версій Git та онлайн-сервіс GitHub, які потрібні для ефективної одноособової або командної роботи та демонстрації ваших проєктів працедавцеві. Це фундаментальні технології для кожного FrontEnd напрямку. Далі йде розгалуження і ви можете обрати один із фреймворків (або декілька одразу): Vue.js – найпростіший; React – найпопулярніший та найбільш збалансований з точки зору складності; Angular – висока складність, але менша кількість конкуренції на ринку ІТ. Для вивчення цих обов’язкових технологій буде достатньо 7 місяців. Але якщо у вас багато вільного часу, сил та мотивації, вивчайте якомога більше: шаблонізатор Pug, юніт-тестування, TypeScript тощо.