Pull to refresh

В погоне за веб стандартами

Reading time 3 min
Views 6.6K
Original author: hqjs
Мы уже рассказывали с какими проблемами мы сталкиваемся занимаясь фронтенд разработкой в 2018 году. Давайте посмотрим как далеко мы уходим от стандартов когда пишем наш код



и как мы можем решить эту проблему.


Современные браузеры умеют многое, они понимают ES6, поддерживают ES модули, предоставляют удобные средства для разработки и отладки. Но достаточно ли этого и пользуемся ли мы всеми этими средствами эффективно?

Давайте выделим основные отличия между нашим исходным кодом и кодом который мы загружаем в наш браузер:

Код доставляется одним файлом — хотя все современные браузеры понимают формат ES модулей, большинство инструментов для разработки склеивает наш код в один большой файл.

Новые возможности javascript — согласно таблице совместимости только последние десктопные версии chrome поддерживают 100% новых свойств языка (и лишь часть экспериментальных свойств), другие браузеры нуждаются в транспиляции и полифилах для отсутствующих свойств.

@Component()
class Toolbar {}

Новые возможности csscssdb содержит список поддерживаемых современными браузерами свойств 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 { 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 за ценные замечания к предыдущей статье
Tags:
Hubs:
+13
Comments 27
Comments Comments 27

Articles