SlideShare a Scribd company logo
1 of 53
Download to read offline
Евгений Жарков
Juno
Как быть хорошим фронтенд-разработчиком
Не завязывать свой опыт
на одном фреймворке
Думать о решении, а не как заставить это работать в
%название_фреймворка%
Иногда Single Page Application лишний
Он слишком большой
to make smart decisions
Он слишком мал
Как насчет CMS?
Ой, вы наверное забыли, что это также задачи
frontend-разработчика?
Нет ничего вменяемого на “модных” технологиях
Uber, судя по исходному коду, написал свое решение
Но сколько для этого нужно ресурсов?
Wordpress, Django CMS…прочее
Да, не все проблемы
можно решить с помощью SPA
Статические генераторы,
например Hugo.
Без нормального UI
для пользователя.
А иногда желание бизнеса и возможности браузера
совсем не пересекаются
История со сканером
водительских прав
•Браузер не умеет контролировать камеру, стандарт есть - реализации нет
•Решений для качественного сканирования PDF417 нет
•Насильственный опыт для пользователя
•Нужно что-то делать
• Изучаем платформу, где используют веб-приложение
• iOS, отлично
• Находим качественную библиотеку сканирования штрих-кодов
Но я не умею разрабатывать
под iOS, это же сложно
- Apache Cordoba
- ReactNative
- NativeScript
- Native Proxy
Замечательно, это JS!
Но решать задачу, забивая гвоздь трактором, мы не
будем
Берем 1-2 дня на реализацию “прокси” между
WebView и вашим JS кодом на Swift
Как изолировать и упростить жизнь с backend?
Написать свой mock-сервер и забыть обо всем
зоопарке для старта приложения
"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
Все очень плохо? Нет времени внедрять в
существующий проект? Отгородись от зоопарка.
Docker
Но я же, я же JS-разработчик
Несколько дней на разбор Docker
и больше ничего, кроме frontend’а, на твоей машине
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
.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"
start:
docker stop cms-mysql
docker stop cms-web
stop:
docker start cms-mysql
docker start cms-web
Немного о лицензионных соглашениях
Читайте лицензионные соглашения, чтобы не
подставить компанию
Помните историю с лицензией React.js?
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
Google Analytics User ID Policy
• 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.
Вернемся к ежедневным проблемам
Мониторинг package.json
или через год ваш проект утонет в поддержке всего
этого г*вна
Использовать Alpha/Beta/RC ветки - это круто.
Глаза светятся от счастья, пока на версии N17 все
перестает работать
Окей, сел, исправил
Выходит N18
“Мы пофиксили 1 баг, который нарушал общий
механизм работы”
А у тебя этот баг был фичей
10-20%
именно столько нового
стоит использовать на продакшене
Принесите домой больное растение и оно заразит
все остальные, аналогично с кодом.
Не все хорошие вещи становятся публичными и
получают поддержку комьюнити.
Не все публичные проекты являются качественно
спроектированными и готовыми к реальной жизни,
которая начинается за пределами ToDo списков и
Counter’ов
eu.zharkov@gmail.com

@2j2e

More Related Content

Viewers also liked

Inspirational research medea
Inspirational research medeaInspirational research medea
Inspirational research medeaepgober
 
Medea: elements and principles
Medea: elements and principlesMedea: elements and principles
Medea: elements and principlesepgober
 
Final Medea Set Design
Final Medea Set DesignFinal Medea Set Design
Final Medea Set Designepgober
 
FINAL MEDEA LIGHT DESIGN
FINAL MEDEA LIGHT DESIGNFINAL MEDEA LIGHT DESIGN
FINAL MEDEA LIGHT DESIGNepgober
 
Medea: Final Light Design
Medea: Final Light DesignMedea: Final Light Design
Medea: Final Light Designepgober
 
Final collage
Final collageFinal collage
Final collageepgober
 
Theatre metaphor
Theatre metaphorTheatre metaphor
Theatre metaphorepgober
 
Medea: Set Design
Medea: Set DesignMedea: Set Design
Medea: Set Designepgober
 
Angular.JS: Do it right
Angular.JS: Do it rightAngular.JS: Do it right
Angular.JS: Do it rightEugene Zharkov
 
Design tools
Design toolsDesign tools
Design toolsepgober
 
Our classroom policies
Our classroom policiesOur classroom policies
Our classroom policiesfowler210
 
Как объяснить на платьях процесс разработки?
Как объяснить на платьях процесс разработки?Как объяснить на платьях процесс разработки?
Как объяснить на платьях процесс разработки?Eugene Zharkov
 
Medea: Costume design
Medea: Costume designMedea: Costume design
Medea: Costume designepgober
 
Что там в summary
Что там в summaryЧто там в summary
Что там в summaryEugene Zharkov
 
Mnrega & clotehes as a scenario
Mnrega & clotehes as a scenarioMnrega & clotehes as a scenario
Mnrega & clotehes as a scenariohyderali123
 
Internal appraisal of the firm
Internal appraisal of the firmInternal appraisal of the firm
Internal appraisal of the firmhyderali123
 

Viewers also liked (20)

Inspirational research medea
Inspirational research medeaInspirational research medea
Inspirational research medea
 
Medea: elements and principles
Medea: elements and principlesMedea: elements and principles
Medea: elements and principles
 
Final Medea Set Design
Final Medea Set DesignFinal Medea Set Design
Final Medea Set Design
 
AngularJS: Good parts
AngularJS: Good partsAngularJS: Good parts
AngularJS: Good parts
 
FINAL MEDEA LIGHT DESIGN
FINAL MEDEA LIGHT DESIGNFINAL MEDEA LIGHT DESIGN
FINAL MEDEA LIGHT DESIGN
 
Medea: Final Light Design
Medea: Final Light DesignMedea: Final Light Design
Medea: Final Light Design
 
Welcome to Health Managing Group
Welcome to Health Managing GroupWelcome to Health Managing Group
Welcome to Health Managing Group
 
WinRT Holy COw
WinRT Holy COwWinRT Holy COw
WinRT Holy COw
 
Final collage
Final collageFinal collage
Final collage
 
Theatre metaphor
Theatre metaphorTheatre metaphor
Theatre metaphor
 
Medea: Set Design
Medea: Set DesignMedea: Set Design
Medea: Set Design
 
Angular.JS: Do it right
Angular.JS: Do it rightAngular.JS: Do it right
Angular.JS: Do it right
 
Design tools
Design toolsDesign tools
Design tools
 
Our classroom policies
Our classroom policiesOur classroom policies
Our classroom policies
 
Как объяснить на платьях процесс разработки?
Как объяснить на платьях процесс разработки?Как объяснить на платьях процесс разработки?
Как объяснить на платьях процесс разработки?
 
Medea: Costume design
Medea: Costume designMedea: Costume design
Medea: Costume design
 
Что там в summary
Что там в summaryЧто там в summary
Что там в summary
 
Mnrega & clotehes as a scenario
Mnrega & clotehes as a scenarioMnrega & clotehes as a scenario
Mnrega & clotehes as a scenario
 
Elm: give it a try
Elm: give it a tryElm: give it a try
Elm: give it a try
 
Internal appraisal of the firm
Internal appraisal of the firmInternal appraisal of the firm
Internal appraisal of the firm
 

Similar to How to be a good frontend developer

Евгений Жарков "Как быть хорошим фронтенд-разработчиком"
Евгений Жарков "Как быть хорошим фронтенд-разработчиком"Евгений Жарков "Как быть хорошим фронтенд-разработчиком"
Евгений Жарков "Как быть хорошим фронтенд-разработчиком"Fwdays
 
Мониторинг веб-проектов: штаб оперативного реагирования и аналитический центр
Мониторинг веб-проектов: штаб оперативного реагирования и аналитический центрМониторинг веб-проектов: штаб оперативного реагирования и аналитический центр
Мониторинг веб-проектов: штаб оперативного реагирования и аналитический центрsportgid
 
Serghei Iakovlev "Chaos engineering in action"
Serghei Iakovlev "Chaos engineering in action"Serghei Iakovlev "Chaos engineering in action"
Serghei Iakovlev "Chaos engineering in action"Fwdays
 
Защита сайта от взлома и вирусов
Защита сайта от взлома и вирусовЗащита сайта от взлома и вирусов
Защита сайта от взлома и вирусовSkillFactory
 
Тестирование мобильных приложений
Тестирование мобильных приложенийТестирование мобильных приложений
Тестирование мобильных приложенийAlexander Khozya
 
Виды QA: Всё что вы не знали и боялись спростить
Виды QA: Всё что вы не знали и боялись спроститьВиды QA: Всё что вы не знали и боялись спростить
Виды QA: Всё что вы не знали и боялись спроститьGoIT
 
Современные технологии сайтостроения для решения бизнес-задач
Современные технологии сайтостроения для решения бизнес-задач Современные технологии сайтостроения для решения бизнес-задач
Современные технологии сайтостроения для решения бизнес-задач simai
 
Модуль 15. Лекция 57-58. Обзоры платформ для различных проектов
Модуль 15. Лекция 57-58. Обзоры платформ для различных проектовМодуль 15. Лекция 57-58. Обзоры платформ для различных проектов
Модуль 15. Лекция 57-58. Обзоры платформ для различных проектовYana Brodetski
 
Pavel Dovbush Toster
Pavel Dovbush Toster Pavel Dovbush Toster
Pavel Dovbush Toster Pavel Dovbush
 
Mihail Zachepilo - WebAssembly powered Machine Learning
Mihail Zachepilo - WebAssembly powered Machine LearningMihail Zachepilo - WebAssembly powered Machine Learning
Mihail Zachepilo - WebAssembly powered Machine LearningOdessaJS Conf
 
Mihail Zachepilo - WebAssembly powered Machine Learning
Mihail Zachepilo - WebAssembly powered Machine LearningMihail Zachepilo - WebAssembly powered Machine Learning
Mihail Zachepilo - WebAssembly powered Machine LearningMaria Kuneva
 
Антон Сапожников. Еще один недостаток современных клиент-серверных приложений
Антон Сапожников. Еще один недостаток современных клиент-серверных приложенийАнтон Сапожников. Еще один недостаток современных клиент-серверных приложений
Антон Сапожников. Еще один недостаток современных клиент-серверных приложенийPositive Hack Days
 
Meet Magento Belarus 2015: Denis Bosak
Meet Magento Belarus 2015: Denis BosakMeet Magento Belarus 2015: Denis Bosak
Meet Magento Belarus 2015: Denis BosakAmasty
 
23may 1300 valday антон сапожников 'еще один недостаток современных клиент се...
23may 1300 valday антон сапожников 'еще один недостаток современных клиент се...23may 1300 valday антон сапожников 'еще один недостаток современных клиент се...
23may 1300 valday антон сапожников 'еще один недостаток современных клиент се...Positive Hack Days
 
еще один недостаток современных клиент серверных приложений
еще один недостаток современных клиент серверных приложенийеще один недостаток современных клиент серверных приложений
еще один недостаток современных клиент серверных приложенийsnowytoxa
 
1С-Битрикс: Управление сайтом. Платформа для создания и управления корпоратив...
1С-Битрикс: Управление сайтом. Платформа для создания и управления корпоратив...1С-Битрикс: Управление сайтом. Платформа для создания и управления корпоратив...
1С-Битрикс: Управление сайтом. Платформа для создания и управления корпоратив...borovoystudio
 
Изоморфные приложения и Python - Виталий Глибин, Huntflow
Изоморфные приложения и Python - Виталий Глибин, HuntflowИзоморфные приложения и Python - Виталий Глибин, Huntflow
Изоморфные приложения и Python - Виталий Глибин, Huntflowit-people
 

Similar to How to be a good frontend developer (20)

Евгений Жарков "Как быть хорошим фронтенд-разработчиком"
Евгений Жарков "Как быть хорошим фронтенд-разработчиком"Евгений Жарков "Как быть хорошим фронтенд-разработчиком"
Евгений Жарков "Как быть хорошим фронтенд-разработчиком"
 
Мониторинг веб-проектов: штаб оперативного реагирования и аналитический центр
Мониторинг веб-проектов: штаб оперативного реагирования и аналитический центрМониторинг веб-проектов: штаб оперативного реагирования и аналитический центр
Мониторинг веб-проектов: штаб оперативного реагирования и аналитический центр
 
Serghei Iakovlev "Chaos engineering in action"
Serghei Iakovlev "Chaos engineering in action"Serghei Iakovlev "Chaos engineering in action"
Serghei Iakovlev "Chaos engineering in action"
 
Защита сайта от взлома и вирусов
Защита сайта от взлома и вирусовЗащита сайта от взлома и вирусов
Защита сайта от взлома и вирусов
 
Тестирование мобильных приложений
Тестирование мобильных приложенийТестирование мобильных приложений
Тестирование мобильных приложений
 
Виды QA: Всё что вы не знали и боялись спростить
Виды QA: Всё что вы не знали и боялись спроститьВиды QA: Всё что вы не знали и боялись спростить
Виды QA: Всё что вы не знали и боялись спростить
 
Современные технологии сайтостроения для решения бизнес-задач
Современные технологии сайтостроения для решения бизнес-задач Современные технологии сайтостроения для решения бизнес-задач
Современные технологии сайтостроения для решения бизнес-задач
 
Модуль 15. Лекция 57-58. Обзоры платформ для различных проектов
Модуль 15. Лекция 57-58. Обзоры платформ для различных проектовМодуль 15. Лекция 57-58. Обзоры платформ для различных проектов
Модуль 15. Лекция 57-58. Обзоры платформ для различных проектов
 
Hl2009 1c Bitrix
Hl2009 1c BitrixHl2009 1c Bitrix
Hl2009 1c Bitrix
 
Pavel Dovbush Toster
Pavel Dovbush Toster Pavel Dovbush Toster
Pavel Dovbush Toster
 
Mihail Zachepilo - WebAssembly powered Machine Learning
Mihail Zachepilo - WebAssembly powered Machine LearningMihail Zachepilo - WebAssembly powered Machine Learning
Mihail Zachepilo - WebAssembly powered Machine Learning
 
Mihail Zachepilo - WebAssembly powered Machine Learning
Mihail Zachepilo - WebAssembly powered Machine LearningMihail Zachepilo - WebAssembly powered Machine Learning
Mihail Zachepilo - WebAssembly powered Machine Learning
 
Антон Сапожников. Еще один недостаток современных клиент-серверных приложений
Антон Сапожников. Еще один недостаток современных клиент-серверных приложенийАнтон Сапожников. Еще один недостаток современных клиент-серверных приложений
Антон Сапожников. Еще один недостаток современных клиент-серверных приложений
 
Load testing with Tsung
Load testing with TsungLoad testing with Tsung
Load testing with Tsung
 
Meet Magento Belarus 2015: Denis Bosak
Meet Magento Belarus 2015: Denis BosakMeet Magento Belarus 2015: Denis Bosak
Meet Magento Belarus 2015: Denis Bosak
 
23may 1300 valday антон сапожников 'еще один недостаток современных клиент се...
23may 1300 valday антон сапожников 'еще один недостаток современных клиент се...23may 1300 valday антон сапожников 'еще один недостаток современных клиент се...
23may 1300 valday антон сапожников 'еще один недостаток современных клиент се...
 
еще один недостаток современных клиент серверных приложений
еще один недостаток современных клиент серверных приложенийеще один недостаток современных клиент серверных приложений
еще один недостаток современных клиент серверных приложений
 
1С-Битрикс: Управление сайтом. Платформа для создания и управления корпоратив...
1С-Битрикс: Управление сайтом. Платформа для создания и управления корпоратив...1С-Битрикс: Управление сайтом. Платформа для создания и управления корпоратив...
1С-Битрикс: Управление сайтом. Платформа для создания и управления корпоратив...
 
Изоморфные приложения и Python - Виталий Глибин, Huntflow
Изоморфные приложения и Python - Виталий Глибин, HuntflowИзоморфные приложения и Python - Виталий Глибин, Huntflow
Изоморфные приложения и Python - Виталий Глибин, Huntflow
 
Губкин Александр
Губкин АлександрГубкин Александр
Губкин Александр
 

More from Eugene Zharkov

Monorepo: React + React Native. React Alicante
Monorepo:  React + React Native. React Alicante Monorepo:  React + React Native. React Alicante
Monorepo: React + React Native. React Alicante Eugene Zharkov
 
Monorepo: React Web & React Native
Monorepo: React Web & React NativeMonorepo: React Web & React Native
Monorepo: React Web & React NativeEugene Zharkov
 
Create React Native App vs Expo vs Manually
Create React Native App vs Expo vs ManuallyCreate React Native App vs Expo vs Manually
Create React Native App vs Expo vs ManuallyEugene Zharkov
 
Build automation with Fastlane
Build automation with FastlaneBuild automation with Fastlane
Build automation with FastlaneEugene Zharkov
 
React Native Animation
React Native AnimationReact Native Animation
React Native AnimationEugene Zharkov
 
React Native: Hurdle Race
React Native: Hurdle RaceReact Native: Hurdle Race
React Native: Hurdle RaceEugene Zharkov
 
Burn your grass with react native
Burn your grass with react nativeBurn your grass with react native
Burn your grass with react nativeEugene Zharkov
 
Фронтенд сказки
Фронтенд сказкиФронтенд сказки
Фронтенд сказкиEugene Zharkov
 
Cycle.js: Functional and Reactive
Cycle.js: Functional and ReactiveCycle.js: Functional and Reactive
Cycle.js: Functional and ReactiveEugene Zharkov
 
Switch to React.js from AngularJS developer
Switch to React.js from AngularJS developerSwitch to React.js from AngularJS developer
Switch to React.js from AngularJS developerEugene Zharkov
 
Mobile applications in a new way with React Native
Mobile applications in a new way with React NativeMobile applications in a new way with React Native
Mobile applications in a new way with React NativeEugene Zharkov
 
Angular 2: Всех переиграл
Angular 2: Всех переигралAngular 2: Всех переиграл
Angular 2: Всех переигралEugene Zharkov
 
Angular 2.0: Brighter future?
Angular 2.0: Brighter future?Angular 2.0: Brighter future?
Angular 2.0: Brighter future?Eugene Zharkov
 
SignalR: Add real-time to your applications
SignalR: Add real-time to your applicationsSignalR: Add real-time to your applications
SignalR: Add real-time to your applicationsEugene Zharkov
 
Roslyn compiler as a service
Roslyn compiler as a serviceRoslyn compiler as a service
Roslyn compiler as a serviceEugene Zharkov
 
Creating windows store java script apps
Creating windows store java script appsCreating windows store java script apps
Creating windows store java script appsEugene Zharkov
 
Big Bang Theory of JavaScript Metro Applications
Big Bang Theory of JavaScript Metro ApplicationsBig Bang Theory of JavaScript Metro Applications
Big Bang Theory of JavaScript Metro ApplicationsEugene Zharkov
 
Windows 8 app java script dark side
Windows 8 app java script dark sideWindows 8 app java script dark side
Windows 8 app java script dark sideEugene Zharkov
 

More from Eugene Zharkov (20)

Monorepo: React + React Native. React Alicante
Monorepo:  React + React Native. React Alicante Monorepo:  React + React Native. React Alicante
Monorepo: React + React Native. React Alicante
 
Monorepo: React Web & React Native
Monorepo: React Web & React NativeMonorepo: React Web & React Native
Monorepo: React Web & React Native
 
Create React Native App vs Expo vs Manually
Create React Native App vs Expo vs ManuallyCreate React Native App vs Expo vs Manually
Create React Native App vs Expo vs Manually
 
Build automation with Fastlane
Build automation with FastlaneBuild automation with Fastlane
Build automation with Fastlane
 
GraphQL and/or REST
GraphQL and/or RESTGraphQL and/or REST
GraphQL and/or REST
 
React Native Animation
React Native AnimationReact Native Animation
React Native Animation
 
React Native: Hurdle Race
React Native: Hurdle RaceReact Native: Hurdle Race
React Native: Hurdle Race
 
Burn your grass with react native
Burn your grass with react nativeBurn your grass with react native
Burn your grass with react native
 
Фронтенд сказки
Фронтенд сказкиФронтенд сказки
Фронтенд сказки
 
Cycle.js: Functional and Reactive
Cycle.js: Functional and ReactiveCycle.js: Functional and Reactive
Cycle.js: Functional and Reactive
 
Switch to React.js from AngularJS developer
Switch to React.js from AngularJS developerSwitch to React.js from AngularJS developer
Switch to React.js from AngularJS developer
 
Mobile applications in a new way with React Native
Mobile applications in a new way with React NativeMobile applications in a new way with React Native
Mobile applications in a new way with React Native
 
Angular 2: Всех переиграл
Angular 2: Всех переигралAngular 2: Всех переиграл
Angular 2: Всех переиграл
 
Angular 2.0: Brighter future?
Angular 2.0: Brighter future?Angular 2.0: Brighter future?
Angular 2.0: Brighter future?
 
SignalR: Add real-time to your applications
SignalR: Add real-time to your applicationsSignalR: Add real-time to your applications
SignalR: Add real-time to your applications
 
Roslyn compiler as a service
Roslyn compiler as a serviceRoslyn compiler as a service
Roslyn compiler as a service
 
Creating windows store java script apps
Creating windows store java script appsCreating windows store java script apps
Creating windows store java script apps
 
Big Bang Theory of JavaScript Metro Applications
Big Bang Theory of JavaScript Metro ApplicationsBig Bang Theory of JavaScript Metro Applications
Big Bang Theory of JavaScript Metro Applications
 
Windows 8 app java script dark side
Windows 8 app java script dark sideWindows 8 app java script dark side
Windows 8 app java script dark side
 
Silverlight 5
Silverlight 5Silverlight 5
Silverlight 5
 

How to be a good frontend developer