how to be a good frontend developer

53
Евгений Жарков Juno Как быть хорошим фронтенд-разработчиком

Upload: eugene-zharkov

Post on 16-Apr-2017

52 views

Category:

Technology


5 download

TRANSCRIPT

Page 1: How to be a good frontend developer

Евгений ЖарковJuno

Как быть хорошим фронтенд-разработчиком

Page 2: How to be a good frontend developer

Не завязывать свой опыт на одном фреймворке

Page 3: How to be a good frontend developer

Думать о решении, а не как заставить это работать в %название_фреймворка%

Page 4: How to be a good frontend developer

Иногда Single Page Application лишний

Page 5: How to be a good frontend developer

Он слишком большой

Page 6: How to be a good frontend developer

to make smart decisions

Page 7: How to be a good frontend developer
Page 8: How to be a good frontend developer

Он слишком мал

Page 9: How to be a good frontend developer

Как насчет CMS?

Page 10: How to be a good frontend developer

Ой, вы наверное забыли, что это также задачи frontend-разработчика?

Page 11: How to be a good frontend developer

Нет ничего вменяемого на “модных” технологиях

Page 12: How to be a good frontend developer

Uber, судя по исходному коду, написал свое решение

Page 13: How to be a good frontend developer

Но сколько для этого нужно ресурсов?

Page 14: How to be a good frontend developer

Wordpress, Django CMS…прочее

Page 15: How to be a good frontend developer

Да, не все проблемы можно решить с помощью SPA

Page 16: How to be a good frontend developer

Статические генераторы, например Hugo.

Без нормального UI для пользователя.

Page 17: How to be a good frontend developer

А иногда желание бизнеса и возможности браузера совсем не пересекаются

Page 18: How to be a good frontend developer

История со сканером водительских прав

Page 19: How to be a good frontend developer

•Браузер не умеет контролировать камеру, стандарт есть - реализации нет •Решений для качественного сканирования PDF417 нет •Насильственный опыт для пользователя •Нужно что-то делать

Page 20: How to be a good frontend developer

• Изучаем платформу, где используют веб-приложение • iOS, отлично • Находим качественную библиотеку сканирования штрих-кодов

Page 21: How to be a good frontend developer

Но я не умею разрабатывать под iOS, это же сложно

Page 22: How to be a good frontend developer

- Apache Cordoba - ReactNative - NativeScript - Native Proxy

Page 23: How to be a good frontend developer

Замечательно, это JS! Но решать задачу, забивая гвоздь трактором, мы не

будем

Page 24: How to be a good frontend developer

Берем 1-2 дня на реализацию “прокси” между WebView и вашим JS кодом на Swift

Page 25: How to be a good frontend developer

Как изолировать и упростить жизнь с backend?

Page 26: How to be a good frontend developer

Написать свой mock-сервер и забыть обо всем зоопарке для старта приложения

Page 27: How to be a good frontend developer

"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

Все очень плохо? Нет времени внедрять в существующий проект? Отгородись от зоопарка.

Docker

Page 29: How to be a good frontend developer

Но я же, я же JS-разработчик

Page 30: How to be a good frontend developer

Несколько дней на разбор Docker и больше ничего, кроме frontend’а, на твоей машине

Page 31: How to be a good frontend developer

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

.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

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

Немного о лицензионных соглашениях

Page 35: How to be a good frontend developer

Читайте лицензионные соглашения, чтобы не подставить компанию

Page 36: How to be a good frontend developer

Помните историю с лицензией React.js?

Page 37: How to be a good frontend developer

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

Google Analytics User ID Policy

Page 39: How to be a good frontend developer

• 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

Вернемся к ежедневным проблемам

Page 41: How to be a good frontend developer

Мониторинг package.json

Page 42: How to be a good frontend developer

или через год ваш проект утонет в поддержке всего этого г*вна

Page 43: How to be a good frontend developer
Page 44: How to be a good frontend developer

Использовать Alpha/Beta/RC ветки - это круто. Глаза светятся от счастья, пока на версии N17 все

перестает работать

Page 45: How to be a good frontend developer

Окей, сел, исправил

Page 46: How to be a good frontend developer

Выходит N18

Page 47: How to be a good frontend developer

“Мы пофиксили 1 баг, который нарушал общий механизм работы”

Page 48: How to be a good frontend developer

А у тебя этот баг был фичей

Page 49: How to be a good frontend developer

10-20% именно столько нового

стоит использовать на продакшене

Page 50: How to be a good frontend developer

Принесите домой больное растение и оно заразит все остальные, аналогично с кодом.

Page 51: How to be a good frontend developer

Не все хорошие вещи становятся публичными и получают поддержку комьюнити.

Page 52: How to be a good frontend developer

Не все публичные проекты являются качественно спроектированными и готовыми к реальной жизни, которая начинается за пределами ToDo списков и

Counter’ов

Page 53: How to be a good frontend developer

[email protected]@2j2e