https://habr.com/post/432008/- JavaScript
- Open source
- TypeScript
- Разработка веб-сайтов
Мы
уже рассказывали с какими проблемами мы сталкиваемся занимаясь фронтенд разработкой в 2018 году. Давайте посмотрим как далеко мы уходим от стандартов когда пишем наш код
и как мы можем решить эту проблему.
Современные браузеры умеют многое, они понимают ES6, поддерживают ES модули, предоставляют удобные средства для разработки и отладки. Но достаточно ли этого и пользуемся ли мы всеми этими средствами эффективно?
Давайте выделим основные отличия между нашим исходным кодом и кодом который мы загружаем в наш браузер:
Код доставляется одним файлом — хотя все современные браузеры понимают формат ES модулей, большинство инструментов для разработки склеивает наш код в один большой файл.
Новые возможности javascript — согласно
таблице совместимости только последние десктопные версии chrome поддерживают 100% новых свойств языка (и лишь часть экспериментальных свойств), другие браузеры нуждаются в транспиляции и полифилах для отсутствующих свойств.
@Component()
class Toolbar {}
Новые возможности css —
cssdb содержит список поддерживаемых современными браузерами свойств css, остальные должны быть скомпилированы.
@media (480px <= width < 768px) {}
Commonjs модули — родной для
node.js формат модулей не смотря на свою популярность и распространенность не поддерживается ни одним браузером и должен быть преобразован (ES модули поддерживаются новыми версиями node.js в
экспериментальном режиме, большинство библиотек по прежнему поставляются в Commonjs формате).
const component = require('./component');
module.exports = function() {};
Простой импорт — (импорт начинающийся с имени пакета), браузерами не поддерживается, ведуться работы над
черновиком стандарта (альтернативно уже сейчас можно консолидировать импорт в node.js и браузеры используя ES модули и переопределяя node.js загрузчик модулей для работы с абсолютными путями вида /node_modules/lodash/lib/get.js, но большинство библиотек этого не делает).
import get from 'lodash/get';
Импорт встроенных модулей — в браузерах также не поддерживается, требует замещение библиотеками.
import zlib from 'zlib';
Смешанный импорт — не является стандартом, но тем не менее популярен во многих библиотеках:
Import React, { Component } from 'react';
Деструктуризация импорта — мы привыкли импортировать что угодно откуда угодно не заботясь о том, экспортируется ли требуемое нами значение:
import { Component } from 'react';
на самом деле библиотека экспортирует один объект React, который содержит свойство Component, а не набор свойств как можно было подумать.
Импорт сторонних форматов (css, json и т.д.) — браузерами не поддерживается и судя по всему не будет (за исключением
импорта wasm).
import './style.css';
Декларации типов — typescript и flow стали очень популярны и помогают в разработке больших библиотек, но не имеют поддержки в браузерах.
const a: number = 1;
Метаязыки — scss, sass, less, typescript, coffeescript, pug не являются стандартными и требуют компиляции.
<style type=”text/scss”>
.logo {
color: white;
&.active {
color: red;
}
}
</style>
Шаблоны jsx — не являются стандартом и должны быть преобразованы используя createElement:
const element = <h1>Hello, world!</h1>;
Шаблоны vue — хотя и черпали вдохновение у веб компонентов, также не являются стандартом:
<template>
<div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>
Относительные пути в веб компонентах — если вы привыкли разбивать ваши компоненты на скрипты шаблоны и стили, то вы знаете, что пути привязываются к корню проекта и компонент становится невозможно переносить и сложно переиспользовать в других проектах.
fetch('./my-button.html');
Если вы работаете с Angular:
Инъекция зависимостей — реализуется с помощью отражений и метаданных декораторов, требует компиляции.
Динамическая загрузка стилей по http — фреймворк не поддерживает эту возможность из коробки.
Как видим веб к которому мы привыкли далек от стандарта, хотя частично к нему и стремится. Задача
hq сгладить эту разницу до тех пор пока многие вещи не войдут в стандарт, а другие не выйдут из обихода. hq это такой умный сервер, который делает ваш код чуть понятнее браузеру при этом преобразовывая только необходимый минимум и не склеивая все в одну кучу. Таким образом вне зависимости от выбранной технологии и фреймворка hq делает всю эту рутинную работу по обеспечению совместимости за вас и позволяет мгновенно приступить к разработке.
Какие еще преимущества дает hq?
- Отсутствие конфигурации
- Улучшенная отладка благодаря отсутствию бандлов
- Код в браузере максимально приближен к исходникам
- Простая структура проекта отраженная в браузере
- Видны все зависимости проекта, кто что грузит, почему и когда
- Полноценное использование инструментов браузера: загрузка / отладка / покрытие кода
- Очень быстрая работа сервера
- При использовании стандартов hq работает как обычный статический сервер
Попробуйте hq прямо сейчас:
npm i -g @hqjs/hq
и затем запустите в корне проекта:
hq
P.S.: Спасибо пользователю
justboris за ценные замечания к предыдущей статье