how to be a good frontend developer
TRANSCRIPT
![Page 1: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/1.jpg)
Евгений ЖарковJuno
Как быть хорошим фронтенд-разработчиком
![Page 2: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/2.jpg)
Не завязывать свой опыт на одном фреймворке
![Page 3: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/3.jpg)
Думать о решении, а не как заставить это работать в %название_фреймворка%
![Page 4: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/4.jpg)
Иногда Single Page Application лишний
![Page 5: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/5.jpg)
Он слишком большой
![Page 6: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/6.jpg)
to make smart decisions
![Page 7: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/7.jpg)
![Page 8: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/8.jpg)
Он слишком мал
![Page 9: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/9.jpg)
Как насчет CMS?
![Page 10: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/10.jpg)
Ой, вы наверное забыли, что это также задачи frontend-разработчика?
![Page 11: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/11.jpg)
Нет ничего вменяемого на “модных” технологиях
![Page 12: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/12.jpg)
Uber, судя по исходному коду, написал свое решение
![Page 13: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/13.jpg)
Но сколько для этого нужно ресурсов?
![Page 14: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/14.jpg)
Wordpress, Django CMS…прочее
![Page 15: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/15.jpg)
Да, не все проблемы можно решить с помощью SPA
![Page 16: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/16.jpg)
Статические генераторы, например Hugo.
Без нормального UI для пользователя.
![Page 17: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/17.jpg)
А иногда желание бизнеса и возможности браузера совсем не пересекаются
![Page 18: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/18.jpg)
История со сканером водительских прав
![Page 19: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/19.jpg)
•Браузер не умеет контролировать камеру, стандарт есть - реализации нет •Решений для качественного сканирования PDF417 нет •Насильственный опыт для пользователя •Нужно что-то делать
![Page 20: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/20.jpg)
• Изучаем платформу, где используют веб-приложение • iOS, отлично • Находим качественную библиотеку сканирования штрих-кодов
![Page 21: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/21.jpg)
Но я не умею разрабатывать под iOS, это же сложно
![Page 22: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/22.jpg)
- Apache Cordoba - ReactNative - NativeScript - Native Proxy
![Page 23: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/23.jpg)
Замечательно, это JS! Но решать задачу, забивая гвоздь трактором, мы не
будем
![Page 24: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/24.jpg)
Берем 1-2 дня на реализацию “прокси” между WebView и вашим JS кодом на Swift
![Page 25: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/25.jpg)
Как изолировать и упростить жизнь с backend?
![Page 26: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/26.jpg)
Написать свой mock-сервер и забыть обо всем зоопарке для старта приложения
![Page 27: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/27.jpg)
"id": faker.random.uuid(), "customer": { "id": faker.random.uuid(), "first_name": faker.name.firstName(), "last_name": faker.name.lastName() }, "phone": faker.phone.phoneNumber(), "active": faker.random.boolean(), "created_at": faker.date.past().toISOString(), "expire_at": faker.random.arrayElement([
faker.date.past().toISOString(), faker.date.future().toISOString(), null])
faker.js
![Page 28: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/28.jpg)
Все очень плохо? Нет времени внедрять в существующий проект? Отгородись от зоопарка.
Docker
![Page 29: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/29.jpg)
Но я же, я же JS-разработчик
![Page 30: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/30.jpg)
Несколько дней на разбор Docker и больше ничего, кроме frontend’а, на твоей машине
![Page 31: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/31.jpg)
FROM python:3.4
ENV PIP_REQUIRE_VIRTUALENV false
RUN mkdir -p /cms/requirements/
ADD requirements/base.txt /cms/requirements/base.txt
RUN pip install -r /cms/requirements/base.txt --trusted-host pypi.customhost
EXPOSE 8090
CMD python /cms/src/manage.py runserver
--settings=config.settings.docker 0.0.0.0:8090
![Page 32: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/32.jpg)
.PHONY: init clean start stop
current_dir = $(shell pwd)
init:
docker build . -f python.dockerfile -t cms-python
docker run --name cms-mysql -e MYSQL_ROOT_PASSWORD=secretpassword
-d mysql/mysql-server:5.7
docker exec cms-mysql bash -c "mysql -u'root' -p'secretpassword'
-e 'CREATE DATABASE __cms’" || :
docker run --name cms-web --link cms-mysql:mysql -v "${current_dir}/src:/cms/src/"
-p 0.0.0.0:8090:8090 -d cms-python
docker exec cms-web bash -c "python manage.py migrate --settings=config.settings.docker"
docker exec -it cms-web bash -c "python manage.py createsuperuser —settings=config.settings.docker"
![Page 33: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/33.jpg)
start:
docker stop cms-mysql
docker stop cms-web
stop:
docker start cms-mysql
docker start cms-web
![Page 34: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/34.jpg)
Немного о лицензионных соглашениях
![Page 35: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/35.jpg)
Читайте лицензионные соглашения, чтобы не подставить компанию
![Page 36: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/36.jpg)
Помните историю с лицензией React.js?
![Page 37: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/37.jpg)
LICENSE > PATENT
The license granted hereunder will terminate, automatically and without notice,
if you (or any of your subsidiaries, corporate affiliates or agents) initiate
directly or indirectly, or take a direct financial interest in, any Patent
Assertion: (i) against Facebook or any of its subsidiaries or corporate
affiliates, (ii) against any party if such Patent Assertion arises in whole or
![Page 38: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/38.jpg)
Google Analytics User ID Policy
![Page 39: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/39.jpg)
• You will not upload any data that allows Google to personally identify an individual (such as certain names, Social Security Numbers, email addresses, or any similar data), or data that permanently identifies a particular device (such as a unique device identifier if such an identifier cannot be reset).
• If you upload any data that allows Google to personally identify an individual, your Google Analytics account can be terminated, and you may lose your Google Analytics data.
![Page 40: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/40.jpg)
Вернемся к ежедневным проблемам
![Page 41: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/41.jpg)
Мониторинг package.json
![Page 42: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/42.jpg)
или через год ваш проект утонет в поддержке всего этого г*вна
![Page 43: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/43.jpg)
![Page 44: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/44.jpg)
Использовать Alpha/Beta/RC ветки - это круто. Глаза светятся от счастья, пока на версии N17 все
перестает работать
![Page 45: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/45.jpg)
Окей, сел, исправил
![Page 46: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/46.jpg)
Выходит N18
![Page 47: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/47.jpg)
“Мы пофиксили 1 баг, который нарушал общий механизм работы”
![Page 48: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/48.jpg)
А у тебя этот баг был фичей
![Page 49: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/49.jpg)
10-20% именно столько нового
стоит использовать на продакшене
![Page 50: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/50.jpg)
Принесите домой больное растение и оно заразит все остальные, аналогично с кодом.
![Page 51: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/51.jpg)
Не все хорошие вещи становятся публичными и получают поддержку комьюнити.
![Page 52: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/52.jpg)
Не все публичные проекты являются качественно спроектированными и готовыми к реальной жизни, которая начинается за пределами ToDo списков и
Counter’ов
![Page 53: How to be a good frontend developer](https://reader034.vdocuments.site/reader034/viewer/2022042511/586fbb401a28abe57d8b89fb/html5/thumbnails/53.jpg)
[email protected]@2j2e