Як стати веб-програмістом з нуля

Front-end розробник ділиться своїм досвідом.

Спершу дозвольте представитися: Сергій Гарсія (Sergei Garcia). Працюю на повну ставку front end - розробником, 2 роки досвіду. За цей час працював як в консалтинговій фірмі зі списку Forbes 500, так і в невеликій компанії.

Можливо вам здасться, що це маленький досвід, але для мене другий рік роботи став важливою віхою. Я не мав реального досвіду в області веб-розробки, мав малий досвід програмування в цілому. Володів базовими знаннями в C # і Java, отриманими на декількох онлайн-курсах. Також у мене був диплом управлінця IT-проектами, а не комп'ютерника.

Ніколи не писав про свій досвід, незважаючи на допомогу, яку отримав від чудових ресурсів, таких як Medium, Stack Overflow і Reddit. Сьогодні вирішив змінити це і розповісти, що було добре, а що ні. Так що якщо підете в цю подорож, вам пощастить більше, ніж мені.

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

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

Отже, без подальших церемоній, починаємо!

вивчаємо основи

Вирішивши зайнятися веб-розробкою, я задався першим питанням: «Що вивчати?». Після ряду пошуків, я намітив навчальний шлях, ґрунтуючись на вимогах до більшості веб-розробників початкового рівня:

Як це відбувалося.

При бажанні можете вивчати jQuery (хоча я не рекомендую її, подробиці пізніше). Ви можете вивчити її на CodeSchool, курс Try jQuery.

Аналогічний курс HTML CSS можете пройти на Codecademy, отримаєте схожі результати. Якщо готові до виклику переходите до курсу від Udacity Intro to HTML and CSS. Він важче.

Бонус: Дістаньте книгу Джона Дакетта (Jon Duckett) HTML and CSS: Design and Build Websites (HTML і CSS: Розробка та дизайн веб-сайтів) - міцна відправна точка для вивчення HTML і CSS. Високо оцінена на Amazon (4.7 / 5). Грунтовне введення в світ веб-розробки. Красива книга, чистий дизайн, великі літери, барвисті сторінки. Часто повертаюся до неї. Захоплює.

Для тих, хто не знайомий, LessSass - це транспілятори CSS. Дозволяють писати CSS елегантніше. Дозволяють робити речі, які зазвичай не підтримуються, наприклад правила вкладення CSS. Ці транcпілятори «компілюють» код і перетворять його в звичайний CSS.

В даний час є 2 основних транспілятора CSS: Less and Sass. Sass популярнішим. Я зрозумів, що спочатку легше вивчити Less. Тому, що Sass вимагає установки Ruby, від якого я не був в захваті.

Швидкий і повний огляд Less, приклади коду - winless.org/online-less-compiler. Спробуйте Sass онлайн на sassmeister.com (не включає приклади коду).

Неважливо, що будете вивчати Less або Sass. Вони дуже схожі. Якщо вивчіть одну, значить будете знати і іншу. Відмінне порівняння Less and Sass - Comparison between LESSSASS.

Про чуйну дизайні і Bootstrap я дізнався з курсу Codeschool - HTML CSS path. Нещодавно, знайшов курс на Udacity від Google Responsive Web Design Fundamentals (Основи чуйного web-дизайну). Приголомшливо висвітлює основи і не тільки. Ширше, ніж Codeschool.

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

Коли я тільки починав, то й гадки не мав, що таке AngularJS. Багато говорили: якщо хочеш стати розробником вивчи його.

Спочатку вирішив вивчати AngularJS по офіційній документації, але це виявилося страшенною ідеєю. Документація виявилася не простий для новачків, а захаращене форматування ускладнювало читання і розуміння.

Пошукавши на форумах я натрапив на Egghead.io (безкоштовний / платний), там пощастило більше. Матеріал курсу був ясніше, коротше і повніше. Крім курсів пропонувалися 2-5 хвилинні уроки, що охоплюють важливі теми. (Наприклад: що таке контролер? Що таке фільтр? Що таке $ scope? Все це спростило розуміння основ.

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

Один з найпотужніших інструментів для веб-розробників. Чим раніше опануєте їм, тим більше часу заощадите пізніше. Безкоштовний курс від Codeschool Explore and Master Chrome DevTools відмінно розповідає про його застосування.

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

Я знайшов безкоштовний курс Try Github на CodeSchool. Atlassian's Git training чудово висвітлює доступні команди. Codeschool's Git Learning Path також відмінно підходить для вивчення основ Git.

Спробував курси по Node на Codeschool, але зрозумів, що їм не вистачає контенту. NodeSchool.io набагато кращий викладач основ, і не нудний! Мені сподобався практичний підхід, схожий з Codeschool і Codecademy, але з додатковим поліпшенням.

Засоби запуску завдань (Grunt Gulp)

Grunt і Gulp стали великим сюрпризом, тому що я не знав про такі інструменти, але мене обрадували їх можливості! В основному вони дозволяють автоматизувати загальні завдання. Пам'ятайте Less / Sass?

Є 2 головних: Grunt and Gulp. Незважаючи на ідентичність, працюють по-різному.

Знання NodeJS допоможуть краще писати файли Grunt і Gulp, оскільки обидва працюють на NodeJS. Вибирайте який хочете, але я зрозумів, що Gulp набагато легше. Як і раніше вважаю за краще його через мінімалістського підходу.

Я знайшов курси по Grunt і Gulp на Scotch.io. Вони краще.

Труднощі, з якими я зіткнувся на першій роботі

Дві головні помилки:

• Страх невдачі. Оскільки я був новачком, я постійно побоювався, що мій код помилковий або погано написаний, тому витрачав багато часу на подвійну перевірку і дотримувався кращих правил написання коду. Через це рідко намагався приймати нові рішення побоюючись, їх помилковості. Це ефективно закрило моє прагнення до пізнання нові речі.
• Робити так, тому що якийсь «X», знає краще за мене. Спочатку я так і робив. Хоча це і не зовсім неправильно, робити щось певним чином тільки тому, що так сказав експерт «X» з цього питання. Не знаючи чому так- прищепило мене до того, що я реально не знав як все працює. Незабаром я зрозумів, скрізь є винятки. Завжди потрібно знати причину, що стоїть за практиками.

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

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

Застосування AngularJS в реальному проекті також виявилося для мене великою проблемою. Головним чином тому, що я не розумів як працює багато з того, що я робив. Я вважав це «магією Angular».

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

В результаті наткнувся на приголомшливу книгу під назвою Build Your Own AngularJS. Всю не читав. Прочитавши розділ про роботу Scopes and Watchers, і реально відкрив, що магія angular, в дійсності не магія. А лише розумний спосіб підтримки прив'язки даних, використовуючи перевірку даних на зміну. Настійно рекомендую книгу всім, хто хоче вникнути в AngularJS.

Інша проблема, з якою я зіткнувся рік по тому - швидкий розвиток індустрії. Тільки освоїв AngularJS і Grunt, відчував себе гордим і могутнім. Незабаром з'ясувалося, що на горизонті Gulp і ReactJS. Рік по тому почав набирати обертів Webpack. Потрібно було вчити його. Як ви зрозуміли, найбільше мене розчарувало швидке старіння моїх знань. Але незабаром один мій колега просвітив мене, сказавши те, що змінило моє бачення бібліотек і фрейворков назавжди:

Бібліотеки та фреймворки можуть втратити свою актуальність, але пропоновані ними концепції і рішення витримують випробування часом.

Він був правий. AngularJS, можливо, застарів, але розуміння магії, що стоїть за ним допомогло краще зрозуміти архітектуру веб-компонентів React, яка покращилася відповідно до Angular's Directives. Він також допоміг мені зрозуміти, як ReactJS придбав таку велику популярність, а також його майбутнє.

Не пригадаю, щоб стикався з іншими серйозними проблемами в подальших проектах. Але скажу, що за ці 2 роки. перше, що допомогло мені досягти успіху (на думку моїх колег) - це моє натхнення і прагнення до постійного пошуку нового. Незабаром я зрозумів, що для веб-розробки це виграшна комбінація, так як все змінюється, дійсно, дуже швидко: постійно з'являються нові структури і бібліотеки.

Ще одна річ, яка мені дуже допомогла - розуміння того, чого не навчився Це було важливо в процесі становлення кращим веб-розробником.

Відмінна ідея, зробити просте hello world додаток для визначення можливості платформи. Потім рухатися далі. Але краще зосередитися на потребах вашого проекту. Перш за все, це здасться важко, але, на щастя, існують такі відмінні ресурси, як Stack Overflow, Medium і Reddit. Там знайдете корисні обговорення фреймворків і з'ясуйте, який підійде для конкретного випадку.

Йдемо далі

CSS може стати безладним і дезорганізовані дуже, дуже швидко. Запропоновано декілька різних методологій для написання більш чистого CSS, але виділяються 2, які я настійно рекомендую вам прочитати про ASAP для конкурентоспроможності:

• SMACSS: Масштабируемая і модульна архітектура для CSS. Гнучке керівництво по розробці малих і великих сайтів.
• BEM: методологія, яка допоможе домогтися використання компонентів багаторазового використання і спільного використання коду у front-end.

Особисто я віддаю перевагу SMACSS через його більш чистого зовнішнього вигляду, але деякі компанії і CSS Frameworks все ще використовують BEM, тому варто знати обидва.

Є два найбільших гравця:

• Browserify: дозволяє встановлювати модулі в браузері, об'єднуючи всі ваші залежності.
• Webpack: в основному Browserify на стероїдах. Складніше налаштувати і розгорнути.

Міні-курс на Scotch.io Getting Started with Browserify допоможе розпочати роботу з Browserify.

Особисто я витратив мало часу на роботу з webpack. Але свого часу я працював з ним і повинен сказати: він приголомшливий, незважаючи на складну настройку. Якщо тільки починаєте, почніть з Browserify, його простіше налаштувати. Майте на увазі, що webpack - це майбутнє, його починають використовувати великі проекти.

ReactJS швидко набирає популярність, і, схоже не знижує обертів.

Курс на Schech.io Learning React.js: Getting Started and Concepts дає повний огляд React. Як пройдете його, приступайте до React Fundamentals. на тому ж ресурсі. Він допоможе створити повністю працює додаток ReactJS, а потім перекласти його на синтаксис ES6. Можете подивитися офіційну документацію ReactJS. Вона добре написана, ви легко освоїте її.

Оскільки React - це тільки view, настійно рекомендується вивчити Redux. На мій погляд більшість курсів по Redux трохи складні, але CSS Tricks Leveling Up with React: Redux відмінно поєднує в собі простоту і інформативність.

Можливо, ви чули про Flux, якщо вам цікаво, чому слід використовувати Redux, а не Flux, подивіться на Stack Overflow. Why use Redux over Facebook Flux? На це питання відповів творець Redux!

Озираючись на помилки: що я дізнався?

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

Хочу змінити цю тенденцію. Прагніть давати зрозумілі імена змінним і функціях англійською мовою, навіть якщо потрібно багато писати. Ігнорування цього веде до необхідності ручного документування в майбутньому для більш ясного сприйняття. Також це веде до складності розуміння бази коду новими розробниками і вами. Так, вами. Чому? Тому що, якщо ви самі не пишете чистий код, що змусить ваших колег робити це?

Можливо деякі помітили, що я не робив особливого акценту на jQuery. Це пов'язано з моїм досвідом. Я зрозумів, що jQuery більше нашкодила мені, ніж принесла користі. Деякі, можливо, не погодяться, але, будь ласка, дайте мені пояснити. Коли я вперше дізнався про неї, то зрозумів, що jQuery використовується всюди і практично для всього. Тому я став використовувати jQuery практично для чого завгодно, для будь-якої проблеми, з якою столківался. Я шукав рішення на базі jQuery.

Зрозумійте мене правильно, jQuery була приголомшливою, коли я використовував її. Настільки приголомшливий, що я сліпо ігнорував, то що 90%, зробленого мною на jQuery, можна було зробити з самого початку в сучасних браузерах з таким же простим синтаксисом.

Можливо ви запитаєте: «Так що в цьому поганого? JQuery мало важить і скорочує кількість коду. Використання jQuery, а не рідних API-інтерфейсів не було проблемою. Проблема полягала в тому, що весь мій образ мислення і все рішення загальних проблем потребували роботі jQuery. Це стало величезною проблемою, коли я отримав свій перший проект і мені пояснили, що jQuery - це не залежність.

Використання jQuery зробило мене безпорадним. Я повністю ігнорував власні методи і рішення. Мої рішення стали менш портативними.

З тих пір я намагався не використовувати jQuery, якщо це не було абсолютної необхідності і дійсно забезпечувало значне підвищення ефективності і легкості читання нашої кодової бази (наприклад, важкі маніпуляції з DOM).

Що стосується матеріалу. Багато курсів CodeSchool чудові (особливо HTML і CSS фантастичні), не рахуючи невдалих по фреймворку (AngularJS, BackboneJS і т. Д).

Я пройшов досить багато курсів на Pluralsight. про них я не згадав, бо в результаті прийшов до висновку, що проходити їх погана і ненадійна ідея. Курси створені учителями, які не завжди (на мою думку) добре пояснюють. Якість курсів дико коливається, тому що стандарти якості відсутні. Я проходив курси, де пояснює, звучав так, ніби ось, ось засне. Чесно кажучи, неможливо утримати увагу на 6-10-годинному курсі. А багато хто з них тривають стільки, якщо не довше.

Я витратив 80-100 годин навчання на Pluralsight, і я чесно хочу, отримати віддачу. Зрозумійте мене правильно, я пройшов ряд чудових курсів на Pluralsight. Кількість переважаючі над якістю змушувало мене витрачати свій час. Я міг би дізнатися набагато більше, якби проходив курси в кращих джерелах, таких як Egghead.io і CodeSchool, де цінують більше якості, ніж кількість.

Єдина причина, проходити курси на Pluralsight, якщо таких немає в інших джерелах (наприклад, по Installshield або Xamarin), або пройти дуже специфічні курси, які, добре оцінені (Наприклад, John Papa's Angular Fundamentals).

В цілому, якщо хочете використовувати Pluralsight, переконайтеся, що проходите курси, пройдені вже кимось, і які вважаються високоякісними і корисними.

Слово про платні курсах

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

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

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

Секретний соус успіху

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

Ух, було потрібно не менше шести годин для написання цієї статті. Майже закінчили! Можливо, ви, поцікавитеся: «Добре, класна історія, але де ж найкоротший маршрут?» Ось, він.

Я організував його так, наче міг би повернутися назад і скористатися ним вірно. Насолоджуйтесь!