Веб-розробка в 2020 році: яким інструментам кодування слід навчитися

Сьогодні один з моїх улюблених викладачів, Бред Треверсі, опублікував огляд того, що він рекомендує вам навчитися стати веб-розробником у 2020 році.

Бред вирізає багато галасу, який ви чуєте в соціальних мережах. Його поради практичні та реалістичні. І я погоджуюся з ним майже у всьому, що він рекомендує вам вивчити.

Головне, на чому підкреслює Бред - і на чому я завжди наголошую, - це не відчувати себе розчарованим і не дозволяти собі бути пригніченим.

Пам’ятайте: навчальна програма freeCodeCamp охоплює більшість цих інструментів, і це допомогло понад 40 000 людям влаштуватися на роботу розробниками. Якщо ви сумніваєтесь, просто зосередьтеся на цьому.

Для вашої зручності я підсумував основні ідеї Бреда нижче. При цьому я закликаю вас переглянути його повне відео, яке я вклав нижче. Він додає багато деталей далеко за межі того, що передають ці нотатки. Це 73-хвилинний годинник.

Веб-розробка в 2020 році: огляд

Основна мета відео - ознайомити вас з деякими найбільш поширеними інструментами веб-розробки, доступними для веб-розробників.

"Я не намагаюся завалити вас технологіями. Це просто варіанти, які у вас є ... Існує багато технологій. Коли ви почуєте щось на зразок Nuxt або Gatsby, я хочу, щоб ви знали, що це. А потім Ви можете вибрати, хочете ви це навчитися чи ні ".

Бред починає із заохочення людей спочатку запитати, що вони хочуть робити. Ви хочете працювати у виробничій компанії? Або працювати консультантом? Хочете займатися фрілансом? Або побудувати власний продукт?

Багато його порад щодо того, чому навчитися, зводиться до того, які ваші цілі. І він розробляє багато своїх пропозицій щодо інструментів у цьому світлі.

Для початку він рекомендує вивчити те, що він називає "Необхідності".

Він зазначає одну протиречувальну річ: вам не потрібен вигадливий комп'ютер для веб-розробки. "Це не схоже на розробку ігрового движка чи щось подібне, тому ви можете використовувати ноутбук або настільний комп'ютер середнього класу, а в деяких випадках і комп'ютер нижчого класу".

Він використовує MacOS, Windows 10 та Linux для хмарних серверів і навіть для деяких своїх медіасерверів.

Він є великим шанувальником VS Code для свого редактора і використовує Chrome та його вбудовані DevTools для налагодження на основі браузера. Однак він вважає, що Firefox також пройшов довгий шлях і є життєздатною альтернативою.

Він рекомендує починати зі стандартних HTML і CSS, а також вивчати нові інструменти CSS, такі як Flexbox та Grid.

Він вважає, що вивчення адаптивного веб-дизайну в 2020 році повинно бути даним. "Кожен серйозний проект, який ви створюєте, повинен виглядати добре і бути повністю придатним для використання на всіх пристроях".

Замість того, щоб покладатися на фреймворки CSS, такі як Bootstrap, він рекомендує потренуватися у створенні власних модульних компонентів CSS, які потім можна використовувати повторно протягом усього проекту.

Тим не менш, він каже, що ви можете зіткнутися з ними, працюючи над проектами для різних роботодавців.

Він конкретно згадує Хвіст, про який я раніше не чув. Tailwind дещо відрізняється від інших фреймворків CSS. Вона зосереджена на «класах корисності», які ви можете поєднати, щоб досягти бажаного з дизайном.

Не дивно, що Бред рекомендує по-справжньому добре працювати з JavaScript.

Навчання в практичному темпі

У посібнику Бреда він неодноразово наголошує на необхідності практичності.

Так - для всього існують найкращі практики. Але в багатьох випадках існує досить хороший спосіб, який допоможе вам швидше рухатися і робити більше, не занурюючись в інструменти.

Одне з найцікавіших (і, можливо, єретичних) речей, які він говорить:

"Немає необхідності вивчати DevOps і AWS, і всі ці речі для невеликого сайту. Хостинг-сайт або керований хостинг-сайт, такий як InMotion або Hostgator, чудово. Це дозволяє виконувати [розгортання] прямо в браузері. Не потрібно надто ускладнювати речі ".

Він стверджує, що навіть у 2020 році є що сказати про використання звичних інструментів.

Для людей, що не знайомі з веб-розробкою, Бред рекомендує спочатку дійти до того, що вони можуть працювати базовим веб-розробником. Це дозволить вам створювати веб-сайти для місцевого бізнесу як фрілансер.

"Хіпстери скажуть, що вам обов'язково потрібно використовувати фронтенд-фреймворк. Я не думаю, що це правда. Якщо ви хочете рендерити шаблони на сервері, не використовуючи фронтенд-фреймворк, я думаю, це абсолютно нормально, але є багато роботи, які шукають щось на зразок React або Vue ".

Але після того, як ви будете готові вирішити фронтед-фреймворки, він рекомендує вивчити React, Vue та Angular. "Спробуйте всі три і зрозумійте, який з них вам найбільше подобається".

Він також киває Svelte - що не є фреймворком, а скоріше компілятором. Але він каже, що це, мабуть, занадто нове, щоб намагатися взяти участь у 2020 році.

І він обговорює зростаючу популярність рендерингу на стороні сервера. Маршрутизація на основі файлової системи означає, що вам не потрібно створювати складний файл маршрутизації. Натомість ви можете просто помістити файли в каталог, у якому ви хочете, щоб вони були.

Двома популярними інструментами візуалізації на стороні сервера є Next.js (для React) та Nuxt.js (опція Vue).

Ще однією тенденцією, що з’являється, є Static Site Renders, про яку він каже, що вам не потрібно вчитися, але ви повинні знати про це. Наприклад, сайти Гетсбі надзвичайно швидкі і не потребують сервера.

Інструменти розробки ззаду

Для розробки на стороні сервера, Бред віддає перевагу Node.js за його швидкість і тому, що він може використовувати JavaScript як на передній, так і на задній стороні.

Що стосується серверних фреймворків, він рекомендує вивчати Express, оскільки він є найпопулярнішим і "дає вам велику свободу будувати речі так, як вам хочеться по-своєму".

Він також використовує Python для деяких проектів і також рекомендує його.

"Python має два чудові фреймворки. Django - це великий, повнофункціональний фреймворк, оскільки Flask є більш мінімалістичним. Він дає вам те, що вам потрібно, але ви приймаєте решту рішень. Я, чесно кажучи, не можу вибрати один із двох, я любіть їх обох і використовуйте для різних речей ".

І він швидко виступає на захист PHP:

"Багато людей розмовляють з PHP, і це прикро, оскільки PHP може бути чудовою мовою. Це практично і просто розгортати практично в будь-якому місці. PHP чудово підходить для фрілансерів, яким потрібно швидко дістати речі. Якщо ви плануєте працюючи у великій компанії, PHP може бути не найкращим вибором, але якщо ви займаєтеся фрілансом і створюєте особисті проекти, PHP може стати чудовим вибором. Стало круто бити PHP. PHP був першою мовою, яку я вивчив, і мені все ще дуже подобається це ... Якщо ви подивитесь на код Laravel, це дуже елегантно ".

Бред також швидко проходить базу даних і рекомендує багаторічний улюблений PostgreSQL.

Інші інструменти, які, мабуть, тут, щоб залишитися

GraphQL - це альтернатива REST для API. Є кілька курсів, які охоплюють GraphQL як на каналі Бреда, так і на каналі freeCodeCamp. Але він каже: "GraphQL - це не те, чому ти повинен навчитися сьогодні, але він досить великий, і я думаю, що він тут, щоб залишитися. Це більше, ніж тенденція".

Бред також розповідає про Системи управління вмістом (CMS) та про те, як вони переростають у нові "безголові" варіанти, де ви просто використовуєте їх як задній план і кодуєте власний інтерфейс.

"CMS дуже зручні для фрілансерів, у яких є клієнти, які хочуть мати можливість входити в систему та створювати свої публікації в блогах і подібні речі. Багато людей обманюють WordPress, але в Інтернеті величезний відсоток веб-сайтів, якими керує WordPress і це все ще дуже популярно ".

Для веб-серверів він віддає перевагу NGINX перед Apache, оскільки "це, здається, менш складне". Ми широко використовуємо NGINX на freeCodeCamp, і я схильний погодитися.

Бред також пояснює, як працює віртуалізація, і розповідає про те, як можна спростити складніші проекти, стандартизуючи середовище для декількох комп'ютерів. Але він застерігає від спроб віртуалізувати все:

"Docker дійсно хороший для команд. Мені не подобається, коли люди кажуть, що ви завжди повинні використовувати Docker. Це просто перевага. Якщо ви просто хочете запустити локальний сервер LAMP, у цьому немає нічого поганого. Не відчувайте тиску щоб дізнатися щось на зразок Docker ".

І додає, щоб наголосити на чомусь, що я особисто не можу підкреслити: "Я знаю, що багато нерозумних типів хочуть просто ускладнити речі, і я це ненавиджу. Те, що я перелічую все це, не означає, що я наполягаю ви."

Він також швидко зауважує, що більшість великих компаній мають спеціальні команди DevOps (їх також називають "Інженерами з надійності сайтів"), які можуть зробити для вас багато чого.

Приємно мати навички, які ви можете навчитися як спеціальності

Якщо ви хочете випробувати свої руки при розробці мобільних додатків, Бред настійно рекомендує фреймворк Flutter. Він використовує Dart, що є більш незрозумілою мовою. Він описує Дарт як щось середнє між Java та JavaScript, і каже, що якщо ви знаєте будь-яку з цих мов, ви зможете його вибрати.

Його другим вибором для розробки мобільних додатків є React Native, який легко підібрати, якщо ви вже знаєте React.

Потім Бред чудово пояснює, що таке Прогресивні веб-програми та деякі їх переваги. Ось слайд, але знову ж таки, я настійно закликаю вас переглянути його повне відео.

Потім він торкається Electron, який дозволяє створювати настільні додатки за допомогою JavaScript. Спочатку він був скептично налаштований, але каже, що деякі його улюблені настільні програми, такі як VS Code та Discord, тепер створені за допомогою Electron.

Він згадує про JAMstack (JavaScript, API та розмітку) та безсерверну архітектуру. Це більш просунуті теми, на яких як на його каналі, так і на каналі freeCodeCamp на YouTube є відеоуроки.

І тоді він переходить до основних тенденцій 2020 року.

Машинне навчання та веб-збірка

Те, що всі інші говорять про машинне навчання, не означає, що вам потрібно кинути все і навчитися цьому. Ось так він передмовляє цей етап своєї розмови.

І так, ви також можете робити машинне навчання на JavaScript.

"Python є царем для машинного навчання. Але навіть з JavaScript у вас є TensorFlow.js, у вас є Brain.js, щоб створювати нейронні мережі та робити справжні цікаві речі".

З того, як він розповідає про Web Assembly, видно, що він дуже схвильований цим.

"Веб-асамблея все ще перебуває на початковій стадії, але я думаю, що цього року ми побачимо більше цього. Традиційно ми використовуємо JavaScript на веб-сторінці для маніпулювання DOM і запуску обчислень. JavaScript має обмеження щодо швидкості. Мова як C або C ++ набагато швидший, ніж JavaScript. Отже, Web Assembly - це ефективний байт-код низького рівня, який може виконуватися браузером, і це надзвичайно швидко. Він може генеруватися такими мовами, як C, C ++ та Rust. "

Rust - одна з мов, яку ви можете використовувати з WebAssembly (на додаток до C та C ++). Це значно легше в навчанні та використанні, ніж C і C ++.

Але важливо зазначити, що WebAssembly не вибачає вас від необхідності вивчати JavaScript.

"Ви можете майже уявити JavaScript як начальника, і він може сказати Web Assembly, що робити. Отже, це дозволяє нам використовувати дуже швидкі мови низького рівня, такі як C ++, у наших веб-програмах, і це дає нам набагато більше можливостей - як відеоігри наступного рівня та інструменти для редагування відео прямо в браузері - речі, які немислимі лише за допомогою JavaScript ".

На завершення він говорить: "Чим більше ви дізнаєтесь, тим легше навчитися більше і поєднати всі ці технології разом. Постарайтеся не перевантажуватись. Робіть крок за кроком і проводьте деякі дослідження, і з'ясовуйте, хочу зробити ".

Ще раз хочу подякувати Бреду Треверзі за те, що він зібрав це всеосяжне відео.

Люди весь час запитують мене: "що я повинен навчитися, якщо хочу стати веб-розробником?" І моя відповідь: "просто використовуйте freeCodeCamp як свою основну навчальну програму, і по мірі розгалужуйтесь на інші навчальні ресурси".

І я радий сказати, що YouTube-канал Бреда Traversy Media є одним із тих додаткових ресурсів, які я рекомендую найбільш високо.