Pull to refresh
  • by relevance
  • by date
  • by rating

Server side rendering на Vue.js

JavaScript *HTML *Node.JS *Build automation *VueJS *
Tutorial

Сравнительно недавно Vue.js обзавёлся полноценной поддержкой серверного рендеринга. В интернете довольно мало информации о том, как его правильно готовить, так что я решил подробно описать процесс создания необходимой среды для разработки приложения с SSR на Vue.js.


Всё, о чём пойдёт речь, реализовано в репозитории на github. Я буду часто ссылаться на его исходники и, собственно, попытаюсь объяснить, что происходит и зачем это нужно :)


В статье будут описаны достаточно общие для SSR подходы (если вам просто нужно что-то готовое для использования, то вы можете посмотреть в сторону Nuxt.js), так что вполне вероятно, что сказанное ниже можно будет частично или полностью применить и к другим фреймворкам/библиотекам типа Angular и React.

Читать дальше →
Total votes 7: ↑6 and ↓1 +5
Views 35K
Comments 37

Разработка изоморфного RealWorld приложения с SSR и Progressive Enhancement. Часть 1 — Введение и выбор стека

Website development *JavaScript *Client optimization *HTML *Node.JS *
Tutorial
Весной 2017 года Eric Simons, со-основатель учебного проекта Thinkster, анонсировал проект «RealWorld»демо приложение и спецификация к нему. Проект объявил своей целью выйти за рамки привычных «todo»-демок для более прикладного сравнения и изучения возможностей различных фреймворков и технологий, а также подходов к разработке и способов решения задач.

image
Читать дальше →
Total votes 10: ↑10 and ↓0 +10
Views 9K
Comments 5

Разработка изоморфного RealWorld приложения с SSR и Progressive Enhancement. Часть 2 — Hello World

Website development *JavaScript *Client optimization *HTML *Node.JS *
Tutorial
В предыдущей части туториала мы узнали что такое проект RealWorld, определились целями туториала, выбрали стек технологий и написали простой веб-сервер на Express в качестве основы для изоморфного фронтенда.

В этой части, мы допилим серверную часть и напишем изоморфный «Hello World» на Ractive, а также соберем все это с помощью Webpack.


Читать дальше →
Total votes 10: ↑10 and ↓0 +10
Views 5.3K
Comments 7

Создатель Vue.js отвечает Хабру

Website development *JavaScript *Programming *Interfaces *VueJS *


Всех с пятницей!

Как и обещали, публикуем ответы Эвана Ю (Evan You) на вопросы, которые мы долго и мучительно собирали в предыдущем посте, а также русскоязычном Vue чате в Telegram.
Читать дальше →
Total votes 93: ↑89 and ↓4 +85
Views 55K
Comments 69

Разработка изоморфного RealWorld приложения с SSR и Progressive Enhancement. Часть 3 — Routing & Fetching

Website development *JavaScript *Client optimization *HTML *Node.JS *
Tutorial
В предыдущей части туториала мы научили наше изоморфное приложение проксировать запросы к backend api, с помощью сессии передавать начальный стейт между синхронными запросами и осуществлять Server-side rendering с возможностью переиспользования разметки на клиенте (hydrate). В этой части мы решим еще две ключевые проблемы изоморфных веб-приложений: изоморфный роутинг и навигация, и повторный фетчинг и начальное состояние данных. И сделаем это буквально 5-ю строками кода. Погнали!

image
Читать дальше →
Total votes 5: ↑5 and ↓0 +5
Views 4.3K
Comments 0

Разработка изоморфного RealWorld приложения с SSR и Progressive Enhancement. Часть 4 — Компоненты и композиция

Website development *JavaScript *Client optimization *HTML *Node.JS *
Tutorial
В предыдущей части туториала мы решили проблемы изоморфного роутинга, навигации, фетчинга и начального состояния данных. В итоге, получилась довольно простая и лаконичная основа для изоморфного приложения, которую я также выделил в отдельный репозиторий — ractive-isomorphic-starterkit. В этой части мы начнем писать приложение RealWorld, но сначала осуществим декомпозицию. Погнали!
image
Читать дальше →
Total votes 14: ↑13 and ↓1 +12
Views 2.9K
Comments 2

Angular и SEO: как их подружить?

CSS *JavaScript *HTML *Angular *Search engine optimization

Несмотря на заявления Google и Яндекс о поддержке поисковыми ботами парсинга сайтов SPA, надеяться на нормальную индексацию не стоит — у поисковых ботов мало ресурсов, ваше приложение должно максимально быстро отрабатывать, иначе, вам либо порежут рейтинг, либо не спарсят страницу, так же бот может не дождаться отработки всех ваших скриптов…
(исследование Google bot)


Изменение посещаемости

Мой маленький проект для исследования технологий — изменение посещаемости, после перехода на Server Side Rendering (SSR)


Как настроить Angular и готовые примеры ниже подкатом.

Читать дальше →
Total votes 15: ↑10 and ↓5 +5
Views 19K
Comments 8

SSR: когда, зачем и для чего. На примере Vue

Umbrella IT corporate blog JavaScript *VueJS *
Tutorial

(Иллюстрация)

Once upon a time Несколько лет назад, когда я только начинал работать с вебом на Java, мы работали с JSP. Вся страница генерировалась на сервере и отправлялась клиенту. Но потом встал вопрос о том, что ответ приходит слишком долго…
Читать дальше →
Total votes 17: ↑14 and ↓3 +11
Views 58K
Comments 17

Перед вами — React Modern Web App

Website development *Open source *JavaScript *ReactJS *Search engine optimization
Tutorial

Перед тем как начать собирать с нуля Modern Web App нужно разобраться, что такое — Современное Веб-Приложение?


Modern Web App (MWA) — приложение, придерживающееся всех современных веб-стандартов. Среди них Progressive Web App — возможность скачивать мобильную браузерную версию на телефон и использовать как полноценное приложение. Так же это возможность листать сайт в оффлайне как с мобильного устройства, так и с компьютера; современный материальный дизайн; идеальная поисковая оптимизация; и естественно — высокая скорость загрузки.



Вот что будет в нашем MWA (советую использовать эту навигацию по статье):



Люди на Хабре деловые, поэтому сразу ловите ссылку на GitHub репозиторий, архив с каждой из стадий разработки и демо. Статья рассчитана на разработчиков, знакомых с node.js и react. Вся необходимая теория представлена в необходимом объеме. Расширяйте кругозор, переходя по ссылкам.


Приступим!

Читать дальше →
Total votes 17: ↑14 and ↓3 +11
Views 29K
Comments 11

React и Code Splitting

JavaScript *ReactJS *

С code splitting я познакомился очень давно, в году так 2008, когда Яндекс немного подвис, и скрипты Яндекс.Директа, синхронно подключенные на сайте, просто этот сайт убили. Вообще в те времена было нормой, если ваши "скрипты" это 10 файлов которые вы подключаете в единственно правильном порядке, что и до сих пор (с defer) работает просто на ура.
Потом я начал активно работать с картами, а они до сих пор подключаются как внешние скрипты, конечно же lazy-load. Потом уже, как член команды Яндекс.Карт, я активно использовал ymodules возможность tree-shaking на клиенте, что обеспечивало просто идеальный code splitting.


А потом я переметнулся в webpack и React, в страну непуганных идиотов, которые смотрели на require.ensure как баран на новые ворота, да и до сих пор так делают.


Code splitting — это не "вау-фича", это "маст хэв". Еще бы SSR не мешался...


Разберемся?
Total votes 13: ↑12 and ↓1 +11
Views 12K
Comments 2

React Code Splitting in 2019

JavaScript *ReactJS *

It's 2019! Everybody thinks they know code splitting. So - let's double check!



What does code splitting stand for?


In short – code splitting is just about not loading a whole thing. Then you are reading this page you don't have to load a whole site. When you are selecting a single row from a database – you don't have to take all.
Obvious? Code splitting is also quite obvious, just not about your data, but your code.

Read more →
Total votes 7: ↑6 and ↓1 +5
Views 3.6K
Comments 6

ReactJS, Server Side rendering и некоторые тонкости обработки метатегов страницы

ReactJS *
Одной из проблем, которую придется решать при написании Server Side rendering приложения — это работа с метатегами, которые должны быть у каждой страницы, которые помогают при индексации их поисковыми системами.

Начиная гуглить, первое решение, к которому приведут Вас, скорее всего React Helmet.

Одно из преимуществ библиотеки, что ее в некотором роде можно считать изоморфной и может прекрасно использована как на стороне клиента, так и на стороне сервера.
Читать дальше →
Total votes 14: ↑13 and ↓1 +12
Views 7.9K
Comments 4

Создаем интернет-магазин на Nuxt.js 2 пошаговое руководство Часть 1

Website development *JavaScript *HTML *Node.JS *VueJS *
Sandbox
Tutorial


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


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


В этой статье я хочу поделиться как создать примитивный интернет-магазин:


  • Который будет быстро загружаться у пользователя.
  • Который полюбит Google (или любой другой поисковик) с точки зрения SEO.
Читать дальше →
Total votes 15: ↑15 and ↓0 +15
Views 52K
Comments 9

Создаем интернет-магазин на Nuxt.js 2 пошаговое руководство Часть 2

Website development *JavaScript *HTML *Node.JS *VueJS *
Tutorial


Первая часть тут


Продолжаем разработку нашего интернет магазина. В этой части будет:


  • нормальная загрузка картинок по статическим адресам
  • генерация хлебных крошек на клиенте
  • страница товара
  • шапка
  • рабочая кнопка купить с синхронизацией товаров между вкладками (и сессиями)
Читать дальше →
Total votes 10: ↑10 and ↓0 +10
Views 13K
Comments 10

Создаем интернет-магазин на Nuxt.js 2 пошаговое руководство Часть 3

Website development *JavaScript *HTML *Node.JS *VueJS *
Tutorial


Как и обещал продолжаем.


В этой части:


  • создадим блоки товаров "С этим товаром также покупают" и "Интересные товары"
  • создадим иконку корзины с количеством товаров
  • подключим модальное окно с товарами в корзине
  • перепишем всю логику store
Читать дальше →
Total votes 4: ↑4 and ↓0 +4
Views 9.9K
Comments 2

gogrep: структурный поиск и замена Go кода

Open source *Designing and refactoring *Go *Software

gogrep — это одна из моих любимых утилит для работы с Go. Она позволяет находить код по синтаксическим шаблонам, фильтровать результаты по типам выражений, а также выполнять замену (тоже по шаблону).


В этой заметке я расскажу как использовать gogrep, а также о VS Code расширении для более удобной работы с gogrep прямо из редактора.


Читать дальше →
Total votes 27: ↑26 and ↓1 +25
Views 4.5K
Comments 2

Вырезаем SSR и ускоряем Хабр в 10 раз

Website development *Client optimization *TypeScript *

Здравствуйте, меня зовут Дмитрий Карловский и я… тот ещё токсичный перец. Недавно я источал свои альфа-флюиды на Альфа-банк. Ребята в ответ поступили достойно, и не стали атаковать меня в личку объяснениями, как сильно я не прав, а завели задачу на гитхабе. И даже что-то пофиксили, сделав часть моих претензий несостоятельными. Но не ту часть, где SSR портит всё.


Время утекло, пыль улеглась, и тут история получает продолжение: недавно ко мне обратился продюсер контент-студии Хабра с предложением пропесочить их Торт. Что ж, расчехляем вентилятор!


Да будет срач

Читать дальше →
Total votes 146: ↑122 and ↓24 +98
Views 41K
Comments 257

Архитектура современных корпоративных Node.js-приложений

Яндекс corporate blog ЮMoney corporate blog Website development *JavaScript *Node.JS *
🔥 Technotext 2020
Ох, не зря в названии намёк на нетленку Фаулера. И когда фронтенд-приложения успели стать настолько сложными, что мы начали рассуждать о высоких материях? Node.js… фронтенд… погодите, но Нода же на сервере, это бэкенд, а там ребята и так всё знают!



Давайте по порядку. И сразу небольшой дисклеймер: статья написана по мотивам моего выступления на Я.Субботнике Pro для фронтенд-разработчиков. Если вы занимаетесь бэкендом, то, возможно, ничего нового для себя не откроете. Здесь я попробую обобщить свой опыт фронтендера в крупном энтерпрайзе, объяснить, почему и как мы используем Node.js.
Читать дальше →
Total votes 53: ↑52 and ↓1 +51
Views 53K
Comments 64

Server-Side Rendering с нуля до профи

Website development *JavaScript *Node.JS *ReactJS *Search engine optimization
Tutorial


  • В данной статье мы разберем влияние SSR на SEO оптимизацию приложения.
  • Пройдем с вами путь по переносу обычного React приложения на SSR.
  • Разберем обработку асинхронных операций в SSR приложениях.
  • Посмотрим, как делать SSR в приложениях с Redux Saga.
  • Настроим Webpack 5 для работы с SSR приложением.
  • А также рассмотрим тонкости работы SSR: Генерация HTML Meta Tags, Dynamic Imports, работа с LocalStorage, debugging и прочее.
Читать дальше →
Total votes 12: ↑10 and ↓2 +8
Views 28K
Comments 4
1