Как быстро освоить новую технологию
«Успешный программист не привязывается к языку. Он просто умеет программировать»
Как быстро освоить новую технологию

Пред­ставь­те, что вам нуж­но сде­лать ани­ма­цию для ваше­го сай­та. Вы попро­бо­ва­ли инстру­мен­ты бра­у­зе­ра и стан­дарт­ные сред­ства HTML, CSS, Java Script — ниче­го не под­хо­дит, посколь­ку ани­ма­ция выгля­дит неесте­ствен­но. Нуж­на отдель­ная биб­лио­те­ка, кото­рая учи­ты­ва­ет свой­ства объ­ек­тов и добав­ля­ет в ани­ма­ции про­стую физи­ку.

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

👉 У про­грам­ми­стов иссле­до­ва­ние новой тех­но­ло­гии назы­ва­ет­ся research-задачей, и для её быст­ро­го про­ве­де­ния важ­на после­до­ва­тель­ность — ина­че вы уто­не­те под гора­ми кода и потра­ти­те вре­мя на чте­ние ненуж­ных мате­ри­а­лов.

Мы раз­би­ли про­цесс на три эта­па и опи­са­ли его в том поряд­ке, кото­рый пред­ло­жил фронтенд-разработчик из Яндекс.Практикума Давид Рога­нов. Про­чи­тай­те пол­ное интер­вью с ним — там мно­го о стар­те карье­ры и зада­чах фрон­тен­де­ра.

1. Отправляемся на GitHub

GitHub — это гро­мад­ное хра­ни­ли­ще откры­то­го кода, на кото­ром мы будем искать нуж­ную биб­лио­те­ку. GitHub мож­но срав­нить со стро­и­тель­ным гипер­мар­ке­том, где мож­но бес­ко­неч­но блуж­дать в поис­ке одной баноч­ки крас­ки.

Что­бы не заблу­дить­ся в гипер­мар­ке­те, нам нуж­но выяс­нить рас­по­ло­же­ние отде­ла кра­сок, най­ти нуж­ный стел­лаж, срав­нить крас­ки раз­ных про­из­во­ди­те­лей и, нако­нец, выбрать эту несчаст­ную баноч­ку. С поис­ком биб­лио­те­ки на GitHub всё то же самое.

Сна­ча­ла мы долж­ны выяс­нить язык про­грам­ми­ро­ва­ния нашей биб­лио­те­ки. Для при­ме­ра возь­мём Java Script, посколь­ку имен­но им часто поль­зу­ют­ся раз­ра­бот­чи­ки Яндекс.Практикума.

Даль­ше мы долж­ны пони­мать устрой­ство выбран­но­го язы­ка про­грам­ми­ро­ва­ния и ука­зать класс или функ­цию, спо­соб­ную решить нашу зада­чу. Напри­мер, для ани­ми­ро­ва­ния эле­мен­тов на Java Script подой­дёт функ­ция Side effects — вби­ва­ем её в поиск и нахо­дим стел­лаж.

Перед нами мно­же­ство кра­сок от раз­ных про­из­во­ди­те­лей. Для их быст­ро­го срав­не­ния обра­ща­ем­ся к филь­тру, выстав­ля­ем зна­че­ние Best match и откры­ва­ем все биб­лио­те­ки, кото­рые по крат­ко­му опи­са­нию под­хо­дят под нашу зада­чу. Далее ран­жи­ру­ем полу­чен­ный спи­сок по раз­ме­ру сооб­ще­ства и выби­ра­ем самую попу­ляр­ную биб­лио­те­ку — это и есть наша баноч­ка крас­ки. Ей ока­за­лась биб­лио­те­ка Redux-Saga.


При выбо­ре биб­лио­те­ки важ­но учи­ты­вать раз­мер сооб­ще­ства и регу­ляр­ность обнов­ле­ний — если за тех­но­ло­ги­ей не сле­дят, то это может отра­зить­ся на рабо­то­спо­соб­но­сти ваше­го про­ек­та

2. Смотрим техническую документацию

Для быст­ро­го зна­ком­ства с биб­лио­те­кой нам доста­точ­но про­честь пер­вый раз­дел тех­ни­че­ской доку­мен­та­ции — это крат­кая пре­зен­та­ция функ­ци­о­наль­но­сти:

  • Если выбран­ная тех­но­ло­гия не под­хо­дит, то мы воз­вра­ща­ем­ся на преды­ду­щий этап и выби­ра­ем из спис­ка сле­ду­ю­щую биб­лио­те­ку. Это же дей­ствие выпол­ня­ем, когда доку­мен­та­ции нет или она напи­са­на непо­нят­ным язы­ком, — нам же потом это под­дер­жи­вать!
  • Если во всём спис­ке не будет под­хо­дя­щих тех­но­ло­гий — обра­ща­ем­ся к дру­го­му типу клас­сов или функ­ций и повто­ря­ем про­це­ду­ру. Такие ситу­а­ции встре­ча­ют­ся у начи­на­ю­щих про­грам­ми­стов, кото­рые пло­хо ори­ен­ти­ру­ют­ся на GitHub или непра­виль­но выстав­ля­ют кри­те­рии поис­ка. Это при­хо­дит с опы­том.
  • Если тех­но­ло­гия не под­хо­дит, но вы её може­те при­ме­нить в каком-то смеж­ном про­ек­те — добавь­те стра­ни­цу в заклад­ки и изу­чи­те в сво­бод­ное вре­мя.
  • Если по опи­са­нию тех­но­ло­гия под­хо­дит, то толь­ко в этом слу­чае есть смысл про­честь пол­ную вер­сию доку­мен­та и перей­ти к сце­на­ри­ям при­ме­не­ния.

Тех­ни­че­ская доку­мен­та­ция может пуб­ли­ко­вать­ся на GitHub или выно­сить­ся на отдель­ный сайт — если эта инфор­ма­ция есть, то вы её точ­но не про­пу­сти­те.


Для зна­ком­ства с тех­но­ло­ги­ей доста­точ­но про­честь пер­вый раз­дел тех­ни­че­ской доку­мен­та­ции

3. Создаём прототип и проверяем код

Мы купи­ли под­хо­дя­щую крас­ку, про­чли инструк­цию и уве­ре­ны в выбо­ре. Теперь эту уве­рен­ность нуж­но про­ве­рить: берём ненуж­ную дос­ку, дела­ем несколь­ко маз­ков и смот­рим на резуль­тат. Если крас­ка под­хо­дит — отлич­но, мы можем рабо­тать. Если что-то не так — воз­вра­ща­ем­ся в гипер­мар­кет и берём крас­ку от дру­го­го про­из­во­ди­те­ля.

Новую биб­лио­те­ку так­же не сто­ит спе­шить под­клю­чать к основ­но­му про­ек­ту: вдруг вы что-то упу­сти­те и потом при­дёт­ся тра­тить вре­мя на вос­ста­нов­ле­ние рабо­че­го фай­ла. Создай­те неболь­шой про­то­тип и на нём про­верь­те рабо­то­спо­соб­ность кода: покру­ти­те, повер­ти­те и убе­ди­тесь в том, что функ­ци­о­наль­ность соот­вет­ству­ет опи­са­нию в доку­мен­та­ции.

Если с про­то­ти­пом поря­док — може­те себя поздра­вить, research-задача завер­ше­на. Неис­поль­зо­ван­ный спи­сок биб­лио­тек реко­мен­ду­ем сохра­нить в отдель­ный файл, кото­рый может при­го­дить­ся для похо­же­го про­ек­та. Так вы спра­ви­тесь ещё быст­рее.