Как стать автором
Обновить

Насколько потолстел JavaScript к 2024 году?

Уровень сложностиСредний
Время на прочтение5 мин
Количество просмотров32K

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

И всё это время я жил с мыслью, что если средний размер страницы равен, скажем, 3 МБ, то JS-бандл должен составлять около 1 МБ. Естественно, основную часть объёма должно занимать содержимое, не так ли?

Что ж, проверить это можно лишь экспериментальным путём, чем я и займусь! Эту статью я пишу в 2024 году и думаю, что через пару лет эксперимент неплохо бы повторить.
Читать дальше →
Всего голосов 160: ↑157 и ↓3+154
Комментарии159

HappyX vs Karax: что проще?

Уровень сложностиСредний
Время на прочтение5 мин
Количество просмотров2.4K

Хотите узнать, как с помощью Nim создавать клиентские веб-приложения?

В этой статье я расскажу вам о веб-фреймворках в Nim и их возможностях, а также приведу примеры в сравнении друг с другом и другими фреймворками.

Читать далее
Всего голосов 6: ↑6 и ↓0+6
Комментарии4

Разработка одностраничных приложений с помощью HappyX

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров2.5K

В прошлой статье я сравнивал HappyX и Karax, показывая их декларативный подход к разработке с помощью Nim.

В этой статье я подробнее расскажу о разработке одностраничных приложений с помощью HappyX с применением императивного подхода к разработке.

Читать далее
Всего голосов 6: ↑6 и ↓0+6
Комментарии4

Google и Yandex SEO оптимизация для SPA приложений

Уровень сложностиСредний
Время на прочтение3 мин
Количество просмотров4.1K

Google и Yandex утверждают, что что-то уже могут по индексированию SPA приложений. В статье показаны результаты проведенного эксперимента по индексации чистого SPA вебсайта.

Результат: Google - хорошо, Yandex - не очень

Читать далее
Всего голосов 8: ↑4 и ↓40
Комментарии11

Идентификация пользователей в Web 3.0

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров6.4K

В данной статье я публикую свои размышления по поводу идентификации пользователей в плавно привходящей третьей версии веба - Web 3.0. Если коротко, то, в отличие от стремящегося к гипер-централизации Web 2.0 (в пределе - по одному веб-приложению разного типа на всё человечество с центром у какой-нибудь глобальной корпорации), Web 3.0 отличается как раз таки децентрализацией и повышенным вниманием к конфиденциальности пользовательских данных (хотя ничего не мешает тем же глобальным корпорациям контролировать функциональность этих децентрализованных приложений на уровне кода приложения или среды его выполнения - браузера или ОС).

Так какие же требования к идентификации могут предъявлять веб-приложения современного настоящего и ближайшего будущего?

Читать далее
Всего голосов 3: ↑2 и ↓1+1
Комментарии28

Индексирование AJAX-сайтов

Время на прочтение9 мин
Количество просмотров26K
При разработке интерфейса одного веб приложения возникла задача сделать странички, формируемые AJAX запросом, индексируемыми поисковиками. У Яндекса и Google есть механизм для индексации таких страниц (https://developers.google.com/webmasters/ajax-crawling/ http://help.yandex.ru/webmaster/robot-workings/ajax-indexing.xml). Суть довольно проста, чтобы сообщить роботу о HTML версии страницы, в тело нужно включить тег . Этот тег можно использовать на всех AJAX страницах. HTML версия должна быть доступна по адресу www.example.com/чтотоеще?_escaped_fragment_=. То есть, если у нас есть страница http://widjer.net/posts/posts-430033, то статическая версия должна иметь адрес http://widjer.net/posts/posts-430033?_escaped_fragment_=.
Чтобы не быть обвиненным в клоакинге, динамическая и статическая версии не должны отличаться, поэтому возникает необходимость создания слепков ajax страниц, о чем и хотелось бы рассказать.
Читать дальше →
Всего голосов 23: ↑18 и ↓5+13
Комментарии5

От Jquery UI до Ext.js: обзор javascript UI библиотек для SPA. Часть 1

Время на прочтение7 мин
Количество просмотров36K
Всем привет! На дворе 2016 год, и web давно превратился в нечто большее, чем простые сайты. Львиная доля компаний уже давно забыла про десктопные программы, и для повсеместных задач используют веб приложения, будь это CRM, система управления складом, система аналитики или простая панель администрирования от сайта (в дальнейшем – админка).

image

И их можно понять, ведь для работы не нужна специфическая конфигурация, специальное установленное ПО, его обновление. Достаточно открыть браузер и программа работает. Поэтому, на мой взгляд, за веб-приложениями – будущее!

Делать с нуля полноценную, ничуть не уступающую десктопной программу — это титанический труд.
Читать дальше →
Всего голосов 36: ↑31 и ↓5+26
Комментарии56

От Jquery UI до Ext.js: обзор библиотек виджетов для построения интерфейса на JS. Часть 2

Время на прочтение7 мин
Количество просмотров22K
В то время как веб развивается и отхватывает все большую часть пирога, когда-то доставшуюся десктопу, производители программного обеспечения, ориентированного на корпоративный сегмент, не могут оставаться без дела. Если когда-то рулили приложения с использованием Windows Forms, то сейчас все больше контор задумываются, стоит ли вообще использовать Windows.

image

Естественно, разработчики подобного ПО стараются адаптироваться под новые условия и выпускают свои UI библиотеки, только уже для Web.

Правда, есть какая-то странная тенденция: вместо конкуренции с внешним миром производители конкурируют как бы между собой. Большинство продуктов имеют одинаковый набор виджетов, которые внешне и структурно выглядят похожими друг на друга, выпускаются с инсталлятором для Windows и имеют широкую поддержку .NET.

В общем, живут в Enterprise мирке со своей атмосферой. И все же я попробую разобраться и найти какие-то уникальные очертания у той или иной библиотеки. А кроются они немного за пределами веб интерфейса, поэтому я попробую залезть чуть дальше банального html + js.
Читать дальше →
Всего голосов 16: ↑13 и ↓3+10
Комментарии36

Инфраструктура онлайн игры

Время на прочтение19 мин
Количество просмотров36K

image


Здравствуйте, меня зовут Александр Зеленин, и я на дуде игрец веб-разработчик. Полтора года назад я рассказывал о разработке онлайн игры. Так вот, она немного разрослась… Суммарный объём исходного кода превысил «Войну и мир» вдвое. Однако в данной статье я хочу рассказать не о коде, а об организации инфраструктуры проекта.

Неужели всё так сложно?
Всего голосов 47: ↑45 и ↓2+43
Комментарии47

Отчет и материалы SPA meetup'а 8 апреля 2017

Время на прочтение4 мин
Количество просмотров6.7K
image

В прошедшую субботу в офисе Avito прошел SPA Meetup. Это митап-сателит Moscow.js, ориентированный на фронтенд-разработчиков, которым интересна тема веб-приложений (Single Page Application), и сочувствующих им. Это уже третья встреча, которая получилась весьма насыщенной: 3 доклада, 2 блица, свободный микрофон, панельная дискуссия и, конечно же, живое общение. В этом посте мы немного расскажем о том, как это было, и поделимся видеозаписями докладов.
Всего голосов 24: ↑23 и ↓1+22
Комментарии0

Что будет если скрестить React и Angular?

Время на прочтение6 мин
Количество просмотров12K

Akili — javascript фреймворк, который появился под влиянием таких решений как React, Angular, Aurelia и в меньшей степени некоторых других. Целью было объединить все лучшее, что я вижу в них и максимально все упростить.

Нравится React, но отталкивает JSX? Любите Angular, но надоела всякая магия?

Тогда вам стоит попробовать это.
Читать дальше →
Всего голосов 23: ↑17 и ↓6+11
Комментарии67

Современная Web-платформа: как расслабиться и получать удовольствие? Практическое руководство, часть 1

Время на прочтение7 мин
Количество просмотров24K

Всем привет!


Помните эту статью? Раньше мы могли быстро собрать статичную HTML-страничку в каком-нибудь FrontPage и сайт был готов. С этим мог справится любой студент. В более сложном случае, мы писали пару строк на PHP и получали уже целый портал, собранный из разных элементов шаблона на сервере. Затем мы захотели, чтобы наш сайт как-то выделялся на общем фоне и умел чуть-чуть больше. Трон занял его-величество jQuery. Теперь же, мы оказались погребены под завалами фреймворков и библиотек, инструментов сборки, менеджеров зависимостей, препроцессоров и постпроцессоров, особых форматов, языков и стилей программирования, чтобы иметь возможность стряпать простые лэндинги. Все стало слишком сложно. Спикеры на конференциях стали соревноваться в изощренности того, каким еще образом можно сломать нам мозг. Как мы докатились до жизни такой? Чем «раньше» так сильно отличается от «сейчас»? Что нас ждет «потом»? Есть ли в современной веб-разработке некий дзен-стайл, блюдя который, можно, как в старые добрые времена, собрать себе уютный сайтик «на коленке» за пару вечеров, без ковыряния в документации десятка хипстерских технологий-однодневок? Насколько доступны нам простые решения в серьезной промышленной разработке? Куда движется веб-платформа? Предлагаю разобраться.
Читать дальше →
Всего голосов 18: ↑16 и ↓2+14
Комментарии73

Пробел в знаниях основ веб-разработки

Время на прочтение8 мин
Количество просмотров58K
Вчера я разговаривал с другом, который ищет разработчика на открытую вакансию. Он выразил некоторое разочарование, которое я тоже испытываю в последнее время:

У меня проблемы с поиском фронтенд-разработчика, в основном, по WP, Foundation, CSS, JS, на низкоуровневую позицию. Не могу понять, в чём дело. Ни у кого из кандидатов нет «базовых знаний» ничего из перечисленного. Но они могут делать сайты на React или других JS-фреймворках, или на базе WP-шаблонов. Но если я говорю, что нужно сделать простые изменения в CSS, смотрят пустыми глазами… Или какую-нибудь мелочь на чистом JS, ничего.
Нет недостатка в учебных лагерях, курсах, полно ресурсов для изучения фронтенд-разработки. Но я собеседовал кучу ребят из этих учебных лагерей и думаю, что там серьёзно недооценивают важность CSS и основ JavaScript.

Конечно, есть ограничения на то, сколько можно усвоить за 12 недель обучения. Но огромная часть проблемы в том, что наша индустрия восхищается новым, одержима самыми последними и прекрасными SPA-фреймворками, в то же время обесценив CSS и «старые» имплементации.
Всего голосов 35: ↑33 и ↓2+31
Комментарии228

Опыт перехода сайта на Single Page Application с упором на SEO

Время на прочтение5 мин
Количество просмотров55K

Привет всем.


Мы классический web 2.0 сайт сделаный на Drupal. Можно сказать, что мы медиа сайт, т.к. у нас очень много всевозможных статей, и постоянно выходят новые. Мы уделяем много внимания SEO. У нас для этого даже есть специально обученные люди, которые работают полный рабочий день.


К нам заходит более 400k уникальных пользователей в месяц. Из них 90% приходит из поиска Google.


И вот уже почти полгода мы разрабатывали Single Page Application версию нашего сайта.


Как вы уже наверное знаете, JS это вечная боль сеошников. И нельзя просто так взять и сделать сайт на JS.


Перед тем как начать разработку мы начали исследовать этот вопрос.
И выяснили, что общепринятым способом является отдача google боту уже отрисованой версии страницы.
Making AJAX applications crawlable


Также выяснилось, что этот способ более не рекомендуется Google и они уверяют, что их бот умеет открывать js сайты, не хуже современных браузеров.


We are generally able to render and understand your web pages like modern browsers.

Т.к. на момент принятия нашего решения Google только-только отказались от подобного метода, и еще никто не успел проверить как Google Crawler на самом деле индексирует сайты сделаные на JS. Мы решили рискнуть и сделать SPA сайт без дополнительной отрисовки страниц для ботов.

Читать дальше →
Всего голосов 61: ↑50 и ↓11+39
Комментарии93

SPA — не серебряная пуля, или альтернативный подход к web-разработке. Часть 1

Время на прочтение2 мин
Количество просмотров23K
Цель паблика не раскритиковать подход SPA, а показать какие есть альтернативы для реализации web приложения, основанного на API. Прошу обсуждать только сам подход, его минусы и плюсы.
Читать дальше →
Всего голосов 29: ↑9 и ↓20-11
Комментарии116

Безопасный способ обмена JWT в ASP.NET Core + SPA

Время на прочтение8 мин
Количество просмотров41K

Вступление


Идентификация по JWT (JSON Web Token) — это довольно единообразный, согласованный механизм авторизации и аутентификации между сервером и клиентами. Преимущества JWT в том, что он позволяет нам меньше управлять состоянием и хорошо масштабируется. Неудивительно, что авторизация и аутентификация с его помощью все чаще используется в современных веб-приложениях.
Читать дальше →
Всего голосов 24: ↑23 и ↓1+22
Комментарии10

SPA Meetup 5: интеграция Jest с QA, мощный UIKit, библиотеки компонентов, DI для масштабирования, платформенные команды

Время на прочтение3 мин
Количество просмотров2.3K

Привет! Это пост-отчёт с митапа Moscow SPA 5, серии встреч для фронтенд-разработчиков, которым интересна тематика веб-приложений (Single Page Application). Вместе с докладчиками из Mail.Ru, Яндекса, ВКонтакте, Тинькофф и Авито мы говорили об интеграции Jest с QA-инфраструктурой, DI в качестве способа масштабирования, росте библиотек компонентов, платформенной команде. А также обсуждали, может ли UIKit быть максимально гибким и подходящим для всего.


Заходите под кат, если вам интересны эти темы. Внутри вы найдёте материалы встречи: видеозаписи докладов, презентации спикеров, отзывы гостей митапа и ссылки на фотоотчёт.


Всего голосов 24: ↑23 и ↓1+22
Комментарии0

Проблемы основных паттернов создания data-driven apps на React.JS

Время на прочтение8 мин
Количество просмотров6.3K

Для создания интерфейсов React рекомендует использовать композицию и библиотеки по управлению состоянием (state management libraries) для построения иерархий компонентов. Однако при сложных паттернах композиции появляются проблемы:


  1. Нужно излишне структурировать дочерние элементы
  2. Или передавать их в качестве пропсов, что усложняет читабельность, семантичность и структуру кода

Для большинства разработчиков проблема может быть неочевидна, и они перекидывают ее на уровень управления состоянием. Это обсуждается и в документации React:

Читать дальше →
Всего голосов 17: ↑15 и ↓2+13
Комментарии37

Vue для самых маленьких a.k.a небольшой блог по всем канонам

Время на прочтение15 мин
Количество просмотров27K


Всем привет! В данной статье рассмотрим разработку фронта простенького блога на Vue с использованием всех прелестей Vue включая Vuex и Router. А также поговорим про структуру приложения и работу с контейнером и роутером.
Читать дальше →
Всего голосов 10: ↑9 и ↓1+8
Комментарии29

MicroSPA, или как изобрести квадратное колесо

Время на прочтение4 мин
Количество просмотров3.6K
Всем привет, меня зовут Андрей Яковенко, и я веб-разработчик компании Digital Design.

В нашей компании есть множество проектов, реализованных с помощью системы управления веб-контентом sitefinity, или по-простому CMS. Причины, по которым мы ее используем, были описаны ранее в этой статье. CMS – это, как правило, Multi Page Application, и сегодня я расскажу о том, что может дать внедрение frontend-фреймворков в решения на sitefinity и как это сделать.


Читать дальше →
Всего голосов 8: ↑3 и ↓5-2
Комментарии15