Хто такий тестувальник, QC Engineer, QA Engineer? Напрямки QA Стек технологій для Manual QA інженера Англійська мова та Soft Skills (гнучкі навички) Стек технологій для Automation QA Як стати тестувальником у 2023 році? Що потрібно знати тестувальнику? Кар'єра QA спеціаліста Зарплати QA Підсумки Всім привіт! Ви знаєте, як створюються програми та інформаційні сервіси, якими всі ми користуємось? Які фахівці потрібні, щоб з'явився новий Фейсбук, Вайбер, Інстаграм, новий Windows чи якась крута гра? За розробленням програмного забезпечення (ПЗ) стоїть ціла команда професіоналів – і далеко не всі з них вміють програмувати. Типова команда буде включати наступних фахівців: бізнес-аналітик – проводить аналіз бізнес-проблеми, формує вимоги до продукту, що розробляється; PM (Project Manager) – управляє всіма, хто залучений до роботи над проєктом; тимлід (Team Leader) – управляє командою розробників; UX/UI дизайнер – створює приємний дизайн застосунку (UI) з гарним користувацьким досвідом (UX); розробники/програмісти – займаються написанням коду, становлять ядро команди; QA спеціаліст – тестує застосунок на кожному етапі його розроблення для забезпечення високої якості продукту. Якщо ПЗ не призначене для використання тільки всередині компанії, а націлене на зовнішню аудиторію, то ще додається маркетинг-команда, яка працює з цільовими споживачами: досліджує ринок, визначає клієнтуру, привертає її увагу, підігріває інтерес до продукту та багато іншого. Таким чином, в ІТ знайдеться гарна робота навіть для тих, хто не любить програмувати. І сьогодні йтиметься про такого фахівця, як QA. Трохи вище ви вже дізналися, що це фактично тестувальник, який стежить за якістю ПЗ на кожному етапі його розроблення. У чому специфіка даної професії, чим займаються ці фахівці, наскільки легко опанувати спеціальність тестувальник QA і які технології має знати потенційний претендент на цю посаду – це ми і розкриємо в нашій статті. Влаштовуйтесь зручніше, ми починаємо! Хто такий тестувальник, QC Engineer, QA Engineer Дуже часто термін "тестувальник" застосовується до всіх фахівців, які так чи інакше пов'язані з перевіркою ПЗ на якість. Тим не менш, у цій сфері існує формальний поділ професій на три гілки: Tester, QC та QA. Давайте з'ясуємо, що означає кожна з них. Тестувальник – спеціаліст, який фокусується на проведенні безпосередніх тестів над уже створеним ПЗ (складання тест-кейсів та баг-репортів, локалізація дефектів тощо). Фахівець перевіряє, чи все працює згідно із заявленими вимогами, проводить збір статистичних даних та фіксує їх у відповідних документах. Тестувальник уважно користується розробленим ПЗ, відтворює всі можливі дії користувача, працює із застосунком на різних операційних системах, у різних браузерах (якщо це веб-застосунок), на різних мобільних платформах (якщо це мобільний застосунок); крім помилок він шукає ще й вразливості. Щось на кшталт техогляду транспортного засобу. Звіти про помилки потім надсилаються розробникам, які відповідальні за подальше виправлення багів. QC (Quality Control) Engineer — фахівець, який забезпечує не тільки відповідність ПЗ, що розробляється, заявленим вимогам, але і його відповідність заздалегідь визначеним критеріям якості продукту в цілому. Також він відповідальний за визначення готовності продукту до випуску в продакшн. Мета Quality Control спеціаліста – формування об'єктивної картини стану якості ПЗ на різних етапах розроблення. Можна сказати, що спеціальність тестувальника є підмножиною спеціальності QC Engineer. QA (Quality Assurance) Engineer — спеціаліст, який забезпечує контроль якості ПЗ, що розробляється, на всіх етапах його планування, проєктування та створення. Робота на цій посаді є проактивною і носить превентивний характер, оскільки QA інженер приділяє увагу якості продукту ще до того, як той буде створений. Тут на перший план виходять комплекси заходів, процеси та засоби забезпечення якості ПЗ на кожному витку розроблення. Безпосередньо тестування системи займає вже друге місце. Головне завдання QA — вибудувати систему так, щоб вона мала якнайменше зон, де можна припуститися помилки, відповідала всім показникам якості, а також, щоб її можна було легко тестувати. Спеціальність QC Engineer є підмножиною спеціальності QA Engineer. Щоб вас не плутати, у цій статті ми прирівняємо поняття “тестувальник” та “QA інженер” на користь другого. Будемо розписувати стек технологій і шлях становлення саме QA спеціаліста. Таким чином ми зможемо торкнутися максимальної кількості інформації стосовно напряму тестування. Напрямки QA Почнемо з того, що QA має два основних напрямки — Manual та Automation. Фахівці кожного з них називаються мануальний (ручний) тестувальник та тестувальник-автоматизатор, відповідно. Їхня різниця в тому, що перший стежить за якістю продукту і проводить усі тести вручну, а другий автоматизує тестування шляхом написання скриптів. Automation QA використовує певну мову програмування та фреймворк для того, щоб створювати програми, які будуть проводити тестування продукту замість самого фахівця. Такий підхід дає змогу скоротити час на тести. До обов'язків мануального QA інженера входять: аналіз та з'ясування вимог у замовника чи бізнес-аналітиків; планування процесу тестування; написання сценаріїв тестування; безпосередньо тестування програмного продукту; визначення проблемних місць, їхнє документування; використання систем відстеження багів (баг-трекінги); обговорення виправлень із розробниками, активна взаємодія з ними; відстеження життєвого циклу помилок; повторний тест виправлених дефектів; аналіз тестування; планування ідей щодо оптимізації якості програмного забезпечення; ведення тестової документації; перевірка вимог до програмного забезпечення; оцінка ризиків; участь у стендапах та інших мітингах. Тим часом на плечі Automation QA також покладаються наступні обов'язки: написання нових автотестів на основі розроблених вручну; оновлення поламаних/застарілих автотестів; прогін автотестів; аналіз результатів тестових прогонів; налаштування тестового оточення; рев'ю коду; оформлення автотестової документації Насправді і мануальний, і автоматизований напрямки мають багато спільних вимог, оскільки їхній фундамент однаковий. Давайте почнемо з розгляду Manual QA, а потім плавно доповнимо його інструментами Automation QA. Що має знати тестувальник у 2023 році – стек технологій Manual QA Engineer Загальна теорія з IT Якщо років 15 тому в тестувальники брали мало не з вулиці, то зараз до претендентів з кожним роком висувають все більше і більше вимог. Тому потенційний претендент на посаду насамперед зобов'язаний гарно розуміти IТ-індустрію. Отже, цей пункт передбачає такі теми, як: веб-технології (HTTP, HTTPS, DOM, JSON, cookie, session), клієнт-серверна архітектура; бази даних; комп'ютерні мережі; операційні системи (звернути особливу увагу на Unix); дрібні підтеми, як, наприклад, системи числення і т. д. Теорія тестування та тестова документація Як стати тестувальником з нуля? Безумовно, будь-який QA інженер першочергово повинен знати, з чим він взагалі має справу. Якщо на зорі розроблення саме тестування було чимось інтуїтивним, то сьогодні воно набуло чітких форм, отримало свої методики, інструментарій та спеціалізоване програмне забезпечення. Вивчивши теорію тестування, ви зможете орієнтуватися в даному напрямку, розуміти принципи, типи та методи тестування, тест-дизайну, етапи життєвого циклу ПЗ; дізнаєтеся, як правильно складати тестову документацію (тест кейс, баг-репорт, чек-лист тощо) і багато іншого. Основні теми: Тестування, основні стандарти ISTQB. SDLC та STLC. Методології розроблення ПЗ. Вимоги. Аналіз та складання вимог. Тестова документація. Рівні, типи, методи та види тестування. Техніки тестування. Тест-дизайн. Баги та баг-трекінгові системи. Системи контролю тестів. Основи програмування + HTML/CSS Основи програмування мануальному QA потрібні не для того, щоб займатися безпосереднім кодингом, а щоб вміти читати код розробника і розуміти, що в ньому відбувається. Тут важлива не сама мова програмування, а банальне розуміння того, як створюються програми, що таке змінні, функції, методи, класи, які є методології програмування, як вони реалізуються і т. д. Для вивчення основ добре підійде C# або Java. Можливо, сюди варто було б включити і Python, але він, мабуть, занадто легкий для вивчення і при роботі з іншими мовами вам доведеться щось доучувати. C# з Java більш фундаментальні, і знаючи основи однієї з них, ви зможете легко розбиратися з кодом будь-яких інших популярних мов. Фактично, володіння основами програмування необхідне читання чужого коду і виявлення можливих багів прямо на місці. Окремо виділяємо мови верстання HTML та CSS. Якщо ви працюватимете з веб-застосунками (а як показує практика – проєктів багато, – черга і до тестування "вебу" рано чи пізно дійде), то вам буде корисно знати, з чого складається FrontEnd частина веб-застосунку. Також ви працюватимете з інструментами розробника в браузері і там теж треба буде взаємодіяти з HTML/CSS кодом. Правила оформлення документації. Модель CMMI Якщо згадувати три спеціальності, про які ми говорили на початку (QA, QC і тестувальник), то цей пункт для тестувальника як такого є непотрібним. А от для QA інженера він невід'ємний. У процесі проєктування ПЗ та стеження за його якістю необхідно проводити відповідне документування. Щоб робити це правильно, треба знати стандарти оформлення таких документів. Важливо приділити увагу серії ISO 9000. CMM / CMMI – це набір методологій (моделей) удосконалення процесів розроблення ПЗ. Знання CMMI дозволяє QA інженеру грамотно оцінювати проєкт та планувати необхідні процеси по забезпеченню якості. SQL SQL — це мова запитів, яка використовується для взаємодії з даними в реляційних базах даних. Тестувальнику вона стане у нагоді для того, щоб виконувати бекенд-тестування для перевірки тестових даних, вставлення, видалення, оновлення їх значень у БД. Сказати точний рівень володіння SQL нелегко, оскільки це залежить від складності проєкту. Десь знадобиться базовий рівень SQL, а десь потрібно бути дуже підкованим. А якщо тестування не пов'язане з бекендом, знання мови запитів зовсім не знадобляться. Загалом, тестувальник QA повинен мати наступні знання та вміння при роботі з БД та SQL: вміння розпізнавати різні типи БД; здатність реалізувати підключення до БД, використовуючи різні клієнти SQL-з’єднань; розуміння таблиць БД, ключів, індексів, типів відношень між таблицями; вміння створювати прості запити; розуміння та вміння розбирати по поличках складні запити. Веб-сервіси Веб-служба (або веб-сервіс) – це програмна система зі стандартизованими інтерфейсами, яка ідентифікується веб-адресою. Даний термін описує стандартизований спосіб інтеграції веб-застосунків з використанням різних протоколів, наприклад XML, TCP/IP, SOAP, WSDL та UDDI. Веб-служба являє собою спосіб зв'язку між двома електронними пристроями по мережі, такими веб-сервісами можна користуватися незалежно від комп'ютера, браузера або місця доступу до Інтернету (пошук, веб-пошта, зберігання документів, файлів, закладок тощо). До переваг веб-сервісів можна віднести: можливість створення необхідних кондицій для взаємозв'язку програмних компонентів, які не будуть залежати від платформ, що використовуються; веб-сервіси використовують відкриті стандартні протоколи; завдяки XML забезпечується легкість у формуванні та налаштуванні веб-сервісів; використання HTTP гарантує успішний взаємозв'язок систем через міжмережевий доступ. Веб-сервіси повинні знати розробники для коректної реалізації ПЗ, а тестувальникам вони потрібні, щоб розуміти, як працює та чи інша веб-система. Jira Система баг-трекінгу, яка допомагає виявляти, реєструвати і контролювати баги, знайдені в ПЗ, що розробляється, а також відстежувати процес усунення цих помилок. Є командним інструментом, що спрощує процес взаємодії розробників та тестувальників, а також різну баг-трекінгову діяльність в принципі. Окрім прямого призначення допомагає команді ефективніше працювати, розставляти пріоритети та обирати подальші кроки оптимізації програмного забезпечення. Postman Популярний і водночас потужний набір інструментів для тестування API (у середовищі розробників вимовляється як “а́пі”). API – це прикладний програмний інтерфейс; він вказує, як слід звертатися до програми та які відповіді вона зобов’язана надавати користувачам. Postman відносно простий у використанні, має багатий інтуїтивний інтерфейс. Він перевіряє запити з клієнтської сторони на серверну, а також відгук зі сторони бекенду. Таким чином можна переконатися, що на стороні сервера все працює, навіть якщо фронтенд сторона ще не готова. API можна тестувати і за допомогою безлічі інших програмних засобів (наприклад JMeter), однак на сьогоднішній день саме Postman є найбільш компромісним інструментом тестування запитів, що поєднує в собі простоту і високу ефективність. Git Git – це популярна система контролю версій, яка дозволяє вести історію розроблення проєкту з можливістю доступу до кожної збереженої версії. Одним із найвідоміших антагоністів Git є SVN — централізована система, на відміну від децентралізованої Git. Також у роботі вам стане в нагоді і сервіс онлайн-хостингу проєктів, що використовує систему контролю версій. У цьому випадку це GitHub. У парі з Git він дозволяє розробникам зберігати свій код онлайн, а потім взаємодіяти з іншими розробниками в різних проєктах. Git потрібен скоріше Automation QA, оскільки дозволяє у зручному вигляді зберігати код тестів із можливістю повернутися до робочої версії тестів. Також тестувальник зможе: мати доступ до коду розробників; організувати список тестів та відстежувати його виконання; тестувати код із різних пристроїв (при цьому сам код лежить на віддаленому репозиторії Git); зберігати різні налаштування для застосунку; виконувати інші взаємодії. Методологія розроблення Agile/Scrum Методології розроблення – це своєрідні путівники процесами ефективного розроблення ПЗ. Їх застосування допомагає організувати максимально продуктивну роботу всіх учасників, які безпосередньо чи опосередковано задіяні у розробленні продукту відповідно до обраної стратегії. Agile – сімейство гнучких методологій розроблення програмного забезпечення, яке дозволяє випускати продукт невеликими частинами, постійно доповнюючи його і вдосконалюючи. При такому підході технічні та бізнес-підрозділи працюють спільно, ПЗ постійно оновлюється, забезпечується швидке прийняття рішень та виявлення неправильних підходів, застосунок простіше обслуговувати, а якість коду готового продукту вища. Agile має власний маніфест, який докладно описує основні принципи, на яких будується гнучке розроблення. Scrum є однією з найпопулярніших реалізацій agile-підходу. Його використовують багато команд, тому знання особливостей роботи зі scrum-моделлю для QA інженера є не менш важливим, ніж для будь-якого розробника. Англійська мова Знання англійської — природна вимога для багатьох професій в IT, оскільки більшість нових відомостей про технології, курси, навчальні та довідкові матеріали з'являються насамперед англійською. Для роботи в команді знань мови на рівні читання технічної документації, коментування коду та складання баг-репортів зазвичай цілком достатньо, проте, якщо виникне необхідність вести переговори та/або листування з іноземним замовником, або ж ви будете в міжнародному колективі, ваш рівень має бути вище (тут вже дуже бажано мати рівень не нижче за Upper Intermediate). Soft Skills Так звані “гнучкі (м'які) навички” – це внутрішні якості спеціаліста, які допомагають йому виконувати роботу максимально якісно і без зайвої напруги. Наприклад, для слідчого-криміналіста прекрасними софт скіллами будуть об'єктивність, уважність, вміння відчувати свого співрозмовника, прекрасне дедуктивне мислення і невгамовне прагнення докопуватися до правди. Для працівника на ресепшені критично важливими м'якими навичками є комунікабельність, дисциплінованість, пунктуальність, ввічливість, тактовність та інші. Які soft skills стануть у нагоді тестувальнику? Спеціалісту, який стежить за якістю ПЗ і перевіряє його на міцність, слід володіти наступними навичками: уважність, вміння концентруватися на задачі; ініціативність; посидючість; організованість, проактивність, націленість на результат; стресостійкість; емпатія до користувача та разом із тим розуміння бізнес-процесів; адаптивність; комунікабельність; вміння працювати в команді; володіння логічним, системним, упорядкованим мисленням; вміння правильно здійснювати декомпозицію (по відношенню до систем, завдань, проблем тощо); наявність шостого чуття + трохи винахідливості; прагнення вчитися та вміння передавати свої знання іншим; Користувацький досвід (не обов'язково, але дуже зручно) Було б непогано, якби перед тестуванням програми ви вже стикалися з чимось подібним у звичайному житті. Якщо працювати належить у сфері ігробудування, то ваш величезний геймерський досвід буде дуже доречним. Робота з проєктами із веб-індустрії? Досвід серфінгу в інтернеті (соцмережі, інтернет-магазини, онлайн-сервіси) полегшить розуміння логіки користувачів, їх очікувань та точок інтересу. Automation QA Автоматизований QA технічно є надмножиною позиції Manual QA — він повинен знати все те саме, що й мануальний колега плюс декілька нових інструментів. Ці інструменти ми зараз і перерахуємо. Мова програмування Якщо в розділі Manual QA ми говорили про основи програмування, то автоматизатору знадобиться саме впевнене володіння конкретною мовою. Зазвичай вибирають серед Java та Python, але це не межа. У тестуванні можна застосовувати такі мови, як JavaScript, C#, Ruby, PHP, SmashTest тощо. За допомогою обраної мови ви писатимете автотести, які виконуватимуть тестування за людину. Програма працює – тестувальник аналізує результати. Це спрощує роботу, підвищує швидкість проведення тестів та знімає частину завдань із людини. Фреймворк для тестування Для створення автотестів найчастіше використовується спеціальне програмне забезпечення — фреймворки. Одним із найпопулярніших вважається Selenium. Він мультиплатформний, орієнтований на роботу з веб-застосунками і підтримує велику кількість популярних мов програмування. Більше того, Selenium є основною технологією для багатьох інших інструментів автоматизації браузерів, API та фреймворків. Інструменти навантажувального тестування Цей пункт є необов'язковим, але дуже бажаним. Навантажувальне тестування – це вид тестування, при якому проводиться тест продуктивності цільового ПЗ при різних навантаженнях від дій певної кількості користувачів. Найбільш відомими інструментами проведення тестування навантаження є Gatling і JMeter. Як стати тестувальником у 2023 році? Що потрібно знати тестувальнику? Перетворюємо список наведених вище технологій на туторіал. Починаємо з шляху Manual QA. Ви можете навчатися самостійно – за книгами або відео курсами, а можете записатися на курси тестування для максимально ефективного навчання. У будь-якому випадку спочатку потрібно дуже добре вивчити теорію тестування і базові теми в IT: веб-технології, API, клієнт-серверна архітектура, бази даних, комп'ютерні мережі, операційні системи (звернути особливу увагу на Unix), дрібні підтеми, як, наприклад, системи числення і т. д. Конкретні теми з тестування ми розписали в одному з перших розділів. Потім вам слід опанувати написання тестової документації (для чистого тестувальника), а для QA знадобиться ще й знання стандартів забезпечення якісного ПЗ (ISO 9000) для додаткового документування, модель CMMI. Аби безпроблемно читати код розробників і розуміти, що в ньому відбувається, слід володіти основами програмування. Для цього краще вибрати або Java, або C# — документація за даними мовами є дуже інформативною, наявне велике ком'юніті. Більше того, безліч програм навчання за цими мовами має прекрасний бекграунд (історія програмування, як працюють обчислювальні системи і як вони обробляють інформацію), який закладає міцний фундамент програмування. Також варто опанувати мови верстання HTML і CSS – вони дуже прості і використовуються в усіх веб-застосунках. Для роботи із забезпеченням, яке використовує бази даних, необхідно вивчити основи SQL. Далі приступаємо до вивчення веб-сервісів, а потім – популярної баг-трекінгової системи Jira і потужного набору інструментів для тестування API – Postman. Створення програмного продукту зазвичай ведеться у команді, тому знання методології командного розроблення є не менш важливим, ніж попередні технології. Приділіть час вивченню принципів Agile/Scrum — з їх допомогою ефективно розробляється сучасне програмне забезпечення. Методологія гнучкого розроблення є дуже важливою для тестувальника, оскільки він бере участь у виробничому циклі так само, як і розробники. Також не забудьте підтягнути вашу англійську як мінімум до рівня Intermediate. Вона потрібна для комфортного пошуку потрібної інформації в інтернеті, читання технічної документації, роботи з іноземними колегами, а також для можливої взаємодії із замовником. Все ж таки англійська в IT ще нікому не заважала, ба навіть давала нові кар'єрні можливості та вищу зарплату. Щоб ваша робота приносила вам задоволення і ви себе не змушували працювати, вам слід володіти наступними софт скілами: уважність, вміння концентруватися на задачі; ініціативність; посидючість; організованість, проактивність, націленість на результат; стресостійкість; емпатія до користувача, разом із тим – розуміння бізнес-процесів; комунікабельність; інші якості, які ми зазначили у відповідному розділі. З цими навичками та знаннями ви зможете приступати до практики. Вивчіть Git, почніть працювати над будь-яким проєктом: покрийте його тестами, напишіть тест-документацію. Опублікуйте напрацювання на GitHub – це дасть вам цінний досвід роботи з розподіленою системою керування версіями та дозволить перевірити свої навички у вирішенні реальної задачі. Декілька гарних проєктів, і повноцінне портфоліо готове, а з ним ви можете впевнено подавати резюме на вакансію мануального QA інженера.   Якщо вас цікавить автоматизоване тестування, додатково вивчіть Python або Java + фреймворк для тестування (Selenium, PyTest, Robot Framework або інший). Це дозволить вам створювати скрипти, які автоматично виконуватимуть тестування, позбавляючи вас зайвої рутини. Дуже бажано мати досвід роботи з інструментами навантаженого тестування. Це може бути JMeter, Gatling чи будь-який інший популярний аналог. Такий досвід дасть вам додаткову вагу в очах роботодавця, що зіграє вам на руку, оскільки конкуренція за місце тестувальника дуже висока. Величезною перевагою буде наявність наставника, який міг би стежити за вашим прогресом, відповідати на питання, що виникають, давати корисні поради і направляти в потрібне русло - тоді у вас буде чіткий план того, як стати тестувальником з нуля. Кар'єра QA спеціаліста Які перспективи кар'єрного розвитку у тестувальника після отримання першої роботи? Шлях QA дуже нагадує самурайський шлях розробника: Intern/Trainee, Junior, Middle, Senior, Team/Tech Lead. Найбільш коректний шлях кар'єрного зростання передбачає наступне: Робота над hard skills. Поглиблення знань та навичок у межах технологічного стеку, який ви використовуєте, а також розширення цього стеку. Дуже перспективним вважається саме автоматизоване тестування, тому на короткій дистанції найбільший успіх чекає на тих тестерів, які рухатимуться у бік програмування. Прокачування soft skills. Дуже важливо не припиняти роботу над внутрішнім стрижнем. Сюди входить безліч моментів: вміння відстоювати свої позиції, чітко аргументувати свою думку, бути приємним комунікатором, уважно та відповідально ставитися до своєї роботи, займати проактивну, ініціативну позицію в команді, працювати над підвищенням власної продуктивності тощо. Позаробочі активності. Сюди можна віднести читання технічної літератури та актуальної інформації з вашої спеціалізації, відвідування тренінгів, проходження курсів, застосування нових знань на практиці, наприклад, у створенні pet-проектів або безпосередньо на роботі. Також важливо працювати в різних компаніях, змінюючи їх приблизно раз на 1,5-3,5 роки. Це дозволяє, з одного боку, не "закостеніти" на поточній роботі, а з іншого – залишатися в тонусі, отримувати цінний досвід роботи з різними командами та проєктами, збагачувати професійний кругозір, опановувати нові та розвивати вже наявні hard та soft навички. Крім цього, зміна місця роботи раз на 2-3 роки дає відчутний приріст у зарплаті, оскільки грошова оцінка ваших знань та навичок у різних конторах може істотно відрізнятися. Говорячи про кар'єрні перспективи, ви також можете піти шляхом суттєвого розвитку hard skills і, опанувавши програмування та супутні технології, поповнити ряди розробників. Якщо ж ваша сильна сторона – це soft skills і ви плануєте зробити наголос саме на них, можете розвиватися в напрямку бізнес-аналізу або менеджменту. Зарплати QA Скористаємося літньою зарплатною аналітикою за 2023 рік від DOU – спільноти професійних українських розробників, та дізнаємось, скільки заробляють наші тестувальники. Медіанні зарплати станом на червень 2023 року: Junior QA Engineer – 800 USD Middle QA Engineer – 1800 USD Senior QA Engineer – 3300 USD QA Team Lead – 3400 USD QA Tech Lead – 4000 USD Найвищі медіанні заробітні плати у Automation QA, найнижчі – у Manual QA, причому різниця на рівнях Middle та Senior може сягати більш ніж 1000 USD на користь автоматизованих тестерів. Найбільш оплачуваними мовами програмування у QA фахівців є: TypeScript – 3350 USD. Kotlin – 3300 USD. Java – 2838 USD. C# – 2750 USD. Ruby – 2652 USD. Python – 2500 USD. JavaScript – 2220 USD. SQL – 1661 USD. Інші мови – 1955 USD. Вище наведено саме медіанні зарплати. Англійська також впливає на грошову винагороду як новачків, так і досвідчених фахівців QA. Логіка залишається незмінною – що краще знаєш англійську, то більше отримуєш. Підсумки У цій статті ми постаралися зробити максимальне охоплення теми тестування. Була розглянута не лише спеціальність тестувальник, а й дві її надмножини — QC та QA. Зараз лінії розмежування між цими трьома професіями за великим рахунком стерті і простежуються лише у серйозних компаніях. У більш дрібних тестувальник, QA можуть запросто бути синонімами. Тим не менш, у нашій статті висвітлено ті технології та галузі знань, які підійдуть як тестувальнику, так і QA інженеру. Також, ми розглянули відгалуження Manual QA та Automation QA. Як з'ясувалося, без знання мануального тестування вам не стати автоматизованим тестером. Адже як можна писати автотести, якщо ти в принципі не розумієш, що, де і як досліджувати на предмет багів? Незважаючи на високу конкуренцію за місце тестувальника, кількість вакансій залишається однією з найбільших на ринку праці в IT. Перегляньте популярні ресурси з працевлаштування в IT і ви самі в цьому переконаєтеся. Тому нами й були вказані деякі необов'язкові технології — ми хочемо озброїти наших читачів максимально промовистим стеком, щоб ви були на голову вищими за конкурентів. Якщо вас цікавить цей напрямок і ви хочете стати QA інженером, пропонуємо до вашої уваги добірку курсів та вебінарів ITVDN, які ви знайдете на сторінці спеціальності Quality Assurance. Бажаємо успіхів у вивченні IT! Залишайтеся з ITVDN!

Операционная система Android Языки программирования Java и Kotlin. Принципы ООП Среда Android Studio и набор инструментов Android SDK Формат обмена данными JSON Архитектура REST API Реактивное программирование Библиотека Retrofit 2 Фреймворк Dagger 2 Данные и СУБД SQLite UI/UX дизайн Шаблоны проектирования Алгоритмы и структуры данных Unit тестирование Архитектурные шаблоны Git & GitHub Google Play Английский язык Как стать Android разработчиком? Итоги   Всем привет! С каждым годом смартфоны, планшеты и другие гаджеты приобретают все большую популярность. Нам уже трудно представить хотя бы один день без них. Каким образом мы так сильно приявязались к ним? Все дело в программном обеспечении, которое находит ключ к каждому из нас: общение (телефонная связь, видеозвонки, социальные сети), просмотр мультимедийного контента, прослушивание музыки, фото- и видеосъемка, игры на любой вкус и цвет, обучающие приложения и т. д. За всем этим стоят девелоперы, разрабатывающие программы, от которых тяжело оторваться. Каждое мобильное устройство работает с использованием одной из мобильных операционных систем. Cамыми популярными из них являются Android и iOS. В контексте данной статьи нас интересует именно первая ОС. Мы расскажем вам, какие инструменты используют разработчики в создании таких увлекательных приложений на Android и как стать специалистом в этой сфере. Но прежде хотим познакомить вас поближе с данной операционной системой. Уверены, что практически каждый ее использовал (а может, и сейчас ею пользуется), однако сейчас вы узнаете некоторые интересные факты об Android: Изначально Android разрабатывалась как ОС для фотоаппаратов. ОС Android основана на ядре Linux. Компания Samsung имела возможность приобрести стартап-компанию Android Inc. в 2004-м году, однако корейцы поставили под сомнение выгодность этого предложения. Через год корпорация Google купила Android Inc. не менее чем за $50 миллионов и смогла направить полученный потенциал в нужное русло. Число активированных устройств, использующих Android, более 2 миллиардов. Первая версия Android, как и первый пакет разработчика (SDK 1.0), вышла осенью 2008 года. Тогда эту ОС многие критиковали и не верили в успешность проекта. Google Карты вычисляют дорожные пробки на основе концентрации и скорости перемещения Android устройств. Android используется не только в смартфонах и планшетах, но также и в электронных книгах, наручных часах, фитнес-браслетах, игровых приставках, ноутбуках, нетбуках, смартбуках, очках Google Glass, телевизорах, бытовых роботах, научных аппаратах, компонентах исследовательских систем на базе гаджетов, компонентах IoT (Internet of Things — “интернет вещей”) и других устройствах.     Теперь перейдем ближе к сути. Андроид разработчик — это IT-специалист, который создает, поддерживает и совершенствует программное обеспечение для мобильных устройств, использующих популярную ОС Android. Вместе с этим он задействован в процессах поддержки, улучшения и обновления разрабатываемых продуктов. Если посмотреть на количество устройств, которые используют данную ОС, можно прийти к выводу, что разработчик под платформу Андроид — очень востребован в IT, а также имеет высокие доходы. Какие технологии использует в своей работе этот специалист?     Какие языки программирования и технологии используют Android разработчики Android Каждый Android девелопер обязан знать операционную систему, под которую разрабатывает софт, а также понимать назначение и жизненный цикл Android-компонентов. Чтобы создавать эффективные мобильные приложения, вы должны понимать все аспекты устройства и работы данной ОС. Java + ООП Java — это объектно-ориентированный язык программирования со строгой типизацией. Безусловно, в создании приложений под Андроид можно использовать другие языки (C#, C/C++, Python и прочие), однако, именно Java считается флагманским в Android разработке. Поэтому в данной статье мы будем делать уклон в Java-стек. Что являет собою этот язык? Не будем углубляться в его устройство, а скажем лишь, что все Java-приложения транслируются в специальный байт-код, выполняемый виртуальной машиной JVM (Java Virtual Machine), которая может быть установлена практически на любое устройство. Это делает программы, разработанные на Java, кроссплатформенными. Какими знаниями необходимо обладать? Прежде всего необходимо знать Java и владеть методологией объектно-ориентированного программирования (ООП). Если конкретизировать: Машинная математика, переменные и типы данных, условные конструкции, логические операции, циклические конструкции, методы, рекурсия, массивы, списки, обработка исключений, суперкласс Object, обобщения (Generics, дженерики), работа с памятью. Понимание и применение пакетов (Packages) в Java; ООП, понятия объектов и классов; Механизмы наследования, умение работать с интерфейсами; Коллекции и работа с ними; Параллелизм. Помимо теоретических знаний, новичок должен сформировать необходимые навыки написания кода. Для этого мы советуем вам как можно чаще практиковаться и решать прикладные задачки из интернета либо составленные самолично. Также, советуем использовать онлайн-тренажеры, например, интерактивный тренажер от ITVDN. С его помощью вы сможете потренироваться в кодинге на Java и проверить свои знания. Kotlin Молодой и перспективный язык программирования, который поддерживает как объектно-ориентированное, так и процедурное программирование. Отличается своей простотой, гибкостью, лаконичностью, и являет собой следующий этап развития Java. Kotlin-приложения компилируются в уже упомянутый JVM байт-код, что делает этот язык полностью совместимым с Java.  На конференции для разработчиков I/O 2017 компания Google расставила акценты в Android разработке, заявив, что язык программирования Kotlin отныне позиционируется как приоритетный язык для разработчиков приложений под ОС Android. Подкреплено это было тем, что теперь новые API и библиотеки будут выпускаться сперва под Котлин. Несмотря на возрастающую популярность данного языка и поддержку со стороны Google, Java не собирается уходить из мобильной разработки, удерживая там уверенные позиции и по сей день. Так что знание обоих языков будет предпочтительным для всех, кто собирается заниматься Андроид разработкой. В любом случае, зная Java, вы безпроблемно освоите и Kotlin. Все-таки классику надо знать и уважать. Среда Android Studio и набор инструментов Android SDK Android Studio — это интегрированная среда разработки (IDE) приложений под Android. В ней вы будете создавать проекты и работать над ними. В свою очередь, студия вам предоставит всевозможные удобности для облегчения разработки софта. Android Software Development Kit — кроссплатформенный комплект средств Android разработки, включающий в себя: отладчик, набор библиотек, телефонный эмулятор, набор документации по работе в данной среде и примеры приложений. Особенно интересен в этом перечне эмулятор — программа, которая создает виртуальный мобильный девайс, где можно тестировать написанные приложения и смотреть, как они будут выглядеть на том или ином Андроид-устройстве. JSON JSON (JavaScript Object Notation) — это общий формат обмена данными. Позволяет совершать обмен информацией между программными продуктами, написанными на разных языках. Таким образом, клиент, использующий Java, может легко передавать данные на сервер, который реализован с помощью Ruby/Java/PHP. REST API REST — популярный архитектурный стиль, содержащий определенные принципы организации взаимодействия приложения либо сайта с сервером через протокол HTTP. API — это прикладной программный интерфейс. С его помощью происходит определение, каким образом следует обращаться к программе и какие ответы она обязана предоставлять пользователям. К примеру, оплачиваете футболку в интернет-магазине или покупаете билет в кино — как только вы нажимаете соответствующую кнопку, подтверждающую ваши намерения на оплату, сайт соединяет вас с платежной системой с использованием API этой системы. Но даже если система не имеет никакой интеграции с другими, API все равно используется — для общения внутри системы.  RxJava Библиотека, которая позволяет реализовать принципы реактивного программирования для JVM. Используется для оперирования событиями и потоками данных, комбинируя лучшие идеи шаблонов проектирования Observer (Наблюдатель), Iterator (Итератор) и функционального программирования. В реальной жизни влияние реактивного подхода мы ощущаем, когда на нашем смартфоне высвечивается сообщение о новом посте человека, которого мы фолловим в социальных сетях или когда нам приходит уведомление о новом сообщении из мессенджера. То есть, вместо того, чтобы каждые 10 секунд лично перезагружать страничку объекта фолловинга или свой мессенджер, мы просто ожидаем уведомления о новом посте, занимаясь своими делами. Это очень полезная опция, позволяющая не только экономить наше время, но и упрощающая нагрузку на сервер. Куда без RxJava в мобильную разработку на Java? Retrofit 2 Популярная библиотека для сетевого взаимодействия — типобезопасный HTTP-клиент для Android и Java. Позволяет легко получить и загрузить JSON (либо иные структурированные данные) через веб-сервис на основе REST. Для работы с HTTP-запросами в Retrofit используется библиотека OkHTTP. Dagger 2 Фреймворк для работы с зависимостями в Java и Android. Позволяет уменьшить количество шаблонного кода, структурировать зависимости, упрощает работу при большом количестве зависимостей, а также позволяет делать код более читабельным. SQLite Structured Query Language (SQL) — декларативный язык структурированных запросов, разработанный для взаимодействия с базами данных. Особенностью SQL является то, что он лишь описывает необходимые компоненты и желаемые результаты, не указывая, как именно эти результаты должны быть получены. Любое ПО подразумевает работу с данными, будь то обыкновенная процедура приема данных от сервера (например, скачивание файлов) либо внесение в БД информации о новом пользователе, который только зарегистрировался — умение работать с данными одинаково важно во всех сферах разработки. Исключением является только FrontEnd. Также, изучите одну из систем управления базами данных (СУБД). В Андроид разработке по умолчанию используется SQLite. Благодаря своей компактности, легкости и надежности, эта СУБД идеально подходит для разработки в электронных устройствах и программах, где стратегическое значение имеет оперативная память. XML Extensible Markup Language - расширяемый язык разметки, с помощью которого можно структурировать и хранить данные для удобства их дальнейшей обработки. XML хорошо масштабируем, сочетает в себе простой и удобный синтаксис, а также базируется на кодировках Юникод для представления содержания документов. Также, в Андроид разработке XML используется для создания интерфейса посредством объявления элементов пользовательского интерфейса и задания их расположения. UI/UX дизайн UI/UX (User Interface — “интерфейс пользователя”, User eXperience — “опыт пользователя”) дизайн — это проектирование различных пользовательских интерфейсов, в которых удобство использования (UX) настолько же важно, как и внешний вид (UI). Android девелопер в ходе создания приложений также занимается и разработкой внешнего вида приложения, а потому, должен знать, как реализовывать интерфейс, который принесет юзеру максимальный комфорт во всех аспектах использования. Обычно в UI/UX разработке под Андроид используют Material Design — стиль графического дизайна интерфейсов программного обеспечения и приложений, разработанный компанией Google, делающий уклон на естественность графической составляющей. Для работы необходимо использовать инструменты Material Components for Android.  Шаблоны проектирования Паттерны (они же шаблоны) являют собой архитектурные конструкции, описывающие общепринятые способы решения задач, которые часто возникают в ходе проектирования программного обеспечения. Всего существует более двух десятков шаблонов, однако разработчику нет необходимости владеть ими всеми. Достаточно изучить самые популярные. Алгоритмы и структуры данных Понимание алгоритмов и структур данных — обязательное требование, которому должен соответствовать каждый программист. Это необходимый фундамент, который учит разработчика писать хороший исходный код через подбор оптимальных формы представления информации и последовательности действий. Изучив структуры данных, вы будете уметь управлять уровнем сложности своих программ, делая их более доступными для понимания, а также разрабатывать приложения с высокой производительностью, которые будут рациональнее взаимодействовать с памятью. Знание алгоритмов позволит вам создавать сложные конструкции для эффективного решения широкого спектра задач на Java и Kotlin. Unit тестирование Вид тестирования, который берет на себя программист, а не тестировщик. Его основная идея заключена в написании тестов под каждую нетривиальную функцию либо метод. Цель Unit (модульного) тестирования — изоляция отдельных частей программы, чтобы продемонстрировать, что по отдельности они являются работоспособными. Таким образом происходит проверка кода на регрессию, а вместе с этим — соответствующее обнаружение ошибок. Архитектурные шаблоны В зависимости от предпочтений работодателя, от вас могут потребовать знание одного или нескольких архитектурных паттернов. Это шаблоны наивысшего уровня, которые определяют архитектуру всей программной системы. Самыми популярными являются MVC (Model-View-Controller), MVVM (Model-View-ViewModel), MVP (Model-View-Presenter), Clean Architecture. Git & GitHub Git — это популярная система контроля версий, позволяющая вести историю разработки проекта с возможностью доступа к каждой сохраненной версии. Одним из самых известных антагонистов Git является SVN — централизованная система, в отличие от децентрализованной Git. Также, в работе вам пригодится и сервис онлайн-хостинга проектов, использующий систему контроля версий. В данном случае это GitHub. В паре с Git он позволяет разработчикам сохранять свой код онлайн, а затем взаимодействовать с другими разработчиками в разных проектах. Данные системы позволяют команде программистов работать над одним проектом одновременно, сохраняя внесенные изменения, а также отслеживать выполнение задач каждым членом группы. Google Play Магазин приложений, в котором можно размещать и скачивать приложения под Андроид. Умение его использовать — обязательно. Google Play имеет очень строгий набор политик, которым должно соответствовать ваше приложение. К слову, за аккаунт Android разработчика необходимо один раз раскошелиться на $25. Зато это дешевле, чем за аккаунт iOS девелопера — там с вас будут брать дань каждый год денежную сумму в размере $99.  Английский язык Наверное, единственный язык, которым обязаны владеть все разработчики без исключения. Его вы будете использовать во время поиска ответов как во время учебы, так и во время работы, ведь большинство новых сведений о технологиях, курсы, учебные и справочные материалы появляются в первую очередь на английском. Для работы в команде разработчиков обычно знаний языка на уровне чтения технической документации и комментирования кода вполне достаточно, однако если вы планируете вести переговоры и переписку с иностранным заказчиком, ваш уровень должен быть выше.   Как стать Android разработчиком   Как вы заметили, Android девелоперы должны знать множество различных технологий. Сейчас очень много разработчиков данного направления, но действительно хороших очень мало. Поэтому и требования к кандидатам высоки. Если вы пройдетесь по ресурсам поиска работы, то наверняка отметите, что вакансий Android Developer уровня Junior не так много, как хотелось бы, а потому за место под солнцем придется побороться. Давайте перейдем к советам касательно того, как сделать старт в Андроид разработке и начать “набирать массу”. В университетах никто не обучит вас искусству разработки на Android, поэтому вы можете: Учиться самостоятельно — по книгам или видео курсам. Записаться на соответствующие курсы для максимально эффективного обучения специальности. Второй вариант является лучшим, поскольку предусматривает более высокий уровень дисциплинированности на всем пути обучения, а также структурированную подачу необходимой информации, которой удобно пользоваться и которая отвечает современным требованиям рынка. Если вы выбираете обучение по видео курсам, то прежде всего определите подходящую для вас образовательную онлайн-платформу. Мы рекомендуем сделать выбор в пользу ITVDN. Почему именно эта платформа? Давайте мы познакомим вас с преимуществами обучения на ITVDN. ITVDN — образовательная онлайн-платформа, содержащая полноценные программы обучения по 12 самым популярным специальностям. В каталоге ITVDN свыше 180 видео курсов по различным языкам программирования и информационным технологиям. Учебная программа каждой специальности содержит:  тщательно подобранный пакет видео курсов; план обучения с нуля до уровня специалиста, который вы можете адаптировать под свой уровень; Интерактивный Тренажер навыков для формирования навыков написания кода; учебные материалы, исходники программного кода, опорный конспект, презентации к урокам; доступ к Форуму, где каждый учащийся может общаться с другими студентами, тренерами и единомышленниками; возможность персональной консультации с тренером согласно выбранному пакету подписки; возможность проходить тестирование для подтверждения знаний, полученных в результате прохождения видео курса; электронный сертификат об окончании курса после успешного завершения тестирования. Все видео курсы записываются опытными разработчиками, которые проходят соответствующую сертификацию, чем подтверждают свое мастерство владения той или иной технологией. Наши преподаватели работают в IT и в курсе всех современных тенденций в своей сфере разработки. Знакомство со специальностью мы рекомендуем начать с просмотра бесплатных вебинаров по специальности Android Developer, в частности, с одноименного вебинара Евгения Мыцы Как стать Android разработчиком, в котором отражены все самые актуальные тренды и требования. Если вы заинтересованы в изучении специальности Android Developer на ITVDN, у нас есть отличное предложение для вас. Наш образовательный портал содержит полноценную программу обучения Android разработке. Переходите по ссылке и делайте шаг навстречу желаемой профессии!  Какой бы способ обучения вы не выбрали — вначале нужно изучить язык программирования Java и довести владение им до высокого уровня. После каждой пройденной темы нужно решать практические задачи, чтобы закрепить полученные знания. В этом вам может помочь интерактивный тренажер от ITVDN, с помощью которого вы сможете проверить ваше владение навыками написания кода на Java. Продолжайте обучение и изучайте те технологии, которые мы перечислили в данной статье. Очень желательно, чтобы у вас был наставник, который мог бы следить за вашим прогрессом, отвечать на возникающие вопросы, давать полезные советы. Это может быть как преподаватель на ITVDN, так и один из ваших знакомых, который занимается Андроид разработкой и готов взять под свое крыло юного протеже. Знание английского на уровне не ниже Intermediate обязательно. Оно вам понадобится для комфортного поиска информации по Java, Kotlin и другим технологиям в интернете. Если ваши знания английского недостаточны как минимум для чтения технической литературы — обязательно подтяните их при помощи различных курсов либо интернет-материалов свободного пользования. Изучите Git, начните делать свой небольшой проект и опубликуйте его на GitHub — это даст вам ценный опыт работы с распределенной системой управления версиями и позволит проверить свои навыки в решении реальной задачи. Несколько хороших проектов, и полноценное портфолио готово. Не забывайте о Google Play, ведь именно сюда Android разработчики выкладывают готовый к использованию продукт. Актуальную информацию касательно языков и технологий, которыми необходимо владеть Android разработчику, вы можете узнать из нашего вебинара “Как стать Android разработчиком”, перейдя по ссылке. Резюмируя Android разработчик — специалист, который занимается созданием ПО под различные устройства — смартфоны, планшеты, ноутбуки, нетбуки и прочие девайсы, в основе которых лежит ОС Android. Востребованность этого разработчика очень высока, а на настоящих профессионалов то и дело ведут охоту HR-ы и рекрутеры. Изучайте все необходимые языки и технологии, практикуйтесь, а также всегда подпитывайте интерес к вашей будущей профессиональной деятельности. Не забывайте следить за новостями в мире Android. Просматривайте в YouTube видео, посвященные данной сфере разработки и впитывайте новую информацию. Для дополнительных очков мотивации подпишитесь на известных Андроид девелоперов. Пробуйте посещать различные мероприятия, посвященные разработке под Андроид, находите единомышленников и поддерживайте активность в их среде. Главное — быть целеустремленным и иметь желание развиваться в IT-сфере. Не останавливайтесь ни перед чем и тогда вас обязательно настигнет успех! Желаем вам побед в обучении! Обогащайтесь новыми знаниями и скиллами на ITVDN!

Що таке React Хто такий React розробник Що має знати React розробник Основні технології Технології з екосистеми реакту Додаткові технології Як вивчити Реакт з нуля Загальний Roadmap Три способи вивчення реакту Поради Висновки   Вітаємо! В даній статті ми поговоримо про одну з найпопулярніших спеціальностей на світовому ринку ІТ-розроблення – React Developer. Ви дізнаєтеся, в чому заключається робота даного спеціаліста, переваги його основного інструменту створення ПЗ, який ще арсенал він тримає при собі, а також як стати реакт розробником і максимізувати шанси на успішне працевлаштування. Що таке React React (інколи React.js, ReactJS) – це JavaScript-бібліотека для створення гнучких та сучасних користувацьких інтерфейсів (UI) для вебзастосунків. Вона дозволяє розробити все те, з чим користувач вебресурсу може взаємодіяти напряму: привабливе оформлення сайту, ефектні анімації, адаптивний дизайн, який підлаштовується під різні девайси тощо. Додатково реакт дозволяє створювати не тільки UI, а й клієнтську логіку: авторизація на сайті, чати для спілкування з менеджерами та інша взаємодія. Зазвичай вона виноситься в окремі модулі, а також застосовуються так звані хуки (hooks). Відповідно до опитування Stack Overflow Developer Survey 2023 (90+ тисяч респондентів з усього світу), бібліотека React є найпопулярнішим інструментом для веброзробки на FrontEnd стороні. Це ж підтверджують дані від Statista – глобальної платформи даних та бізнес-аналітики. Підтримують та розвивають бібліотеку реакт девелопери з Meta (Facebook). Вона має відкритий вихідний код, а її рішеннями послуговуються такі відомі компанії, як Airbnb, Netflix, Yahoo, Atlassian, Sony, Instagram, Reddit та багато інших. Сильні сторони реакту ми висвітили в наступній таблиці: Переваги React Короткий опис Легкість Реакт проста, швидка та зручна як у вивченні, так і в роботі (легша, ніж Angular, але дещо складніша за Vue.js) Компонентна архітектура Сприяє зручному перевикористанню компонентів у різних ділянках проєкту Віртуальна DOM (Document Object Model) Дозволяє оновлювати та рендерити лише ті компоненти, які зазнали змін – це підвищує швидкодію застосунків Проста інтеграція з BackEnd Бібліотека легко інтегрується з BackEnd-інструментами на базі мови JavaScript, яку також використовує React Об’ємна екосистема Існує велика кількість додаткових інструментів та бібліотек, які спрощують і пришвидшують розроблення Дружність по відношенню до SEO Легкість оптимізації вебінтерфейсів під SEO-вимоги для кращої індексації в пошукових системах Потужна спільнота Ком’юніті реакт розробників багаточисельне та є рушієм постійного вдосконалення, а також швидкого вирішення проблем під час розроблення Для чого використовують React? Дана бібліотека гарно підходить для побудови користувацьких вебінтерфейсів, які відзначаються високими показниками динамічності та продуктивності. Компонентна архітектура дозволяє створювати такі компоненти інтерфейсу, котрі можна з легкістю використовувати повторно. Віртуальна DOM підвищує продуктивність, мінімізуючи ресурсозатратні прямі маніпуляції з реальною DOM, що робить реакт ідеальною для застосунків з високою частотою оновлень та високим ступенем інтерактивності. Хто такий React розробник React розробник – це ІТ-спеціаліст, який створює клієнтську сторону вебзастосунків за допомогою бібліотеки React. Він є фахівцем напрямку FrontEnd, і серед його основних задач – реалізація зовнішнього вигляду вебсервісів, а також створення відповідної користувацької логіки. Що робить реакт розробник? Його типові задачі: верстання клієнтської сторони вебсервісу згідно з дизайнерськими макетами; створення ефективних компонентів застосунку, які є головними будівельними блоками в реакті; написання FrontEnd-логіки; реалізація прийому-передачі даних з BackEnd-стороною та сторонніми API; створення unit-тестів для забезпечення коректної роботи кожної ділянки коду; підтримка та оновлення існуючого коду для забезпечення сумісності з новими версіями ReactJS та інших технологій; створення та підтримка проєктної документації; участь у код-рев’ю; рефакторинг написаного коду; взаємодія з іншими членами команди: FrontEnd та BackEnd розробники, Project Manager (або замовник), UX/UI дизайнери тощо. Що має знати React розробник З кожним роком очікування працедавця від Junior React Developer зростають. Це природний процес, на який впливає збільшення кількості розробницьких інструментів. Також прохідну планку підвищують нещодавня пандемія коронавірусу й повномасштабне вторгнення. Основні технології Якими технологіями необхідно володіти сьогодні, аби отримати першу роботу як реакт розробник? Головні інструменти: HTML & CSS – це основні структурні блоки вебресурсу, які відображають інформацію користувачеві. HTML як мова розмітки формує каркас і дає текст, а CSS – оформлення, стилізацію, прості анімації. Також буде важливим опанувати семантичне верстання та верстання під мобільні пристрої.   Flexbox, Grid – технології гнучкого верстання, що дозволяють створювати адаптивні вебінтерфейси, пристосовані до різних екранів: варіації моніторів, смартфони, планшети тощо.   JavaScript – ключова мова програмування, яка тримає фронтенд. Важливо володіти нею на високому рівні, адже реакт за замовчуванням використовує саме джаваскрипт. Все більшої популярності набирає TypeScript в комбінації з React JS, але про нього поговоримо згодом.   Git – інструмент керування версіями, обов’язковий для вивчення багатьом розробникам різних напрямків. Переходьте до нього якомога раніше, в ідеалі – одразу після опанування основ HTML & CSS.   GitHub / GitLab – вебсервіси для розміщення ваших проєктів з метою ведення командного розроблення та формування вашого портфоліо. Можете обирати той, який вам до вподоби: GitHub найпопулярніший у світі, а GitLab створений українцями)   REST API – архітектурний стиль для реалізації взаємодії між вебзастосунками. Маст-хев для всіх розробників, дотичних до вебу.   React – головна бібліотека героя цієї статті. Часто використовується для створення складних, інтерактивних вебзастосунків, й особливо добре підходить для односторінкових вебдодатків (SPA). Також додамо до списку володіння принципами написання чистого коду (SOLID, KISS, DRY), вміння проводити рефакторинг свого коду, а також англійську мову на рівні мінімум B1 (для зручного читання технічної документації). Але чим краще ви знаєте інгліш, тим більше шансів ви матимете на працевлаштування та більш високу ЗП. Технології з екосистеми React Окрім класичних реактівських тем, як-от віртуальний DOM, стани, хуки, запити до сервера, оптимізація пам’яті тощо, треба опанувати низку додаткових інструментів з її екосистеми, а саме: Redux / Redux Toolkit – бібліотека для управління станами на клієнті.   React Router – допомагає в реалізації клієнтської маршрутизації, що дозволяє легко керувати навігацією на стороні FrontEnd.   React Hook Form – бібліотека для ефективної та простої роботи з користувацькими даними у формах.   React Testing Library або Jest – інструменти для unit-тестування коду. Додаткові технології Інструменти вище являють мінімум, необхідний для успішного працевлаштування. Однак реалії поточного ринку ІТ такі, що аби зафіксувати увагу працедавця на собі, треба знати й уміти більше. Розглянемо найпоширеніші додаткові технології, які часто зустрічаються у вакансіях на Djinni, DOU.ua, у телеграм-пабліках, LinkedIn тощо. Інструменти стилізації. Сюди відносяться бібліотеки та фреймворки, які впливають на продуктивність верстання, наприклад Tailwind CSS, Material UI, Chakra UI, Bootstrap тощо. Також популярні CSS-препроцесори, як-от SASS, SCSS, Stylus, LESS. Все вчити необов’язково, просто оберіть із першого та другого переліку найбільш популярні інструменти й зверстайте ними декілька проєктів.   Алгоритми та структури даних (ADS) – тема, через яку має пройти кожен програміст. Як початківцю React JS, немає потреби глибоко закопуватися в ADS, але треба обов’язково знати теорію, мати розуміння щодо застосування тієї чи іншої структури даних, здатність оцінити складність алгоритму та вміти реалізовувати популярні алгоритми сортування та пошуку.   Патерни проєктування – загальноприйняті принципи вирішення популярних задач у програмуванні. Допомагають підтримувати зрозумілість, чистоту, масштабованість і читабельність коду.   Webpack – збирач модулів, котрий дозволяє скомпілювати в один файл різні складові проєкту і таким чином полегшити розроблення.   TypeScript – мова програмування, котра являє собою синтаксичний цукор для JavaScript. Все частіше у вакансіях з’являються вимоги до знання TS, особливо цю тенденцію підкреслює лютневий рейтинг мов програмування від DOU.   Figma – дизайнерський інструмент для створення UI вебсервісів. Володіння основами фігми є важливим для React FrontEnd розробників – дозволяє оперативно верстати вебсторінки з дизайнерського Figma-макету.   Next.js є фреймворком, що дозволяє вебзастосункам на базі реакт використовувати технології рендерингу на серверній стороні (SSR) та статичного генерування сайту (SSG), що позитивно впливає на продуктивність і SEO-параметри. Гарний вибір для розробників, які створюють FrontEnd, але прагнуть мати доступ до певних BackEnd-можливостей.   React Native – фреймворк з екосистеми реакту, який дозволяє створювати мобільні застосунки під iOS та Android, а також десктопні рішення. Досить часто з’являється у вакансіях, тому знання React Native може стати вашою ключовою перевагою.   Node.js – платформа для серверного розроблення, яка дозволяє створювати BackEnd-частину вебзастосунку тією ж JavaScript і таким чином перейти у FullStack. Все частіше розробники додатково вчать ноду, аби збільшити свою привабливість для роботодавця. Як вивчити React з нуля Процес вивчення Реакт технологій може бути досить заплутаним для новачків. Нижче ми розрубуємо цей гордіїв вузол. Загальний Roadmap Отже, з чого почати опанування професії Trainee / Junior React Developer та як рухатися: Знайомство з вебом. Як майбутній розробник, який створює FrontEnd-сторону для вебзастосунків, ви маєте розуміти дану предметну область: що таке інтернет і як він функціонує, як працює браузер, що таке протоколи HTTP/HTTPS, DNS, доменне ім’я, хостинг тощо.   Вивчення верстання – HTML & CSS. База, фундамент, ґрунт фронтенду. Обов’язково підкріплюйте знання верстанням вебсторінок – в інтернеті багато сервісів із безкоштовними макетами.   Поглиблені техніки: адаптивне, семантичне верстання. Реакт розробник повинен підлаштовувати свої вебрішення під екрани різних розмірів, а також враховувати вимоги сучасних пошуковиків до HTML-семантики. Курси “CSS Flexbox” та “Верстка на Grid” швидко і легко навчать вас створювати адаптивні рішення.   Вивчення Git & GitHub. Після опанування основ верстання можете переходити до Git і GitHub / GitLab. Зверстайте декілька вебсайтів і опублікуйте на віддаленому репозиторії для практики.   JavaScript. Головна мова програмування для реакт розробника. Паралельно з її вивченням регулярно практикуйтеся на Codewars та LeetCode, в ідеалі – щодня.   React. Гарний фундамент у JS відкриває двері до вирішення питання як вивчити реакт з нуля. А найкраще це робити за допомогою курсів “React Базовий” та “React Поглиблений”, котрі розкривають усі необхідні теми. Вивчайте екосистему реакту, створюйте реакт-проєкти і публікуйте їх на GitHub / GitLab. З одного боку, ви відточуватимете свої навички, а з іншого – будете формувати своє портфоліо. З огляду на стрімкий ріст популярності TypeScript, радимо вивчити й цю мову. Якщо ви знаєте JS, багато часу тайпскрипт у вас не забере. Найголовнішу, чітку та структуровану інформацію ви знайдете у нашому однойменному курсі. Три способи вивчення React Існує три головні підходи до вивчення ІТ-спеціальностей – реакту в тому числі: самостійне вивчення за безкоштовними ресурсами; навчання за платними відео курсами; навчання у форматі живих уроків онлайн або офлайн. Самостійне навчання дозволяє зекономити кошти, натомість ви самостійно шукатимете всю інформацію: навчальні ресурси, матеріали, приклади коду, поради тощо. Цей варіант підходить невеликому відсотку людей, які мають гарну самодисципліну, незмінно високу мотивацію та справжній вогонь в очах. Це дійсно самурайський шлях React розробника – не кожен зможе витримати даний темп і осилити всю дорогу. Навчання за платними відео курсами – це золота середина між вашим темпом життя та опануванням сучасної ІТ-професії. Ви одразу отримуєте структуровані та актуальні навчальні матеріали, конспекти, приклади коду, можливість консультації і т. д. Вам не потрібно шукати це все в інтернеті. При цьому ви зберігаєте гнучкість у навчанні – займайтеся вивченням спеціальності тоді, коли вам зручно. З мінусів – немає чіткого важіля впливу на вашу мотивацію та дисципліну. Ви можете тиждень позайматися й закинути відео курси на місяць, і всі ваші досягнення будуть марними. Навчання у форматі живих онлайн або офлайн занять – найефективніша форма опанування спеціальності, зокрема напрямку React Developer. Ви займаєтеся в групі (а це підтримує мотивацію та здорову конкуренцію), отримуєте інформацію в режимі реального часу від досвідченого ментора, який дає вам найважливіші знання та відповіді на всі ваші питання. Регулярні д/з з перевірками та фідбеком, курсові роботи і тестування, відповідальність перед ментором та групою – таке середовище максимально сприяє вашій концентрації на навчанні. Це найдорожчий формат навчання, але результати того варті. Поради, які працюють Які поради з вивчення реакту будуть ефективними?   Використовуйте ШІ для навчання. Штучний інтелект не повинен писати за вас код, однак його доцільно використовувати для пояснення теми, частини коду, консультації щодо покращення коду або наштовхування вас на правильне рішення задачі тощо.   Практикуйтеся якомога частіше. Стати гарним програмістом можна виключно шляхом регулярного кодингу, оскільки цей напрям дуже зав’язаний на практиці. В ідеалі писати код щодня по декілька годин (мінімум 2).   Покращуйте володіння англійською мовою. Український ринок ІТ дуже перегрітий новачками, тому вимоги до англійської зростають все більше – компанії прагнуть відібрати найкращих кандидатів. Також гарний English дозволяє претендувати на вищі ЗП, відповідно до зарплатного опитування DOU (січень 2024).   Знайдіть собі ментора. Ідеальний варіант для вивчення React напрямку – наставництво досвідченого спеціаліста. Ментор надасть вам корисні лайфхаки зі спеціальності, прискорить ваш прогрес, підтримуватиме мотивацію, а також – є певна ймовірність – може забрати до себе в компанію (або порекомендує комусь). Найкращі майданчики пошуку менторів – LinkedIn, університетські спільноти технічних ВНЗ тощо.   Долучайтеся до спільнот однодумців. Рухатися у вивченні чогось нового завжди легше, коли робиш це разом із іншими. Вже згаданий LinkedIn та Telegram мають велику кількість спільнот за інтересами. Повноцінну збірку українських ІТ-спільнот ви можете знайти на сайті Ukrainian IT Communities.   Відвідуйте онлайн та офлайн події. Це можливість знайти корисні знайомства, які можуть призвести до менторингу, працевлаштування та іншим вигодам.   Пробне інтерв’ю з розробником. Не запрошують на співбесіди? Не біда! Ви можете пройти пробне інтерв’ю зі справжнім розробником за донат. Таким чином ви отримаєте корисний зворотний зв’язок і зрозумієте свої слабкі сторони, визначите напрямок подальшого розвитку в напрямку Реакт.   Пробне інтерв’ю з рекрутером. Якщо співбесіда з розробником більше сфокусована на перевірці ваших hard навичок, то рекрутер дозволяє проаналізувати soft скіли, ваше резюме та робочі акаунти, вміння правильно підсвітити свої переваги.  Зважаючи на велику конкуренцію на ринку праці, радимо не зупинятися на Реакті. Чим більше знань та навичок у вас є, тим привабливіші ви для працедавця. Як тільки надійно опануєте даний FrontEnd-напрямок, потроху рухайтеся до BackEnd або Mobile розроблення. Для створення серверної частини вивчайте Node.js і відповідну інфраструктуру, а якщо вас більше цікавить ПЗ під гаджети – React Native. Ми якраз маємо новий курс із нейтіву українською. І новий відео курс із Node.js також!   Якщо ви зацікавлені в якомога швидшому працевлаштуванні після вивчення ІТ-спеціальності, зверніть увагу на Live Online навчання в групі з ментором на ITVDN – він має низку вагомих переваг. Кожному, хто навчається в даному форматі, з першого дня і до моменту отримання job-оферу доступна безкоштовна допомога від нашого HR-спеціаліста: визначення ваших цілей на персональній консультації; асистенція під час складання резюме (CV) та супровідного листа (Cover Letter); асистенція з оформлення LinkedIn-акаунту; тестове інтерв’ю з нашим спеціалістом + визначення ваших сильних та слабких сторін; розроблення job-search стратегії; надання додаткових корисних матеріалів. Висновки В поточних реаліях стати реакт розробником складно, але можливо. Ринок ІТ переповнений джунами, які хочуть “увійти в ІТ” швидко й без клопоту. Аби відсіяти таких кандидатів і зібрати найкращих, компанії виставляють все більше вимог. Саме тому до навчання, портфоліо, резюме та інших елементів потрібно ставитися з особливою відповідальністю. Якщо вас цікавить навчання за відео курсами, переходьте за посиланням на сторінку спеціальності React Developer. Там ви знайдете цілу збірку відео курсів, яка допоможе вам опанувати найважливіші аспекти спеціальності. Якщо ж ви надаєте перевагу максимально ефективній формі навчання, пропонуємо розглянути можливість навчання у форматі Live Online з ментором у групі за спеціальністю FrontEnd Developer на ITVDN. Успіхів у вашому вивченні react js! Залишайтеся з ITVDN!

Кто такой верстальщик? Языки верстки HTML & CSS Техники верстки Препроцессоры Графический редактор и векторная графика Инструмент упрощения верстки Bootstrap 4 Язык программирования JavaScript Библиотека jQuery Методология БЭМ Вспомогательные инструменты Система управления версиями Git Английский язык Итоги   Всем привет! Вы когда-либо задумывались о том, как происходит полный цикл разработки современного веб-сайта? С чего все начинается и как мы приходим к такому сервису, который имеет привлекательный и гармоничный внешний вид, а также богатый функционал? Давайте разберемся с этим вопросом, а заодно поближе познакомимся с героем данной статьи. Прежде всего стоит знать, что сегодня человек-оркестр, который мог бы осуществить полный цикл создания веб-сайта — очень редкое явление. Процесс реализации одной только клиентской стороны уже является трудом целой команды специалистов. Если говорить о профессиональной веб-студии, то разработка несложного корпоративного веб-сайта осуществляется следующим образом. Вначале за заказчика сайта берется менеджер по продажам. Он общается с клиентом через телефон, электронную почту, при личной встрече. Обсуждает все детали возможного сотрудничества. Задача менеджера по продажам — решить все финансовые и юридические нюансы, связанные с созданием сайта. После заключения договора и оплаты услуг наступает звездный час PM`а (менеджер проекта), который и управляет проектом. Он ответственен за координацию действий команды разработчиков: проектирование и расстановка приоритетов, планирование выполнения задач, контроль, своевременное решение проблем, согласование промежуточных и конечных этапов создания и продвижения сайта. PM является связующим звеном между заказчиком и разработчиками: он плотно сотрудничает с клиентом, выясняет его требования, желания, предпочтения, затем конвертирует всю информацию в понятный команде девелоперов вид. После определения требований за работу берется веб-дизайнер. Данный специалист занимается графической и художественной составляющими сайта. В этой секции веб-кухни происходит создание красивого и приятного интерфейса с удобным размещением кнопок, меню и других элементов веб-сайта. На выходе получаются макеты, которые учитывают различные платформы потенциальных посетителей (стандартные и широкоформатные экраны ПК, планшеты, мобильные устройства и т. д.). Результат работы веб-дизайнера — графическая схема с указанием оттенков, отступов и других параметров веб-сайта в статическом виде, которая максимально точно отображает внешний вид будущего сайта. Фактически, это точный рисунок сайта. Готовый макет передается в руки верстальщика. Теперь при помощи различных элементов языка разметки веб-страницы графические элементы дизайна (рисунки, шрифты, таблицы и т. д.) будут переведены в понятный для браузера формат. Можно сказать, что он создает текстовый макет того, что придумал дизайнер. После того, как страница сверстана и проверена в различных браузерах на правильность отображения, она передается в работу специалисту, который подключает необходимый клиентский функционал, используя JavaScript-фреймворки, библиотеки и сопутствующие технологии. Как правило это FrontEnd разработчик. Затем начинается работа BackEnd разработчика, который занимается реализацией серверной стороны веб-сайта (базы данных, серверная архитектура, программная логика). Обработка пользовательских запросов, хранение и оперирование пользовательскими данными, аутентификация, оптимизация функциональных возможностей сайта и многое другое — обязанности бэкендщика. С уже готовым сайтом работают те специалисты, которые ответственны за его наполнение и продвижение в поисковых системах: контент-менеджер, специалист по контекстной рекламе, SEO-специалист, копирайтер и другие. Сегодня же нас интересует именно тот, кто превращает графику в узнаваемый браузером формат — верстальщик. Разберемся в специфике его работы и навыках, которыми должен обладать потенциальный кандидат на данную должность.   Кто такой верстальщик? Сразу дадим определение терминам, которые важны для составления целостной картины. Верстальщик — это специалист, который занимается версткой интернет-страниц. Верстка — процесс создания визуальной составляющей сайта. Структура самого сайта задается языком гипертекстовой разметки HTML, а каскадная таблица стилей CSS описывает его внешний вид. Проще говоря, HTML задает каркас страницы, а CSS занимается его облагораживанием (цвет, шрифты, стили, расположение, отображение блоков и т. д.). Если говорить о профессиональной верстке, то она происходит согласно заранее разработанному макету, который обычно создает веб-дизайнер, знающий тонкости своего ремесла. После получения графического документа от дизайнера верстальщик использует Photoshop или другие аналоги для извлечения необходимой информации (Illustrator, Sketch, Figma и другие): используемые шрифты, иконки, картинки, точные кодировки цветов, размеры элементов в пикселях, их точное расположение. Только после такой подготовительной работы герой нашей статьи может открыть среду написания кода и приступить к верстке. Давайте узнаем, каков арсенал инструментов использует верстальщик в своей работе.   Какие языки / технологии / инструменты применяет верстальщик?   HTML & CSS Языки верстки, которые мы уже упоминали. Являются главными инструментами верстальщика. Без них не обходится создание ни одного веб-сайта. HTML определяет его структуру (костяк), а CSS — внешний вид (вся остальная надстройка).   Техники верстки Для создания качественных веб-сайтов необходимо использовать специальные техники, которые упрощают верстку, делая код понятным и легко масштабируемым. Таким образом, выделяют три вида верстки:   фиксированная; резиновая; адаптивная. Фиксированную верстку применяли еще при создании самых первых сайтов. Тогда они были простые, не требовали какой-либо оптимизации и кроссбраузерности, а потому не было потребности в разработке новых сайтостроительных техник. При фиксированной верстке ширина сайта всегда одинаковая вне зависимости от разрешения экрана. Это самый простой подход к реализации верстки, но при этом самый непопулярный, поскольку сегодня пользователи используют множество моделей компьютеров, ноутбуков, телефонов и планшетов для выхода в сеть. В связи с этим, разрешение экранов варьируется от 200 до 3000 пикселей. Резиновая верстка способна менять размеры сайта в зависимости от размерности экрана. Таким образом, проблемы фиксированного вида решаются, однако сама процедура набора страницы усложняется. Верстальщику приходится думать о том, как растянуть картинки, чтобы они не потеряли в качестве и корректно отображались на всевозможных девайсах. Ну и о производительности не забывать. Кому нужен сайт, который будет прогружаться вечность? Адаптивная верстка является самой сложной. Сайт помимо размеров меняет свой внешний вид в зависимости от размеров устройства, на котором воспроизводится. Ориентирована в первую очередь на мобильные устройства, оттого и имеет сегодня большой спрос. Также, качественная верстка должна обладать следующими свойствами: семантичность; кроссбраузерность; валидность. Семантика в верстке означает соответствие тегов информации, которая находится внутри них. С ее использованием код становится чище, читабельнее и лаконичнее. Более того, поисковые системы начинают лучше воспринимать такие сайты, повышая их позиции при ранжировке.    Кроссбраузерность означает, что разработанный сайт должен качественно отображаться во всех популярных браузерах (Mozilla Firefox, Opera, Google Chrome, Safari, IE). Почему она так важна? Все дело в том, что один и тот же сайт может по-разному отображаться в разных браузерах. Не будем заглядывать за кулисы этого явления — просто подчеркнем, что современные сайты обязаны отвечать требованию кроссбраузерности. Валидность веб-сайта означает соответствие его HTML-кода стандартам W3C (Консорциум Всемирной паутины). Валидация предусматривает соблюдение корректности кода страниц, отсутствие синтаксических ошибок, наличие вложенности тегов и т. д. Проверка HTML-кода выполняется при помощи специальной программы — валидатора кода. Она находит и фиксирует все несоответствия со стандартом, указывая на их местонахождение и формулируя, где проблемный участок и почему он должен быть исправлен. Естественно, важным является и тот нюанс, что ваш код должен быть минимален, а интернет-страница, созданная с его помощью, должна быстро прогружаться. Ниже мы также рассмотрим вспомогательные инструменты, которые обеспечивают выполнение этих условий.   Sass/SCSS Препроцессор, который является расширением CSS. Если современный CSS сам по себе простой и мощный инструмент, то в комбинации с препроцессором это вовсе боевая машина для качественного оформления контента на интернет-страницах. Польза Sass/SCSS особенно отчетливо ощущается в больших проектах, когда количество строчек кода кажется бесконечным. Препроцессор позволяет использовать функции, недоступные в самом CSS. Например, переменные, вложенности, миксины, наследование и другие вещи, которые упрощают и делают удобным написание CSS-кода.   Photoshop / Illustrator / Sketch / Figma / Avocode Графический редактор, как мы уже упоминали, необходим верстальщику для извлечения необходимой информации из предварительно подготовленного макета: используемые шрифты, иконки, картинки, точные кодировки цветов, размеры элементов в пикселях, их точное расположение. Какой редактор был использован для создания макета, такой следует использовать и для изъятия необходимых данных.   SVG Вдогонку за графическими редакторами упомянем об SVG. Это язык разметки масштабируемой векторной графики. Изображения на странице, сделанные с помощью SVG, корректно отображаются на экранах с различным разрешением не теряя при этом своего качества, в отличии от традиционных растровых .jpeg, .png и других. Верстальщик должен уметь работать с SVG, поскольку он важен для оптимизации и быстродействия сайта, а также используется для реализации анимации векторных изображений, разработки прелоадеров и других интерактивностей.   Bootstrap 4 Это HTML, CSS, JS фреймворк для разработки кроссбраузерных веб ориентированных интерфейсов. Bootstrap являет собой набор инструментов от Twitter, созданный для облегчения разработки веб-приложений и сайтов. Он использует CSS и HTML для типографии, форм, кнопок, таблиц, сеток, навигации и т. д., а также дополнительные расширения JavaScript, упрощающие работу веб-разработчика. Данные свойства позволяют коду, написанному с применением Bootstrap, быть переиспользуемым, понятным и компактным. Основные преимущества фреймворка: высокая скорость верстки; кроссбраузерность и кроссплатформенность; наличие хорошей документации, большого сообщества и огромного количества разнообразных обучающих материалов; низкий порог вхождения (необходимо знать лишь основы HTML, CSS, JavaScript и jQuery).    JavaScript Язык программирования, который повсеместно используется в создании сайтов, даже в реализации их серверной стороны. Становиться ниндзя JavaScript верстальщику не нужно — это задача FrontEnd разработчика, который прорабатывает логику клиентской стороны веб-приложений. Герою статьи JS необходим для реализации различных динамических элементов на странице: анимации, слайдеры, калькуляторы и т. д. Также, этот язык применяется для подключения различных библиотек и определенных взаимодействий с ними. Знание базы JavaScript необходимо для комфортного использования библиотеки jQuery, подробнее о которой пойдет далее речь.     jQuery Небольшая, быстрая и многофункциональная JavaScript-библиотека, для работы с которой необходимо владеть HTML, CSS и JavaScript на базовом уровне. Она упрощает процесс программирования на JS и представляет объемные решения распространенных задач в виде методов, которые вызываются одной строчкой кода. Этой особенностью jQuery приносит ощутимую пользу верстальщикам. Вместо углубления в JavaScript и написания тонны кода, можно просто использовать уже готовые решения в различных задачах.   Методология БЭМ “Блок, Элемент, Модификатор” — методология, предусматривающая компонентный подход к разработке веб-страниц, в основе которого лежит принцип разделения интерфейса на независимые блоки. Подход БЭМ позволяет повторно использовать существующий код в создании других страниц с сохранением всех его свойств (размеры, шрифт, цвет и т. д.). Таким образом обеспечивается расширяемость и повторная используемость компонентов интерфейса. Соблюдение принципов БЭМ повышает качество, читаемость кода, увеличивает производительность и упрощает командную работу.   CMS (Wordpress / Opencart / Joomla / Bitrix) Content Management System — система управления контентом, являющая собой движок для обеспечения и организации процесса создания, редактирования и управления контентом. В случае отсутствия CMS разработчики были бы обязаны реализовывать дополнительную функциональность для каждой новой страницы, вносить новый контент самостоятельно программным путем и т. д. Ниже приведем пример для наглядности. Допустим, вы ведете собственный блог на специализированной платформе и у вас появилась необходимость сделать новую рубрику. Вы же не будете просить целую команду разработчиков создать новую интернет-страницу с нуля со всей функциональностью либо дорабатывать уже существующую под каждый новый пост? А в случае с интернет-магазином вы были бы вынуждены проделывать такие манипуляции для каждого нового товара. Вот для этого и существуют CMS. Они предоставляют удобную администраторскую панель вашему сайту, с которой в дальнейшем работает контент-менеджер. В профессиональной среде процесс настройки взаимодействия движка и готового шаблона сайта называется “натяжкой” шаблона на CMS. Основные функции CMS: предоставление инструментария для работы над контентом; управление контентом — хранение, управление потоком документов, соблюдение режима доступа, контроль версий; публикация контента; представление необходимой информации в удобном для навигации и поиска виде.        Gulp / Webpack Gulp — система сборки, которая автоматизирует рутинные задачи верстальщика. В число ее обязанностей входят: минимизация кода, оптимизация изображений, тестирование, анализ качества кода и прочее. Другими словами, она используется для сбора верстки. Webpack по сравнению с Gulp обладает более широкими настройками и функционалом. Предназначенный для удобной разработки одностраничных веб-приложений с использованием JavaScript.   Git Самая популярная распределенная система управления версиями, которая позволяет вести историю разработки проекта с возможностью доступа к каждой сохраненной версии. Таким образом, если в процессе создания программный продукт стал неправильно функционировать, есть возможность вернуться к предыдущей рабочей версии вместо длительных поисков ошибок. Также системы управления версиями являются неотъемлемым инструментом командной разработки, который дает возможность девелоперам работать над одним проектом одновременно, сохраняя внесенные изменения. Заодно удобно отслеживать выполнение задач каждым членом команды. Очень важный инструмент для любого IT-разработчика.   Английский язык Знание английского языка является одним из основных требований к верстальщику, поскольку большое количество полезной информации находится именно на англоязычных сайтах. Уровень чтения технической документации будет достаточным для комфортного пользования иностранными ресурсами.    Итоги Верстальщик — это специалист по верстке веб-страниц. Несмотря на довольно лаконичное определение, список требуемых от него знаний и навыков гораздо красноречивее. Верстальщик в 2020-м году должен владеть неплохим стеком технологий. Более того, мы привели лишь общий список инструментов. В реальности он может немного отличаться согласно направлению деятельности компании/веб-студии. Если к перечисленному добавить углубленные познания JavaScript и хорошее владение одним из фреймворков (Angular, Vue.js, React) + парочка смежных технологий, получится полноценный FrontEnd разработчик.  Отдельно отметим портфолио верстальщика. Оно должно быть в наличии у данного специалиста в обязательном порядке, иначе шансы получить job-оффер ничтожно малы (не забывайте и о конкуренции). В портфолио вам необходимо продемонстрировать все свои навыки и умения. Это может быть десяток проектов с использованием по крупице различных технологий в каждом, либо пара-тройка, но с концентрированием всех ваших умений и познаний в верстке. В этом случае пригодятся специальные ресурсы с опубликованными бесплатными макетами, которые можно брать и верстать, набивая руку и набираясь опыта. Также, если вы заинтересованы в изучении ремесла верстальщика, ITVDN имеет для вас хорошие новости. На нашем образовательном ресурсе вы сможете освоить данную специальность за 4 месяца. Учебная программа каждой специальности, в том числе и верстальщика, содержит: тщательно подобранный пакет видео курсов; план обучения с нуля до уровня специалиста, который вы можете адаптировать под свой уровень; Интерактивный Тренажер навыков для формирования навыков написания кода; учебные материалы, исходники программного кода, опорный конспект, презентации к урокам; доступ к Форуму, где каждый учащийся может общаться с другими студентами, тренерами и единомышленниками; возможность персональной консультации с тренером согласно выбранному пакету подписки; возможность проходить тестирование для подтверждения знаний, полученных в результате прохождения видео курса; электронный сертификат об окончании курса после успешного завершения тестирования. Все видео курсы записываются опытными разработчиками, которые проходят соответствующую сертификацию, чем подтверждают свое мастерство владения той или иной технологией. Наши преподаватели работают в IT и в курсе всех современных тенденций в своей сфере разработки. Знакомство со специальностью мы рекомендуем начать с просмотра бесплатных вебинаров по специальности верстальщик, в частности, с вебинара Елены Хижняк “Как стать верстальщиком?”, в котором отражены все самые актуальные тренды и требования. Возможно, нас читают практикующие верстальщики? С удовольствием прочтем вашу точку зрения на позиции, изложенные в данной статье. Также, будем рады любым вопросам и замечаниям от всех читателей! Ну а тем, кто решил выбрать профессию верстальщик мы желаем быть упрямыми, оптимистичными и с неугасаемым огоньком жажды знаний в глазах.Успехов и вдохновения на вашем пути!

Вітаємо! Друзі, цього разу ми підготували для вас підбірку найкращих вебінарів від ITVDN за напрямком Python. До рейтингу увійшли як пізнавальні вебінари з актуальною інформацією, так і вебінари, орієнтовані на прокачування ваших навичок створення коду. Давайте приступимо до їх розгляду.     Пишемо API додаток на Python за допомогою FastAPI та Docker   Автор – Антон Козаченко, Python Back-end Developer з Латвії   На вебінарі автор розбирає приклад написання API додатку на Python за допомогою фреймворку FastAPI та інструменту Docker. Розглядається фреймворк FastAPI, також створюється декілька методів API. Автор розглядає Docker, пише свою конфігурацію та запускає контейнери. Додатково відбувається покриття API додатку тестами.   План вебінару:   Ознайомлення із фреймворком FastAPI. Написання кількох endpoint-ів API. Написання тестів для цих endpoint-ів. Написання конфігурації для Docker. Запуск додатку в Docker containers. Запуск тестів.     2. Підготовка до технічної співбесіди з Python ➤ Як пройти співбесіду на Junior Python?   Авторка – Людмила Міщенко, Python розробниця   Вебінар присвячений ключовим моментам технічної співбесіди на позицію Junior Python Developer. Розглядаються найчастіші питання, логічні та технічні завдання. Ви дізнаєтесь, як правильно готуватися до співбесіди. Приділено увагу тому, як отримати користь від проходження технічного інтерв'ю та як залишити приємне враження про себе у спеціалістів компанії. Також автор порушує теми важливості роботи над помилками та аналізу співбесіди.   План вебінару:   Як готуватися до технічної співбесіди? На які запитання має знати відповідь Junior Python Developer? На що у відповідях кандидатів найбільше звертають увагу? Чи потрібні (і яку роль грають) pet-projects для фахівця-початківця? Як не розгубитися під час кодингу на співбесіді? (+ поради та лайфхаки) Робота над помилками та аналіз фідбеку після співбесіди.     3. Що краще: Django, Flask чи FastAPI? Огляд фреймворків для веб-розроблення на Python.   Автор – Максим Кузнєцов, Senior Python Developer   В даному вебінарі розглядаються декілька популярних веб-фреймворків на Python (Django, Flask, FastAPI). Автор порівнює їхню продуктивність і пояснює, для яких цілей який фреймворк більше підійде.   План вебінару:   Огляд Django та його фічі. Огляд Flask та його фічі. Огляд FastAPI та його фічі. Порівняння продуктивності. Коли який фреймворк вигідно застосовувати. Відповіді на питання.   Даний вебінар буде цікавий Python розробникам-початківцям, і тим, хто збирається перейти на Python і хоче спланувати своє навчання з урахуванням особливостей різних інструментів.     4. Створення гри BlackJack на Python з нуля (Частина 1 та Частина 2)   Автор – Артем Мураховський, Python Developer, тренер-консультант CyberBionic Systematics   "Створення гри BlackJack на Python" – це дводенний інтенсивний тренінг зі створення відомої карткової гри. Вебінар покликаний у захоплюючій формі познайомити новачків з Python та попрактикуватися у написанні коду цією мовою. Мінімум теорії та максимум практики – що ще потрібно для швидкого старту в програмуванні?   Чому можна навчитися, вивчивши відео матеріали тренінгу та випробувавши отримані знання на практиці:   Писати просту програму мовою Python Розбивати завдання на дрібні підзадачі та успішно їх вирішувати Проєктувати архітектуру програм Писати програми на рівні класів Розв'язувати алгоритмічні задачі Розуміти призначення патернів проєктування   План першого відео (першої частини):   Знайомство із середовищем розроблення PyCharm та мовою програмування Python. Розбір основних елементів мови. Створення архітектури програми на рівні класів. Поліпшення архітектури з використанням патернів. Створення перших об'єктів.   План другого відео (другої частини):   Створення структури проєкту. Наслідування та композиція. Створення спеціальних типів даних. Зв'язок компонентів між собою. Тестування. Підбиття підсумків.     5. Об'єктно-орієнтоване програмування в Python ➤ Що таке ООП та як воно працює.   Автор – Бондаренко Кирило, Data Scientist / Python Developer, "CreatorIQ"   Об'єктно-орієнтоване програмування (ООП) – дуже важлива парадигма у сучасному програмуванні. Цей вебінар розкриває основні принципи ООП і показує, як вони реалізовані у мові Python.   Наскільки важливим є знання ООП для Python розробника? Як часто доводиться використовувати ООП у роботі? У яких проєктах, у яких завданнях? Чи візьмуть вас працювати без знання ООП? Ці та інші питання будуть поставлені в даному вебінарі.   Теми, що розкриваються:   Що таке ООП і як це працює у Python. Приклади розв'язання задач через ООП. Підбиття підсумків. Відповіді на питання.     6. Створення чат-бота "прогноз погоди" на Python   Автор – Артем Мураховський, Python Developer, тренер-консультант CyberBionic Systematics   Якщо ви хочете випробувати свої сили в програмуванні на Python і створити власного Telegram-бота, який сповіщатиме вас про актуальну погоду, цей відеоролик буде дуже доречним.   Підійде як новачкам, які ніколи не програмували, так і розробникам-початківцям, які бажають поглибити і застосувати на практиці свої знання Python.   План:   Рівні моделі мережі Інтернет. Що таке бібліотеки на Python. Що таке API. Telegram API. Бібліотеки для Telegram API. Робота з чистим API.   Чого ви навчитеся:   Реалізовувати нескладну програму мовою Python, яка прогнозуватиме погоду. Основам базового синтаксису мови Python. Теоретичним основам API – зрозумієте, як він працює. Працювати із запитами. Створювати роботів для месенджеру Telegram. Використовувати існуючі сервіси для прив'язки до вашої програми.     Автоматизація парсингу сайтів на Python   Автор – Артем Мураховський, Python Developer, тренер-консультант CyberBionic Systematics   В епоху машинного навчання інформація стає нафтою XXI століття. Проєкти, пов'язані зі збором та аналізом даних, виходять на перші позиції у глобальних компаніях та в стартапах.   Як збирати та обробляти інформацію? Залежно від цілей проєкту, дані можуть збиратися абсолютно різні. На вебінарі ми розглянемо один із найпоширеніших підходів – парсинг сайтів.   Ми візьмемо один із популярних сайтів з робочими вакансіями та на його прикладі розберемо бібліотеки для парсингу веб-сайтів, бібліотеки для роботи із запитами. Розберемо види популярних баз даних і зрозуміємо, де і яку потрібно використовувати.   План вебінару:   Що таке парсинг веб-сайтів? Бібліотеки для парсингу веб-сайтів. Бібліотеки для роботи із мережею. Написання коду парсерів. SQL та NoSQL – за яких завдань який тип використовується. Написання коду менеджерів баз даних.     8. Створення простої казуальної гри на Python   Авторка – Людмила Міщенко, Python розробниця   На вебінарі буде розглянуто реалізацію простої гри на Python. Суть гри полягає у навчанні людей, особливо дітей, вести еко-дружній спосіб життя – правильно сортувати сміття. Тобто, користь буде не тільки для вас у отриманні нових знань у програмуванні, а й у спробі виявити більше турботи про нашу планету.   План вебінару:   1. Постановка задачі.   а) Мета вебінару – створити свою гру на Python, яка вчить сортувати сміття; б) правила гри – обирати правильний кошик для різного типу сміття; закінчення гри за таймером; наприкінці гри користувач отримує суму зароблених балів за правильно обрані кошики.   2. Реалізація програми:   а) встановлення модулів; б) завантаження потрібних зображень; в) написання логіки влучення сміття в кошик (поведінка кошика); г) оголошення та опис елементів сміття (органіка, пластик, папір) – клас поведінки сміття; д) виклик написаних класів та запуск гри.   3. Отримання результатів:   а) запуск та тестування коду; б) проходження гри; в) аналіз виконаної роботи – додавання та зміна умов гри, оптимізація коду, майбутні доопрацювання.       9. Структури даних у Python. Рівень Advanced   Автор – Бондаренко Кирило, Data Scientist / Python Developer, "CreatorIQ"   Якщо ви маєте труднощі з розумінням документованих структур мови Python, таких як list, tuple, dict, set, цей вебінар для вас. Ми розбиратимемося з тим, як написати такі структури даних, як черги (queues), дерева (trees), розглянемо роботу зі вкладеними словниками (nested dicts), а також застосування ООП для розширення можливостей існуючих структур даних.   Матеріал цієї зустрічі буде корисний Python розробникам із різних областей, зокрема Data Science спеціалістам та web-розробникам.   План вебінару:   Робота з розширенням структур даних мови через наслідування та ООП. Робота з комбінованими структурами, такими як nested dict, defaultdict, named tuple і т. д. Написання незадокументованих структур даних, таких як дерева, черги, зв'язані списки та інші.   Цей вебінар буде цікавий розробникам, які добре знайомі з Python, знають про імпорт бібліотек і хочуть заглибитися в роботу зі структурами даних для більшої ефективності роботи з ними.     10. Як стати Python розробником у 2021 році?   Автор – Артем Мураховський, Python Developer, тренер-консультант CyberBionic Systematics   В останні роки мова програмування Python стрімко набирає популярність. За даними Stack Overflow Developer Survey 2019, в якому взяли участь понад 87 тисяч IT-фахівців з різних країн, Python випередила навіть таких постійних та безперечних лідерів, як Java, С# та С++.   Зараз вона широко використовується в Data Science (машинне навчання, аналіз даних, візуалізація), розробленні вбудованого програмного забезпечення та реалізації серверної частини веб-додатків. Також за допомогою Python можна створювати ігри, десктопні та мобільні програми, писати тести для ПЗ та спрощувати адміністрування ОС.   Програма зустрічі:   Хто такий Python розробник і що він робить? Які знання, вміння та навички потрібні Python розробнику? Вимоги до розробників рівня Junior. З чого розпочати вивчення мови Python? Складання плану навчання. Рекомендована література. Відповіді на питання.   Вивчайте Python розроблення на ITVDN!

Вітаємо! Друзі, сьогодні ми підготували для вас вибірку найкращих вебінарів від ITVDN за напрямком FrontEnd. До рейтингу були включені як пізнавальні вебінари з актуальною інформацією, так і вебінари прикладного характеру, які мають на меті вдосконалення ваших навичок написання коду. Давайте приступимо до їх розгляду. Як стати FrontEnd розробником? Покрокова інструкція для початківців Автор – Тисячний Влад, Middle React.js / React Native Developer. FrontEnd Developer – це розробник, який створює клієнтську сторону веб-сайтів. Ваші улюблені сервіси – соціальні мережі, відеохостинги, інтернет-магазини, – будь-який інтернет-продукт необхідно піднести користувачеві в привабливому та зручному для нього вигляді. В такій задачі не обійтися без фронтенд спеціаліста. Які вимоги висувають роботодавці до FrontEnd-розробника? Що потрібно знати та вміти, з чого почати та як краще спланувати навчання? На вебінарі ви отримаєте відповіді на всі питання, що вас цікавлять, і складете цілісне уявлення щодо професії FrontEnd розробника. Адаптивне верстання на FlexBox та Grid Авторка – Ткаченко Анастасія, FrontEnd Developer. Flexbox та Grid – технології, які широко використовуються у верстанні сайтів та суттєво спрощують реалізацію їх адаптивності. Що вони являють собою? CSS Flexbox (Flexible Box Layout Module) – модель макету гнучкого контейнера – є способом компонування елементів, в основі лежить ідея осі. Flexbox складається з гнучкого контейнера (flex container) та гнучких елементів (flex items). Гнучкі елементи можуть вишиковуватися в рядок або стовпчик, а вільний простір, що залишився, розподіляється між ними різними способами. CSS Grid Layout – система двомірного макету, оптимізованого для дизайну користувацького інтерфейсу. Головна ідея, що лежить в основі макету сітки, полягає у розподілі веб-сторінки на стовпці та рядки. У області сітки, що утворилася, можна поміщати елементи сітки, а керувати їх розмірами і розташуванням можна за допомогою спеціальних властивостей модуля. У ході вебінару були продемонстровані можливості цих технологій та переваги їхньої комбінації на практиці (у якому разі яку технологію варто використовувати) для створення адаптивних сторінок. Створення гри Тетріс на JavaScript | Частина 1, 2, 3 Автор – Ростислав Силівейстр, FrontEnd Developer. Чудовий вебінар, який підійде навіть тим, хто має нульовий рівень знання JavaScript. Навчання програмуванню шляхом реалізації культової гри Тетріс – це той самий випадок, коли ви поєднуєте приємне з корисним, а результати можуть бути гордо представлені своїм знайомим, друзям і родичам. Кожна частина вебінару зачіпає визначені автором теми: Перша частина включає постановку завдання, ознайомлення з правилами гри, реалізацію поля, падіння і переміщення фігур в сторони. Друга частина спрямована на реалізацію обертання фігур, прискорення їх падіння, зникнення заповнених рядів, нарахування очок, переходу до наступного рівня, і навіть базові ігрові опції (старт, пауза, почати заново, game over). Третя частина є останньою — відбувається тестування та виправлення недоліків, оптимізація коду та підбиття підсумків. Після старанного вивчення всіх трьох частин вебінару та завзятої практики ви навчитеся: розбиратися у структурах, типах даних, функціях JavaScript; роботі з DOM у JavaScript; роботі із засобами HTML/CSS для розміщення елементів на сторінці; систематичному підходу до вирішення завдань, тримаючи в увазі всі деталі; розумінню логіки створення ігор; розумінню основ алгоритмів. Memory Game на JavaScript за 2 години Автор – Ярослав Вовченко, FrontEnd Developer. Щоб почати писати мовою JavaScript, не обов'язково одразу заглиблюватися у вивчення документації. На прикладі написання простої Memory Game ви дізнаєтеся, як обирати елементи в DOM, проходити по спискам та масивам, додавати, прибирати елементи та “слухачі дій”. На вебінарі ви разом з автором поринете у практичне розроблення на JavaScript. Для цього необхідно мати базові знання HTML, CSS та JavaScript. Вебінар організований наступним чином: Створення структури проєкту, написання перших файлів. Розмітка та стилізація ігрового поля за допомогою HTML та CSS. Основи роботи з перспективою у CSS. Збереження та порівняння обраних карток. Написання додаткового функціоналу. Підсумки, запитання та відповіді. Цей вебінар буде цікавий тим, хто хоче вивчити основи JavaScript у легкій та доступній формі без багатогодинного читання документації. Об'єктно-орієнтоване програмування JavaScript | ООП у JavaScript Автор – Георгій Клюковкін, Lead Software Engineer. Це відео допоможе вам зрозуміти, у чому відмінність ООП підходу до розробки в мультипарадигменній мові JavaScript від ООП підходу в класичних об'єктно-орієнтованих мовах, як, наприклад, Java. Ви дізнаєтеся, які плюси та мінуси має ООП в JavaScript, а також, які правила ООП ми можемо в ньому застосовувати. Автор торкається наступних тем: Основні принципи ООП. Наслідування vs Композиція. Об'єктно-прототипне наслідування у JS. Функції-конструктори та класи. Single responsibility principle. Вебінар буде корисний розробникам-початківцям JavaScript, або тим, хто працює в іншому напрямку і при цьому бажає розібратися в особливостях ООП на JavaScript. П'ять обов'язкових алгоритмів JavaScript розробника. Автор – Тисячний Влад, Middle React.js / React Native Developer. Якщо Ви розробник-початківець і хочете розібратися в тому, наскільки глибоко потрібно вникати у вивчення алгоритмів і структур даних, як часто і які алгоритми потрібно буде використовувати в роботі, хочете зрозуміти, як від правильного вибору алгоритму залежить швидкість роботи сайту, а також дізнатися, як оптимальність алгоритму впливає на швидкість завантаження інформації на сайті — тоді цей вебінар для Вас. У ньому розглядаються такі теми: Що таке алгоритми та структури даних. Як правильно рахувати складність алгоритму. Чи потрібно знати всі алгоритми і як це впливає на ваш гаманець (приклади реального життя). 5 найважливіших алгоритмів. Практика написання алгоритмів сортування. Відповіді на питання.   Підготовка до співбесіди з JavaScript у 2021 році. Автор – Дмитро Мойсеєв, Software Engineer at EPAM Systems. У вебінарі порушуються основні питання на співбесіді з JavaScript, які викликають найбільше нерозуміння, особливо у тих, хто перейшов з іншої мови програмування, а також у тих, хто не знайомий з його складними частинами, такими як замикання, прототипне наслідування та особливості асинхронного виконання коду. Автор торкається наступних тем: Типи даних та їх перетворення. Області видимості та замикання. Прототипне наслідування. Асинхронне виконання коду. Відповіді на запитання учасників вебінару. Даний вебінар буде цікавий тим, хто планує проходити співбесіду на позицію FrontEnd розробника на рівень Junior або Middle Developer. Початківцям він не підійде, тому що в вебінарі не розглядатимуться основи мови, а лише її “гострі кути”. 8. React та Redux на прикладі реального додатку. Автор – Олександр Краковський, Software Engineer at EPAM. Даний вебінар допоможе вам на реальному прикладі розібрати, як взаємодіють та працюють сучасні інструменти розробки – React та Redux. Ви зможете написати свій додаток, який буде працювати з реальним API. У ході реалізації програми будуть виконані наступні пункти: Встановлення залежностей, налаштування проєкту. Створення базових компонентів та підключення Redux. Налаштування залежностей для роботи із запитами до сервера. Створення запитів та оброблення даних через Redux. Запуск програми, виправлення помилок. Аналіз виконаної роботи. 9. Створення першого проєкту на Angular Автор – Генріх Коваленко, FrontEnd Developer. У цьому вебінарі ви познайомитеся зі структурою та компонентами фреймворку Angular, а також створите перший проєкт із використанням Angular CLI. На вебінарі розглядаються наступні теми: Що таке Angular і в чому його відмінність від інших популярних фреймворків та бібліотек. Angular CLI, його встановлення та використання у створенні першого проєкту. У чому призначення компонентів та як їх застосувати для зручності підтримки коду надалі. Обслуговування Angular. Модулі. Пайпи та їх застосування, створення своїх пайпів. Директиви *ngFor та *ngIf. Підсумки. Запитання, відповіді. Даний вебінар буде цікавий тим, хто володіє мовою JavaScript на базовому рівні і хоче познайомитися з Angular для подальшої роботи з даним фреймворком. 10. Як стати React розробником Автор – Олег Мельничук, Full Stack JS Developer. React — бібліотека JavaScript, яка впевнено тримає позиції у світі веб-розроблення поруч із найпопулярнішими фреймворками. На вебінарі піднімається історія виникнення React.js, після чого йде порівняння з іншими популярними веб-технологіями. Автор розповідає, чому React – це гарний вибір для входу до FrontEnd. Ви дізнаєтесь, наскільки потрібний чистий JS і чи можна відразу вивчати React. Буде детально розібраний Roadmap React розробника: що можна пропустити на перших етапах, що краще вивчити детально, а на що не варто витрачати сили. Також, автор надає перелік знань та навичок, з якими можна знайти першу роботу у якості React Developer`a. Буде порушено питання подальшого розвитку – як із Frontend розробника на React можна стати Full Stack або Mobile розробником. Цей вебінар буде цікавий Frontend розробникам-початківцям, а також веб-розробникам, які планують перейти на React або вивчити його як додаткову технологію. Вивчайте FrontEnd розробку на ITVDN!

10 полезных фич в Angular, о которых вы могли не знать Angular - это объемный фреймворк, и наверняка большинство из нас использует лишь небольшую его часть. Но за этим мы можем упускать некоторые весьма полезные его возможности, которые сделали бы нашу жизнь значительно проще. В этой статье я собираюсь разобрать около 12 полезных фич в Angular, о которых вы могли и не слышать. Одна из вещей, о которой часто забывают, но которая таит в себе множество полезностей, является Pipe. Итак, давайте поговорим о них. KeyValuePipe Это одна из ключевых особенностей Angular 6.1. До этого все, что позволяла директива *ngFor, так это проитерировать массив или другую счисляемую конструкцию. Что же в случае со свойствами объектов или элементов Map - перебрать их было задачей отнюдь нетривиальной. Это как раз тот случай, когда может пригодиться директива KeyValuePipe! Мы просто ставим pipe по отношению к объекту, который желаем проитерировать, и все остальное за нас совершает ngFor. К примеру:   Slice Pipe Отображение списка предметов и манипуляция большим объемом DOM-элементов - задача достаточно затратная, потому порой могут возникать ситуации, когда мы захотим уменьшить количество отображаемых элементов. Выполнить это можно многими способами, но Angular обладает прекрасным SlicePipe, который позволяет нам выполнить все это всего лишь как часть нашего ngFor - выражения. К примеру, давайте представим, что мы хотим отобразить только первые 10 элементов массива:   Decimal Pipe Этот pipe предназначен для форматирования чисел. Он может быть весьма полезен, когда мы желаем ограничить число цифр, которые будут показаны после точки. Впрочем, он также может быть использован, когда мы просто желаем представить определенное число в более "презентабельном" виде, с запятыми после каждой тысячи. Так, 1000 у нас станет 1,000. Кроме того, стоит также упомянуть еще об одной полезной фиче здесь. А именно, функции formatNumber, которая является частью @angular/common, что позволяет применять то же самое форматирование на программном уровне.   JSON Pipe Крайне полезный инструмент, особенно при отладке. Позволяет вам отобразить объект в виде строки в представлении. Подобный подход может стать неплохой альтернативой точкам остановки и командам отладчика в некоторых случаях. Просто добавьте JSON pipe объекту, который вы желаете отобразить:   Заголовок и мета-сервисы Становятся особенно полезными, когда мы работаем с поисковиками или соц. сетями (по типу Google, Twitter, Facebook и т.д.). Эти платформы для формирования контента, названия, его описания используют теги <meta>. К примеру, в нашем блоге для каждой статьи существуют свои заголовки, описания, картинки и так далее. Дабы убедиться в достоверности предоставляемой информации, мы можем поместить все необходимое в специальные мета-теги, как показано на примере ниже: Плюс у нас есть сервис Title, который, как вы понимаете, обновляет заголовок, отображаемый в окне браузера. Достичь этого можно просто и незамысловато: просто добавить значение тегу <title> в заголовке документа. Впрочем, здесь, увы, мы не сможем использовать стандартную Angular-привязку: <title>{{ myTitle }}</title>, так как <head> не находится внутри Angular-компонента. Поэтому здесь мы должны использовать сервис Title. Использовать его очень просто: Дабы позволить социальным сетям обнаружить эти мета-теги, они должны быть представлены на странице в момент ее загрузки (без использования JavaScript).   ng-container Пытались ли вы когда-либо поместить две структурные команды на один и тот же элемент, впоследствии обнаружив, что вы не можете это сделать? Или, возможно, вы применяете при этом ngTemplateOutlet, отмечая, что сие не позволяет в качестве дочернего, а лишь как родственный? Согласны, это может быть весьма утомительно, особенно если единственный способ решить сей ребус - добавить обертку в виде <div>, что, безусловно, может "замусорить" существующую DOM-структуру. К счастью, существует ng-container, что позволит вам избежать подобных проблем. Этот элемент, доступный при разработке, на самом деле не создает никаких новых элементов в структуре DOM-дерева и может быть прекрасным решением для обеих вышеназванных ошибок и даже более! К примеру, дабы использовать несколько структурных деректив, мы может просто сделать следующее: После чего просто применить существующий темплейт в качестве дочернего: Это лишь малая часть возможных применений сего инструмента, уверяю вас, при желании ng-container можно использовать и для более широкого круга задач. Декоратор атрибутов Все мы знаем, что свойства-декораторы @Input и @Output используются для привязки и порождения событий. Впрочем, существует другой, менее известный декоратор, @Attribute. Этот декоратор чем-то похож на @Input-декоратор, так как он может быть использован для передачи значения компоненту. Привязка атрибута чем-то похожа на scope-привязку AngularJS: Для начала, давайте изучим ограничения декоратора!             - Любые значения должны быть представлены строковым типом данных             - Значения статические и не изменяются, в отличие от привязок             - Мы не можем использовать синтаксис привязки [attribute] В то время, как существуют определенные незначительные ограничения, выигрыш от повышенной производительности будет более значимым. Они могут быть использованы точно так же, как и @Input-декоратор:   Мониторинг изменений профиля Я уверен, все мы знаем о функции enableProdMode, что будет вызвана в main.ts-файле любого проекта Angular CLI. Впрочем, здесь также существует функция enableDebugMode. Конечно, мы можем думать, что, мол, если я не работаю в прод-режиме, значит, я работаю в режиме отладки, но, кхм, все не совсем так. Вызывая эту функцию, мы получаем дополнительный инструмент - window.ng объект, что называют профилировщиком. Профилировщик имеет в своем арсенале функцию timeChangeDetection, при вызове которой выводится консольная информация о том, сколько произошло change-detection - циклов (а также о том, сколько времени они заняли). Может быть очень полезно при профилировании приложений с низкой производительностью. Для вызова функции добавьте следующее в коде bootstrap: Для запуска профилирования, введите в DevConsole следующее:   NgPlural Во многих приложениях бывают случаи, когда необходимо описать определенное число элементов, и в рамках нашего приложения нам нужно предусматривать различные ситуации. К примеру, рассмотрим следующие варианты:             - Предметов нет вообще             - Есть только один предмет             - Есть только два предмета Директива же ngPlural очень проста в использовании, и предназначена она для обработки подобных случаев:   ngPreserverWhitespaces & NgNonBindable Я решил сгруппировать две эти директивы, так как используются они в принципе в схожих условиях. В Angular 5 существовала опция preserveWhitespaces, добавленная в angularCompilerOptions. Если бы ее значение было равно false, оно бы позволило компилятору избавиться от пробелов, которые не считались существенными. Конечно, читабельность могла бы пострадать, но, с другой стороны, это позволило бы уменьшить размер пакета. Впрочем, бывают случаи, когда мы желаем сохранить пробелы. Если мы хотим оставить целый компонент нетронутым, нам необходимо просто использовать опцию в декораторе компонента: Впрочем, мы также можем желать оставить нетронутым пробел в определенном DOM-элементе. В таком случае мы можем использовать директиву ngPreserveWhitespaces. Также мы можем использовать {{ }} в нашем документе, впрочем, в любом случае Angular сочтет это за использование интерполяции и попытается оценить, что находится внутри ее. В таком случае нам придется кстати ngNonBindable.   Ну, вот и все! Здесь были описаны 10 вещей, которые вы могли не знать об Angular. Надеюсь, вы найдете их полезными! Автор перевода: Евгений Лукашук Источник

Каков Ваш код на... запах? Как люди мы имеем огромное количество различных желез на теле. Как у программистов у нас есть множество строчек кода в проектах. Как у людей некоторые наши железы выделяют запах - хороший или не очень. Как у программистов некоторые наши строчки кода также могут иметь своеобразный "запашок". В мире программирования "запашок" недопустим. Подобно тому, как неприятный запах может свидетельствовать о различных медицинских проблемах организма, плохо организованный код также может быть симптомом плохо построенной архитектуры приложения. Итак, должны ли мы беспокоиться при наличии "запаха" у нашего кода? "Запах" кода - это не то же самое, что и баг. Если коротко, "запах" кода - это та ситуация, когда вроде бы нам не очень нравится код, который мы написали, но не так, чтобы его исправлять или переписывать... Это как раз таки фатальная ошибка. Рост кода подобен по своей природе росту дерева. Отсекание некошерных веток важно, чтобы дерево оставалось в добром здравии. Если этого не делать, ветки становятся все длиннее и длиннее - и, как следствие, процесс сбора плодов также становится затруднительным. Без рефакторинга поддержка кода может стать затратным вложением. Дурной запах кода усложняет поддержку, так как любой код требует поддержки. Вообще, "запах" кода был классифицирован в зависимости от сценария, который он представляет. Эта статья - краткий взгляд на различные виды несовершенств кода, чтобы мы могли понять, на что стоит обратить внимание в разрабатываемых продуктах. И давайте быть честными по отношению хотя бы к самим себе: если не сейчас, то никогда. Что же, начнем! "Дух" плохих методов Первое, на что стоит обратить свое пристальное внимание, - это название метода. Также не стоит забывать и о названиях и общей длине параметров. Вот типичный "идеальный" метод: Название четкое и ясное Не длиннее 30 строчек и принимает не более 5 параметров Реализация - простейшая из возможных, нет "мертвого" кода Здесь представлен список возможных несовершенств:   Название Описание 1 Мертвый код метод не используется. 2 Ленивый объект метод делает очень мало работы. 3 Посредник все, что делает этот метод, - это вызывает другой метод. 4 Божественный метод метод исполняет слишком много обязанностей. 5 Длинный список параметров не забываем про рекомендацию в 5 параметров. 6 Перекрученная сложность слишком сложная реализация простых операций. 7 Цикличный ад злоупотребление циклами и условными конструкциями. 8 Излишняя близость метод очень сильно зависит от особенностей реализации другого метода. 9 Завистливый объект метод полагается на данные другого объекта больше, чем на свои. 10 Черная овечка метод сильно отличается от других методов класса. "Запашок" класса Проверяйте название класса и то, насколько реализуемый классом контракт отвечает его сути. Как правило, идеальный класс прекрасно отображает назначение различных сущностей на уровне бизнес-логики и реализует ее в рамках архитектуры, выбранной для самой бизнес-логики. Вот список возможных несовершенств, связанных с классом:   Название Описание 1 Ленивый объект класс выполняет слишком мало работы. 2 Посредник класс ничего не делает, просто вызывает объекты другого класса. 3 Божественный объект класс слишком много о себе возомнил. Реализует слишком много операций. 4 Узколобое мышление слишком примитивная реализация типов с особым назначением. 5 Шпион на допросе реализуемый классом интерфейс не сообщает достаточное количество информации, чтобы понять назначение объекта. 6 Эксгибиционист необязательное раскрытие внутренних деталей реализации. 7 Излишняя близость класс слишком сильно зависит от реализации объектов, на которые он ссылается. 8 Жадинка класс наследует поведения объекта, тогда как на самом деле классу нужны лишь некоторые его фрагменты. 9 Неопределенность разработка класса становится слишком сложной из-за вороха фич, которые "когда-то" будут доведены до ума. 10 Непостоянство класс содержит член данных, не характерный для всего времени жизни объекта. Общее впечатление о коде Рассматривая более высокий уровень абстракции, стоит также упомянуть несколько немаловажных аспектов:   Название Описание 1 ​Утраченный смысл код не совсем точно реализует требуемую от него задачу. 2 Выбирай, что хочешь та же самая проблема уже решена - причем несколькими способами. 3 Комбинаторный взрыв различные участки кода делают одно и то же, но с разным набором параметров. 4 Не копируй себя много идентичного кода. 5 Сложность слишком сложная реализация простых вещей. 6 Размазня нет единого глобального класса. Ответственность размазана по целому вороху промежуточных классов. 7 Подводный айсберг изменения внешне не связанных компонентов затрагивают слишком много вещей.  8 Спагетти-код изменение одного компонента требует множество мелких изменений в других местах. 9 Пиар-комментарии классные комментарии в плохом коде. 10 ​Информационный комок группа переменных почти всегда передается вместе. Стоит также уделить минутку своего внимания комментариям в коде. В то время, как комментирование назначения метода будет полезным для всех, кто читает его, комментирование реализации метода - достаточно спорное решение. Риск состоит в том, что по неосторожности можно использовать упомянутые "пиар-комментарии" к тем строчкам, которые этого отнюдь не заслуживают. Отличный код таков, что нуждается в малом количестве комментариев, так как его реализация становится понятной интуитивно. Комментарии стоит использовать, когда мы комментируем особенности технических решений, вещи, оставленные для рассуждения или будущие этапы разработки. Как бы это странно ни прозвучало, но комментарии никогда не должны рассматриваться в качестве обязательных для написания. Также не стоит забывать о различных тестах (в особенности о тех, которые не пишутся просто для повышения процента покрытия кода). Стереотипы Конечно же, куда без них. Кто-то может утверждать, что подобные тонкости коддинга начали выделять с прогрессом информационной индустрии. Мол, "запашок" кода очень часто является следствием "плохих привычек" написания или же в силу определенных обстоятельств. Подобные оправдания звучат несколько неубедительно и говорят о тараканах в голове разработчика: каждый уважающий себя программист должен стараться писать хороший код абсолютно всегда. По умолчанию! Другой стереотип, о котором также стоило бы упомянуть, - это избыточная вера в рефакторинг. Что же, рефакторинг как процедура переписывания кода также может быть выполнен из рук вон плохо. Излишняя цикличность, слишком сложные решения и прочее-прочее запросто может быть добавлено в проект из лучших побуждений - особенно в том случае, если по принципу организации исходный код не сильно отличается от здорового клубка спагетти. В итоге все разработчики могут "запачкать" свой код. Что хуже, часто это бывает под давлением внешних обстоятельств, особенно у "временных" разработчиков для хотфиксов. Проверки качества кода должны происходить всегда сразу после быстрых релизов. И в заключение Большинство из тех проблем, с которыми мы сталкиваемся, часто связаны с логическим промежутком, пропастью между уровнем абстракции выбранного языка программирования и языком бизнеса. Чем больше нам удается отстранится от "самовыражения" посредством языка программирования к бизнес-целесообразности, тем более читабельным и поддерживаемым будет наш код. Гранулярность, модульность, разделение задач и все те прекрасные теоретические концепции, о которых мы могли слышать до этого, становятся конкретными и вещественными, когда мы загораемся желанием следовать концепции делового прагматизма и утилитарности. Источник Переводчик: Евгений Лукашук

Что нового в Angular 4? Наконец, когда обновленная технология предстала перед нами, мы можем приступить к ее изучению! То, что новый представитель семейства Angular приобрел новый номер, свидетельствует об инновационных изменениях. Но все же встает вопрос: почему Angular 4, а не 3? Все достаточно просто: так как пакет маршрутизатора был уже представлен в версии 3.x, вместо того, чтобы вносить все нововведения в версию 3.0, а маршрутизатор перенести в 4.0, разработчик решил объединить все в версии 4.0. Не стоит волноваться касательно обновления Ваших приложений к новой версии Angular: так как тех самых инновационных изменений в принципе оказалось не слишком много, процесс установки не занял больше нескольких минут. Ничего особо страшного. Среди дополнительных требований стоит упомянуть версию TypeScript 2.1 или выше (раньше требовалась только 1.8+). К тому же некоторые элементы интерфейса были изменены или вовсе упрощены (редко используемые OpaqueTolen или SimpleChange). Плюс, TypeScript 2.1 и 2.2 приобрел целый ряд прекрасных особенностей, которые теперь поддерживаются в Angular 4. К примеру, в скором времени Вы сможете использовать TypeScript-опцию stringNullChecks. Итак, что именно позволяет нам новая версия Angular? Давайте углубимся!   Ahead of Time (AoT) компиляция: обновленный движок представлений Пожалуй, это наиболее значимое изменение, пусть даже Вы, как разработчик, не ощутите разницы. Как Вы, наверно, знаете, в режиме AoT Angular компилирует Ваши шаблоны во время сборки, после чего генерирует JavaScript код (в отличие от режима Just in Time, когда компиляция происходит во время выполнения приложения). Режим AoT обладает целым рядом преимуществ, например, в случае неправильного построения шаблона ошибка возникнет во время сборки, а не во время работы приложения, как раньше. Эта методика позволяет ускорить запуск приложения, так как генерация JS-кода уже произведена. Также Вам не нужно отправлять Angular-компиляторы пользователям, что в теории должно уменьшить размер пакетов. Почему в теории? Потому что, как правило, обратная сторона медали в том, что сгенерированный JavaScript-код обычно больше, чем нескомпилированные HTML-шаблоны. Таким образом, в большинстве приложений с использованием AoT размер пакета де-факто увеличивается. Разработчики Angular хорошо поработали над новым движком представлений, что позволило производить меньше кода при использовании Ahead of Time компиляции. Эффект на больших приложениях не заставил себя ждать. Без падений производительности. Ежели говорить в цифрах, размер пакета стал: С 499 КБ до 187 КБ (или с 68 КБ до 34 КБ после gzip) С 192 КБ до 82 КБ (или с 27 КБ до 16 КБ после gzip) Достаточно большая разница! Интересно отметить, что в своих дизайн-документах команда Angular сравнивает производительность (как в контексте времени выполнения, так и в контексте нагрузки на память) с базовой имплементацией (лучшим «дефолтным» кодом JS, который они только могут написать) Angular 2.x и InfernoJS (быстрая React-подобная имплементация). Универсальность Масса работы была проделана над универсальным проектом, позволяющим производить серверный рендеринг. Когда раньше этот тип проекта поддерживался в основном силами сообщества, теперь, начиная с Angular 4, поддержка приобрела официальный характер. Анимации Анимации теперь обзавелись собственным пакетом @angular/platform-browser/animations (одна из вещей, которая может быть изменена в процессе обновления). Что это значит? Это значит, что Вам больше не нужно нагружать пакеты ненужным кодом, если вы не используете анимации. Шаблоны ng-template вместо template Тэг template устарел. Вместо него используйте ng-template. Хотя и первый вариант все еще работает. Вообще, было немного странно использовать template, так как это реально существующий HTML-тэг. Теперь же Angular обзавелась собственным ng-template. В случае, если вы используете устаревший template, будет выдано соответствующее предупреждение: это в значительной мере упростит обнаружение подобного кода в проектах. Else С новой версией Angular 4 появилась возможность использовать оператор else: <div *ngIf="races.length > 0; else empty"><h2>Races</h2></div> <ng-template #empty><h2>No races.</h2></ng-template> As Еще одно синтаксическое нововведение. Ключевое слово as позволяет упростить синтаксис let. As позволяет хранить результат переменной шаблона для дальнейшего использование в элементе. К примеру, сия особенность может быть достаточно полезной для хранения коллекции: <div *ngFor="let pony of ponies | slice:0:2 as total; index as i">   {{i+1}}/{{total.length}}: {{pony.name}} </div> Или даже более полезной, если один раз использовать pipe с async. Вместо плохого и некрасивого: <div>   <h2>{{ (race | async)?.name }}</h2>   <small>{{ (race | async)?.date }}</small> </div> Вы можете использовать: <div *ngIf="race | async as raceModel">   <h2>{{ raceModel.name }}</h2>   <small>{{ raceModel.date }}</small> </div> Различные виды pipe Titlecase Angular 4 презентует новый pipe: titlecase. Он позволяет переводить первую букву каждого слова в верхний регистр: <p>{{ 'ninja squad' | titlecase }}</p> <!-- will display 'Ninja Squad' --> Http Задание параметров поиска Http-запроса было упрощено: http.get(`${baseUrl}/api/races`, { params: { sort: 'ascending' } }); Раньше вам необходимо было произвести следующее: const params= new URLSearchParams(); params.append('sort', 'ascending'); http.get(`${baseUrl}/api/races`, { search: params }); Test Переопределение шаблона во время теста также было упрощено: TestBed.overrideTemplate(RaceComponent, '<h2>{{race.name}}</h2>'); До этого мы обычно писали так: TestBed.overrideComponent(RaceComponent, {   set: { template: '<h2>{{race.name}}</h2>' } }); Сервисы Meta Для получения содержимого или обновления meta-тэгов был введен новый сервис: @Component({   selector: 'ponyracer-app',   template: `<h1>PonyRacer</h1>` }) export class PonyRacerAppComponent { constructor(meta: Meta) {     meta.addTag({ name: 'author', content: 'Ninja Squad' });   } } Формы Валидаторы Новый валидатор позволит объединить существующие required, minLength, maxLength, и pattern. email позволит провести валидацию e-mail адреса (если Вы планируете просто обойтись подходящими регулярными выражениями – удачи в поисках). Сравнение выбранных опций Для сравнения выбранных опций была добавлена новая директива: compareWith: <select [compareWith]="byId" [(ngModel)]="selectedPony">    <option *ngFor="let pony of race.ponies" [ngValue]="pony">{{pony.name}}</option> </select> byId(p1: PonyModel, p2: PonyModel) {    return p1.id === p2.id; } Маршрутизатор ParamMap Для представления параметров URL был введен новый интерфейс: ParamMap. Вместо использования params или queryParams, отныне Вам стоит использовать paramMap или queryParamMap, так как они позволяют выбрать между get() для получения значения или getAll() для получения всех значений (так как параметры запросов могут иметь несколько значений, к примеру). const id = this.route.snapshot.paramMap.get('ponyId'); this.ponyService.get(id).subscribe(pony => this.pony = pony); Или как здесь:   .map((params: ParamMap) => params.get('ponyId'))   .switchMap(id => this.ponyService.get(id))   .subscribe(pony => this.pony = pony); CanDeactivate Интерфейс CanDeactivate теперь обзавелся дополнительным опциональным параметром, содержащим следующее состояние (то, куда Вы собираетесь перейти). Теперь можно реализовать «умную логику», когда пользователь может покинуть текущий компонент в зависимости от того, куда он или она направляется. I18n Интернационализация также медленно, но верно улучшается. К примеру, ngPlural теперь упрощен: <div [ngPlural]="value">   <ng-template ngPluralCase="0">there is nothing</ng-template>   <ng-template ngPluralCase="1">there is one</ng-template> </div> А теперь давайте сравним с тем, что было раньше: <div [ngPlural]="value">   <ng-template ngPluralCase="=0">there is nothing</ng-template>   <ng-template ngPluralCase="=1">there is one</ng-template> </div> Только что мы добавили целую главу к нашей электронной книге, включая несколько юз-кейсов и прочее! Подведем итоги Релиз Angular 4 привносит множество улучшений и действительно востребованных инноваций в сферы размера генерируемого кода, сохраняя в целом концепцию предыдущей версии Angular. Благодаря этому обновление технологии не должно вызвать затруднений. Автор перевода: Евгений Лукашук Оригинал статьи

Введение Устройства, которые можно одевать, сейчас очень распространены. Они уникальные, модные, продуктивные и позволяют оставаться на связи в нашем цифровом образе жизни. Однако, надеваемые гаджеты также могут быть подрывными в мобильном пространстве. Пока разработчики увлечены переходом на кросс-платформенную разработку родных или гибридных мобильных приложений, прибывают носимые устройства от Apple, Microsoft и Google, каждая из которых обслуживает свою соответствующую платформу и прокладывает собственный путь развития как дополнение к уникальным принципам UX. Если Вы  поклонник Microsoft Band, то у Вас есть основания для радости. И не только потому, что Band – одно из немногих носимых устройств, которые работают кросс-платформенно с любым Вашим телефоном. Также очень просто добавлять пользовательские данные на запястье в качестве Band-приложения. Все, что для этого потребуется – стандартный терминал данных и немного веб-навыков.  В этой статье мы покажем, как добавлять веб-данные в Ваше устройство Band с помощью Web Tiles. Перспектива Поскольку потребителям нравятся такие устройства, возникает новая экосистема, которую разработчикам надо поддерживать. Конечно, носимые устройства забавные, очень личные и предоставляют возможности для завлечения пользовательского опыта, но разработчикам теперь приходится работать с исключительно маленькими экранами, пересматривать содержание приложений и пользовательский интерфейс, чтобы оставаться в первых рядах, учитывая переход мобильных приложений на кросс-платформу. Еще одна сложность при разработке носимых устройств исходит из того, что такие устройства неразрывно связаны с соответствующей принимающей мобильной операционной системой. В конце концов, такая разработка часто представляет собой разработку нативного приложения, и разработчик должен знать родной SDK, паттерны программирования и цель, чтобы получить нужный опыт взаимодействия(User eXperience, UX). Мы можем наблюдать, как Apple сейчас пытается дистанциировать Apple Watch от родительского iPhone в следующем выпуске Watch OS 2. Пока что нам все еще приходится обращаться к родительской системе, но обнадеживает, что у носимых гаджетов есть собственная операционная система и приложения могут быть самодостаточными, а не пребывать в зависимости от соответствующей мобильной платформы. MICROSOFT BAND Microsoft Band представляет собой нечто среднее между фитнес-устройством и умными часами. Устройство Band заполнено датчиками -  оптическим датчиком сердечного ритма, акселерометром, GPS, датчиком освещенности, температуры, ультрафиолетовым сенсором, сенсором емкости, микрофоном и гальваническим датчиком отклика на касание. Однако, несмотря на преимущества, которыми располагают все эти сенсоры, строительство приложений сильно усложняется. Разработчик SDK для Microsoft Band очень мощный, предоставляет разработчикам полный доступ к API canvas, чтобы делать убедительные приложения для Band. SDK можно применять для создания персонализированных, интерактивных фрагментов, используя пользовательские макеты, что вмещают текст, иконки, кнопки и штрих-коды. Тем не менее, Вам надо построить собственные мобильные приложения для каждой платформы, чтобы в дальнейшем построить сопутствующее устройство Band. Несмотря на то, что существует фреймворк Xamarin, позволяющий разрабатывать кросс-платформенные приложения, это далеко непросто для разработчиков. Последние обновления Все изменилось с последними обновлениями для Microsoft Band  и платформы разработки Health. Самой интересной особенностью является новая поддержка для Web Tiles. Вам больше не нужны нативные мобильные приложения, можно просто повторно использовать веб-данные. Каждый пользователь Band непременно использует приложение Microsoft Health – что изначально есть на каждой мобильной платформе. Тогда почему бы не усилить повсеместность приложения Health и интернет-подключения Band, чтобы принести в устройство облачные данные?  Web Tiles делают доставку информации к пользователям Band максимально просто и практически из любого интернет-источника. Также новым есть предварительный просмотр облачного Microsoft Health API, который предлагает RESTful API для повышения использования приложения в режиме реального времени, для фитнес-пользователей и отслеживания здоровья. Автоматизация Web Tiles Подача данных Предусматривая веб-фрагменты для Band, в первую очередь, Вам надо решить, какие данные надо выводить. Соответственно, это должны быть короткие порции информации для Ваших Band-пользователей. Вы должны выбрать правильный контент – действительно значимую информацию для беглого просмотра на пользовательском запястье. Web Tiles могут получить доступ практически к любому интернет-источнику данных , пока данные поступают через конечные точки RESTful и доступны в стандартных форматах как ATOM/JSON. Пока нет нехватки в таких конечных точках. Сейчас в свободном доступе находятся данные из Telerik Developer Network (TDN). Если Вы находитесь на сайте TDN, можете просто нажать на ссылку RSS или просто перейти к http://developer.telerik.com/feed/. Строка новостей RSS вмещает в себя статьи из TDN. Давайте рассмотрим, как создать список этих последних статей на Band-устройстве, используя Web Tiles. Инструмент разработки Самый простой способ построить Web Tiles - это использовать инструмент разработки Microsoft Band Web Tile, просто нажмите большую кнопку Get Started. Это простой 5-шаговый инструмент разработки с веб-интерфейсом. На самом деле, Вам даже не нужно быть разработчиком, чтобы им пользоваться. Мастер проведет Вас через все этапы, необходимые для создания Band Web Tile. Ниже представим разработку Web Tile для статей TDN. 1. Выберите из представленного набора стандартных макетов для отображения данных, каким образом пользователь будет запускать свой Tile. 2. Укажите инструмент разработки Web Tile на свое устройство подачи данных. Обратите внимание на использование RSS, как показано ниже. 3. Дальше мы преобразим некоторые данные, в основном, через перетягивание. В соответствии с выбранным макетом Вы получите несколько заполнителей для отображения данных. Инструмент будет влиять на подачу данных, которые Вы указали. Это для того, чтобы дать нам представление о данных, которые будут отстранены от облачного источника данных. Вам всего-то нужно переместить повторяющиеся элементы данных в динамические заполнители с помощью цветового кодирования – и все подключено. Также от устройства подачи можно задавать статический контент поверх динамического, если Вам захочется. 4. Затем, настройте цветовую схему для Web Tile и обеспечьте некоторую идентифицирующую информацию для пользователя. Обратите внимание на примерный показ того, как будут выглядеть ваши данные в Band. Здесь же Вы получите нужную иконку для представления вашего Web Tile – она должна иметь прозрачный фон, соответствовать расширению 46x46px и рекомендациям пользовательского интерфейса UI для Band. 5. Последний шаг мастера настроек позволяет скачать предварительную версию Web Tile на компьютер. В итоге, Вы получите файл с расширением .webtile  – просто архивированный файл со всеми заданными Вами конфигурациями. Источник: http://developer.telerik.com/featured/create-a-microsoft-band-app-with-web-tiles/