Веб-разработка *

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Это второй пост о всевозможных трюках во фронтенд-разработке. В нем затронут вопрос оптимизации сайта, скорости его загрузки на устройствах с недостаточным объемом оперативной памяти и медленным CPU.

Отдельный разговор про инструменты, которые помогут ускорить и контролировать работу сайта и сторонних приложений, которые к нему подключены. Плюс рассказ об особенностях верстки email-рассылок, который вас немало удивит.



В основе материала — расшифровка доклада Виталия с конференции HolyJS 2018 Piter.

Сегодня мы публикуем перевод материала, автор которого, проанализировав особенности работы с объектами в JavaScript, предлагает React-разработчикам методику ускорения приложений. В частности, речь идёт о том, что переменная, которой, как принято говорить, «присвоен объект», и которую часто называют просто «объектом», на самом деле, хранит не сам объект, а ссылку на него. Функции в JavaScript тоже являются объектами, поэтому вышесказанное справедливо и для них. Если помнить об этом, проектируя React-компоненты и критически анализируя их код, можно усовершенствовать их внутренние механизмы и улучшить производительность приложений.

Здравствуйте. Меня зовут Андрей, я работаю в компании, создающей IT-решения в области медицины. В качестве основного языка разработки мы используем Clojure, а также (в зависимости от проекта/модуля) Python, Javascript, Go, C, C#, Rust, Objective-C и т.д.

Важное место в нашем технологическом стеке занимает международный стандарт FHIR (Fast Healthcare Interoperability Resources), определяющий формат хранения/обмена/предоставления медицинской информации в электронном виде и включающий в себя спецификацию RESTful API клиент-серверного взаимодействия.

Некоторое время назад я начал пет-проект приложения, которое визуализирует содержимое ресурсов произвольного FHIR-сервера и позволяет производить базовые CRUD — операции. В КДПВ показан скриншот страницы редактирования элемента ресурса типа Patient.

Под катом небольшое описание и ссылка на онлайн-демо — можно будет пощупать настоящий живой FHIR-сервер, потыкать кнопочки, посмотреть/посоздавать/поредактировать различные ресурсы и даже попробовать вызвать тот самый хабраэффект! )

Всем привет. Как вы, возможно, знаете, раньше я все больше писал и рассказывал про хранилища, Vertica, хранилища больших данных и прочие аналитические вещи. Сейчас в область моей ответственности упали и все остальные базы, не только аналитические, но и OLTP (PostgreSQL), и NOSQL (MongoDB, Redis, Tarantool).

Эта ситуация позволила мне взглянуть на организацию, имеющую несколько баз данных, как на организацию, имеющую одну распределенную гетерогенную (разнородную) базу. Единую распределенную гетерогенную базу, состоящую из кучи PostgreSQL, Redis-ов и Монг… И, возможно, из одной-двух баз Vertica.

Работа этой единой распределенной базы порождает кучу интересных задач. Прежде всего, с точки зрения бизнеса важно, чтобы с данными, движущимися по такой базе, все было нормально. Я специально не использую здесь термин целостность, consistency, т.к. термин это сложный, и в разных нюансах рассмотрения СУБД (ACID и CAP теорема) он имеет разный смысл.

Ситуация с распределенной базой обостряется, если компания пытается перейти на микросервисную архитектуру. Под катом я рассказываю, как обеспечить целостность данных в микросервисной архитектуре без распределенных транзакций и жесткой связности. (А в самом конце объясняю, почему выбрал для статьи такую иллюстрацию).

Автор статьи, перевод которой мы публикуем, предлагает поговорить о решении задач из сферы компьютерного зрения исключительно средствами веб-браузера. Решить подобную задачу не так уж и трудно благодаря JavaScript-библиотеке TensorFlow. Вместо того, чтобы обучать собственную модель и предлагать её пользователям в составе готового продукта, мы дадим им возможность самостоятельно собрать данные и обучить модель прямо в браузере, на собственном компьютере. При таком подходе серверная обработка данных совершенно не нужна.

Испытать то, созданию чего посвящён этот материал, можно здесь. Вам для этого понадобится современный браузер, веб-камера и мышь. Вот исходный код проекта. Он не рассчитан на работу на мобильных устройствах, автор материала говорит, что у него не было времени на соответствующие доработки. Кроме того, он отмечает, что рассматриваемая тут задача усложнится в том случае, если придётся обрабатывать видеопоток с движущейся камеры.

Сегодня мы публикуем вторую часть перевода статьи, которая содержит набор рекомендаций для Angular-разработчиков. В предыдущей части были представлены 11 советов, в этой мы рассмотрим ещё столько же.

Привет!

У нас тут довольно внезапный митап, но мы решили, что лучше предупредить с опозданием, чем не предупреждать вообще. Поэтому совсем коротко и по делу.

Где и когда

Екатеринбург, Лофт «Соль», пер. Химиков, 3. Начинаем с 18.30, в программе три доклада от наших ребят.

О чём будем говорить

Автор статьи, первую часть перевода которой мы публикуем, говорит, что он уже около двух лет работает над крупномасштабным Angular-приложением в Trade Me. В течение последних нескольких лет команда разработчиков приложения постоянно занимается совершенствованием проекта — как в плане качества кода, так и в том, что касается производительности.

В этой серии материалов речь пойдёт о подходах к разработке, используемые командой Trade Me, которые выражены в виде более чем двух десятков рекомендаций, касающихся таких технологий, как Angular, TypeScript, RxJS и @ngrx/store. Кроме того, определённое внимание здесь будет уделено универсальным техникам программирования, которые направлены на то, чтобы сделать код приложений чище и аккуратнее.

Этот материал завершает серию переводов руководства по Node.js. Сегодня мы поговорим о модулях os, events и http, обсудим работу с потоками и базами данных, затронем вопрос использования Node.js при разработке приложений и в продакшне.

Ошибка в коммите… Как её исправить? Беспорядок в истории коммитов… Как привести всё в пристойный вид? Автор статьи, перевод которой мы публикуем сегодня, говорит, что она написана специально для тех, кто задавался такими вопросами. По его словам, изучив методики работы с Git, представленные здесь, можно значительно продвинуться по пути освоения Git.

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

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Всё Python-сообщество надеется, что это не отразится на экосистеме негативно. Но одного этого недостаточно. Мы вот, например, считаем важным поддерживать сообщество и, как одно из мероприятий, проводим большую конференцию под названием Moscow Python Conf++. Там сможем обсудить этот и другие важные вопросы. А пока частично познакомлю вас с Программным комитетом. А задал им несколько вопросов, которые как раз и раскроют взгляды на экосистему, и расскажут о людях лучше их профессиональных достижений.

Кроме заглавного вопроса, спрашивал вот что:

• Что порекомендуешь для управления зависимостями?
  
• На чем сейчас лучше всего делать backend?
  
• TensorFlow все так же рулит для Machine Learning, или пора изучать что-то новое?
  
• Почему твоему джуну надо учить Python, а не JavaScript?
  
• Говорят, что в вебе backend уже не нужен. Так ли это?
  
• 3.x или 2.7?
  
• Чем хороший Python разработчик отличается от плохого?
  

Спойлер: Провокация «3.x vs 2.7» не удалась, ответ однозначный. Отказываться от бэкенда, кажется, еще рано, а на чем его делать, зависит от задачи — кто бы мог подумать.

22 сентября мы провели Backend United #2: Фарш — встречу, посвященную тестированию бэкенда. Говорили о приемах тестирования бэкенда, его отличиях в разных языках. Обсуждали CDC-подход к тестированию микросервисов — почему в Авито используют нативные тесты, написанные на языках сервисов-потребителей. Рассказали о механике и сложностях внедрения Pact — наборе библиотек, которые реализуют Consumer-Driven Contract подход в тестировании API. И узнали, как в микросервисной архитектуре создать честные и эффективные изоляционные тесты.

Под катом делимся впечатлениями, фото, видео, презентациями со встречи и отзывами слушателей.

UGJ — это Уральский Гейм Джем, который проходит в Екатеринбурге (мероприятие проходит онлайн, онсайт только награждение). Темой UGJ-2018 было «ПАРАЗИТИРОВАНИЕ» (правила). Данный Гейм Джем идет две недели. Первая неделя дается на то, чтобы сделать демки, вторая — чтобы доделать игры из демок.

Обсуждая утром с коллегой за чашечкой цикория очередной геймджем (в это же время проходил ежегодный js13k), я назвал тему и в шутку предложил сделать игру-симулятор коррумпированного чиновника, т.е. паразита. Коллега идею поддержал, и выдал на-гора прототип буквально за утро, заодно и назвав проект Kiseijuu (с японского это значит паразит). К сожалению, его энтузиазм быстро угас, так что доделывал игру я (за пару свободных вечеров от других увлечений и забот).

Получилось следующее:


С этим мы и вышли на финальную черту.

Visual Studio Code, вероятно, можно назвать лучшим современным редактором кода. Если вы пока с ним не работаете — то вам, по крайней мере, стоит на него взглянуть. Для VS Code написано великое множество расширений, которые размещают в каталоге Marketplace, удобный доступ к которому организован из самого редактора.

Существуют расширения для отладки и форматирования кода, расширения, облегчающие работу с различными платформами (вроде Heroku, GitHub, Docker, Azure) и технологиями. В Marketplace можно найти темы для редактора, линтеры, средства, облегчающие ввод повторяющихся фрагментов кода, и многое другое.



Автор материала, перевод которого мы публикуем сегодня, отобрал 10 лучших VS Code-расширений, предназначенных преимущественно для тех, кто занимается фронтенд-разработкой, то есть, работает с HTML, CSS, JavaScript и с различными веб-фреймворками.

«Нас порвет к чёртовой матери!» — так думали мы весной. Снег еще не сошел (и даже не пожелтел), а количество заявок на стажировку приближалось к полустам. Надо было всё перепланировать заново. Рабочие места. Программу стажировок. Распределять кураторов. Но перво-наперво определиться, сколько и кого. И когда.

Когда… Все как сговорились и просились на Июль. Оно и понятно — сессия кончилась, месяцок постажироваться, месяцок — отдохнуть, а там уже видно будет. Только как на зло, большинство потенциальных кураторов стажировок тоже просились в отпуск на это время. Ну это ладно. Прорвёмся. Не маленькие.

Встречаемся с каждым желающим. Каждому — простые вопросы: что умеешь, что хочешь освоить по итогам стажировки (цель?). Стажировался ли раньше (хоть в макдональдсе «Свободная касса!»). Далеко ли добираться? Задачка на логику. Посмотреть в глаза, оценить, сработаемся ли, сойдемся ли характерами, сможем ли быть друг другу полезными. Несколько дней по 4 часа разговоры, собеседования, простые вопросы. Честно говорим, что возьмем, к сожалению, не всех. С трудом сбиваем график стажировок. Захватываем кусочек весны и кусочек осени. Рассылаем письма счастья счастливчикам. И письма-извинялки всем остальным. Примерно две трети — извинялки.

Что происходит, когда ваш продукт начинает продаваться в другой стране со своим языком и культурными особенностями? Скорее всего, его ждёт локализация. В большинстве случаев требуется перевести только ресурсные файлы, чтобы меню и элементы интерфейса были на привычном пользователю языке. Но что делать, если основа того, что вы продаёте, — данные, которых много, они поступают постоянно, в большом объёме и требуют регулярного перевода. Причём не на один язык, а сразу на несколько.

Под катом вы найдете историю, как этот вопрос решали в 2ГИС. Я расскажу на примере последнего кейса с Дубаем, но практики применимы для любого языка.

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

В статье рассказывается, как сделать статические версии веб-страниц для их выдачи сервером и как поместить их в репозиторий для контроля версий и резервного копирования. При этом статические и медиафайлы могут храниться отдельно и архивироваться другими средствами (статика обычно помещается в репозиторий для программного кода сайта). Метод работает также для страниц с Unicode-именами (например, для кириллических доменов). В конце приведён работающий Makefile.

Автор пользуется стеком django/uwsgi/nginx, виртуальным выделенным сервером под управлением GNU/Linux, но содержание статьи почти не зависит от конкретных технологий.

На прошлой неделе на Vue.js London я рассказал, что произойдет в следующей мажорной версии Vue. Этот пост содержит подробный обзор плана.