[Из песочницы] Частые трудности работы с React.js

Привет, Хабр! Представляю вашему вниманию перевод статьи Samer Buna «React.js Frequently Faced Problems».
Не паникуйте. Вы правы: существуют мириады веб-технологий, архитектур и фреймворков, и множество разрабатывается прямо сейчас. Помните: каждый, кто стал профессиональным веб-разработчиком начинал как и вы. Они изучали языки, библиотеки по одному, раз за разом, пока не прокачали свои навыки и механизмы работы

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

На самом деле, если вы сконцентрируетесь на одной вещи, например на создании сайта на простейшем HTML/CSS/JavaScript без библиотек, а потом добавите фреймворк по типу React’а, ваш путь от новичка до профессионала пройдет гораздо удобнее и приятнее.
И правда, новичкам бывает сложно разобраться с простыми вещами, на которые опытный разработчик даже не обращает внимание. Эта статья призвана разобрать популярные ошибки и затруднения, с которыми сталкиваются большинство изучающих React.
Читать дальше →

Не вебпаком единым

Представляем лог доклада с OrelJS о настройке удобной среды разработки с использованием SystemJS. У сборки на основе Webpack полно недостатков, в докладе представляется альтернативный подход на основе SytemJS и JSPM.


Читать дальше →

Книга «Angular и TypeScript. Сайтостроение для профессионалов

image Всем привет! Недавно у нас вышла новая книга, описывающая работу с непростыми и мощными инструментами веб-разработчика: Angular и TypeScript. Авторы: Яков Файн и Антон Моисеев объясняют особенности фреймворка, приводя простые примеры кода, и нескольких глав излагают, как создать одностраничное приложение для онлайн-аукционов. Ниже мы рассмотрим раздел из книги, посвященный внедрению зависимостей.

Любое Angular-приложение представляет собой коллекцию объектов, директив и классов, которые могут зависеть друг от друга. Несмотря на то, что каждый компонент может явно создавать экземпляры своих зависимостей, Angular способен выполнять эту задачу с помощью механизма внедрения зависимостей.
Читать дальше →

Советы по стилю. Как написать читаемый React-код

Когда разработчик проводит code review, ему редко хватает времени вникнуть в каждую строку: приходится быстро продумывать различные ситуации, в которых этот код может не работать. При анализе существует несколько моментов, на которые стоит обращать внимание, чтобы быстро понять, как именно код работает. Подсмотрели у Nirmalya Ghosh несколько приемов, как сделать javascript-код изящнее при создании компонентов с помощью библиотеки React. Хотя у нас есть свои особенности разработки в ЕФС, о которых вы можете прочитать в этой статье, некоторые из описанных под катом приемов мы находим интересными. Читаем и обсуждаем в комментариях!


Читать дальше →

Зачем солить HTTP-коллбэки


Некоторые облачные сервисы хотят двустороннего общения для нотификаций: рассказать вашему backend о завершении долгой операции, показать случившиеся ошибки, предупредить о низком балансе платных услуг — вся вот эта история. И если для общения с сервисами мы привыкли использовать HTTP-запросы, то в обратную сторону есть много вариантов: от проверок статуса раз в десять минут и до постоянного WebSocket или HTTP/2 подключения с нотификациями в реальном времени. Самый простой способ это HTTP callbacks. Вы задаете в админке URL своего бэкенда, а облачный сервис в случае интересных событий делает HTTP-запрос к этому URL с дополнительный информацией в теле запроса. Обратная сторона простоты это безопасность. Как убедиться, что запрос сделал именно облачный сервис, а не злобный хакер Вася? Несколько способов под катом.
Читать дальше →

Не фича, но баг

22 декабря 2017 года — Вконтакте выкатила интересный апгрейд собственного iOS-приложения. Вот цитата новостного агентства, касающаяся конкретных изменений:
В новой версии «ВКонтакте» для iOS и Android появилась поддержка Accelerated Mobile Pages (AMP) — мобильного стандарта, который позволяет быстро загружать внешние статьи. Теперь страницы всех сайтов, которые настроили AMP, открываются прямо внутри приложения.
(официальная новость)

Технология AMP, разработку которой инициировал Google, призвана ускорять работу вебсайтов, на всех устройствах и платформах. Это современный подход к оптимизации HTML и CSS, позволяющий ускорять загрузку на устройствах с помощью preconnect API и асинхронного выполнения Javascript.
Читать дальше →

10 языков программирования для изучения в 2018 году

Вышло ежегодное исследование TIOBE Index for January 2018, где определены самые популярные языки программирования 2018 года. Рассказываем, какие языки вошли в топ-10, в какой сфере они применяются и какие задачи выполняют. Опытные разработчики пройдут мимо — ничего интересного, а джуниоры определят интересную сферу и выберут перспективный язык для изучения. Дерзайте!


Читать дальше →

[Из песочницы] Javascript — решение асинхронной проблемы?

В этой статье, я хочу рассказать про свое решение проблемы с асинхронной функциональностью javascript, по средствам введения полностью асинхронной модели вычислений. Будет описана сама концепция, и дана ссылка на реализацию. Заинтересовавшихся прошу под кат.

Читать дальше →

Как я чинил интерактивный логин, или Что там в кишках у //chrome/test/ChromeDriver?

Эта статья возникла из-за одной моей ошибки и двух багов — по одному в Chromium Headless и Chrome Driver. В результате пришлось собрать всё это из исходников (в статье есть подробнейшая инструкция), отладить цепочку взаимодействия Selenium<->ChromeDriver<->Chromium в отладчике IntelliJ IDEA и Microsoft Visual Studio, покопаться в Java, C++ и JS.

Статья будет интересна тем, кто хочет понять, чем им грозит переход на Selenium + Headless Chrome и как с этим жить. А также всем, кто просто хочет немного поглумиться над несчастным быдлокодером.

Под катом есть пачка скриншотов (трафик!).

Кстати, всё это можно было бы сделать скринкастом — но нельзя, потому что время компиляции C++ необычайно долгое. Вместо этого тут будут скриншоты для привлечения внимания.

Вначале напомню названия участвующих продуктов. Их три штуки:

  • Chromium — это браузер. Небрендированная версия Google Chrome, без автообновлений, анальных следящих зондов, но и без несвободных компонентов типа кодеков.
  • Chromium ChromeDriver — это часть Chromium, которая отвечает за управление им с помощью внешних инструментов.
  • Selenium и его Selenium Chrome Driver — эта штука предоставляет Java API для управления Хромиумом. Джава тут не принципиальна, на JavaScript и Puppeteer было бы то же самое.
  • ...Далее...

[Перевод] Ещё большее ускорение WebAssembly: новый потоковый и многоуровневый компилятор в Firefox

Оба авторе: Лин Кларк — разработчик в группе Mozilla Developer Relations. Занимается JavaScript, WebAssembly, Rust и Servo, а также рисует комиксы о коде.

Люди называют WebAssembly фактором, меняющим правила игры, потому что эта технология ускоряет выполнение кода в вебе. Некоторые из ускорений уже реализованы, а другие появятся позже.

Одна из техник — потоковая компиляция, когда браузер компилирует код во время его загрузки. До настоящего времени эта технология рассматривалась лишь как потенциальный вариант ускорения. Но с выпуском Firefox 58 она станет реальностью.

Firefox 58 также включает в себя двухуровневый компилятор. Новый базовый компилятор компилирует код в 10–15 раз быстрее, чем оптимизирующий компилятор.

Вместе эти два изменения означают, что мы компилируем код быстрее, чем он поступает из сети.



На десктопе мы компилируем 30-60 МБ кода WebAssembly в секунду. Это быстрее, чем сеть доставляет пакеты.
Читать дальше →


Последние посты