Меня зовут Итан. Я работал над проектом под названием Jasonette , каркас, которая позволяет создавать кроссплатформенные собственные IOS и Android-приложения, используя только json Markup.
И совсем недавно я выпустил Cell.js новый тип фреймворка интерфейсных веб-приложений.
Проблема, которую я хотел решить
После того, как вы можете построить веб-сайт, используя HTML, JavaScript и CSS, без дополнительных инструментов. Но это все изменилось за последние пару лет.
В 2017 году просто использовать любую библиотеку JavaScript, нам нужно «установить» библиотеку, используя NPM установить Соберите все 3-я партию HTML-шаблонов (потому что шаблоны не поддерживаются браузером в наклонно) и упаковывают весь код в один файл Bundle.js с помощью WebPack. А поскольку мы уже потеряли войну против инструментов сборки в любом случае, мы могли бы также пройти все и бросить другой инструмент сборки в смесь: Babel. С Babel мы пишем код на языках, которые не будут работать на браузере, но это нормально, потому что Бабел будет транспировать их всех. Так далее, так далее.
Я не очень поклонник этой тенденции, потому что он просто не чувствует себя правильно. Мы намеренно создаем проблемы, затем изобретающие способы их решения. И как только мы найдем решения этих проблем, мы бросаем еще больше проблем на них, потому что теперь мы можем. Но дело в том, что мы делаем все более и сложнее во время всего этого. И осложнение неизбежно приводит нас к новому набору проблем, которые мы снова отправились к решению. Это бесконечная нисходящая спираль.
Было бы здорово, если бы мы могли избавиться от всего этого и в конечном итоге с рабочим процессом, который выглядит так (правая сторона):
И именно поэтому я начал работать над клеткой.
Для быстрого фона я также поддерживаю еще один проект с открытым исходным кодом под названием Jasonette Отказ Основная идея Jasonette состоит в том, чтобы сделать его суперпростыми для создания собственных мобильных приложений, избавившись от всех сложных и бюрократических частей приложения.
Например, вместо того, чтобы повторно составить приложение каждый раз, когда вы делаете обновление, вам просто нужно изменить разметку JSON вашего приложения с сервера. Не нужно касаться студии Android или Xcode. Вся логика приложения напрямую трансляция с вашего сервера в приложение, так как JSON, которое затем самостроится в нативное приложение мгновенно. Он в основном работает как веб-браузеры, кроме они все родные. Это освобождает вас от необходимости беспокоиться обо всех ненужных и сложных деталях, которые не имеют ничего общего с помощью логики приложения.
Несколько месяцев назад я отправился на работу на веб-версии Jasonette. Я экспериментировал со зданием на вершине нескольких популярных JavaScript Frameworks, но быстро понял, что ни один из них не соответствует моей цели. Весь точка Джасонетта состояла в том, чтобы избавиться от всей бюрократии, которая не имеет ничего общего с фактическим приложением. С этим сказанным, если бы я собирался на вершине любых существующих JavaScript Framework, я бы уже потерял войну – эти рамки веб-приложений поставляются с бюрократией встроенной, в виде инструментов сборки, управление зависимостями, код транпионата, шаблона Компиляция и т. Д.
Так почему же это так сложно? Есть явно веские причины, почему у нас есть эти инструменты, верно?
Ну вот моя теория: я думаю, что корень всего зла – «зависимость».
- Поскольку мы зависим от синтаксиса, который еще не поддерживается (или никогда не будет поддерживаться) всеми браузерами, нам нужно транпилировать их => см. ES6, JSX и т. Д.
- Поскольку мы зависим от библиотек, которые зависят от других библиотек, зависимость поступает по умолчанию, если мы когда-либо будем использовать любую из этих библиотек. Это как российская кукла зависимостей.
- Поскольку большинство JavaScript Frameworks находятся на основе классов – это означает, что вы должны наследовать/расширить их – вы должны импортировать/требовать их и создавать инстанцию. Этот тип плотно связанного образца вводит еще одно измерение зависимости.
Идея
Вот идея. Что делать, если мы пойдем до того, как все это началось и подумать об этом. Что если у нас не было зависимостей, чтобы начать? Что, если все было децентрализовано и слабо связано, а не через строгие зависимости? Тогда, возможно, мы можем решить проблему более фундаментальным образом.
Идея для ячейки:
- Возможно, мы можем упростить много вещей, если мы можем избавиться от зависимостей от всего, от кода до синтаксиса для разработки рабочего процесса.
- Мы должны быть в состоянии избавиться от зависимостей, сосредоточившись на создании минимального автономного строительного блока (HTML-элементы) вместо того, чтобы пытаться построить полноты для монолитной структуры. Каждая из этих строительных блоков может функционировать как полностью инкапсулированное контейнер выполнения приложений.
- Затем они могут быть составлены для создания сложных приложений. Поскольку каждый строительный блок является самостоятельно, нет присущей зависимости.
Я много думал об этой проблеме, работая над моим другим проектом-ясонетом – и имел пару интересных идей на этом. Поэтому я решил попробовать.
Вдохновение
Чтобы построить децентрализованную первую структуру, я искал вдохновение от возникающих систем. И нет ничего лучше, чем мать-природа, когда речь идет о возникающих системах. Более конкретно, ячейка была вдохновлена тем, как реальные клетки жизни работают, чтобы построить сложные формы жизни.
Возвращаясь к контексту веб-приложения, Cell.js имеет четкую цель: создать минимальные автономные элементы HTML, которые могут быть составлены для создания сложных систем. В этом смысле сама Cell.js не совсем сопоставима с другими полностающимися каркасами, хотя в некотором смысле это.
Что я построил: ячейку, собственная система приложений
Ячейка представляет собой фреймворк в интернет-панели. Веб-приложения построены с использованием DOM, DATA и логики приложения, которая связывает и контролирует их всеми.
Обычно работа веб-структуры веб-приложения состоит в том, чтобы предоставить централизованное MVC (или аналогичное), которое заботится обо всем этом на протяжении всего жизненного цикла приложения.
Ячейка, с другой стороны, не питается от централизованной структуры MVC. Вместо этого он сосредотачивается только на создании автономного DOM, что означает, что он создает HTML-элементы, и гарантирует, что каждый элемент содержит свои собственные данные и контекст приложения, поэтому они могут функционировать самостоятельно без внешнего управления.
Начиная
С помощью клетки нет «установки». Вместо этого вы используете его так же, как и любой другой интерфейсную библиотеку JavaScript. Все, что вам нужно сделать, это включить В вашем HTML и начните писать.
У ячейки нет никаких методов API или классов. Вместо этого вы пишете приложения, написав объекты JavaScript, которые следуют небольшому набору правил. Вот пример полнофункциональной ячейки пример.
Глядя на код, вы заметите, что у нас нет разметки HTML (или шаблона), и иметь только одну переменную. Работа ячейки состоит в том, чтобы автоматически преобразовать эту переменную в дерево DOM.
Как яблока знает, какую переменную преобразовать? Все, что вам нужно сделать, это следовать определенным правилам, чтобы позволить ямуручему знанию. Вот первый:
Когда вы объявляете переменную и хотите позволить ячейку превратить его в элемент, вы просто прикрепите атрибут « $ Cell » для объекта. Как вы можете видеть, это именно то, что делает код выше.
Есть пара других специальных ключевых слов, таких как $ Cell Отказ Все специальные ключевые слова префиксированы $ (Всего всего 6). В этом примере мы видим $ type , $ Комплектация и $ текст Так что позвольте мне объяснить те.
$ type используется для описания типа узла, такого как «вход», «Div» и т. Д.
$ текст используется для описания текста внутри узла.
$ Компонент это массив клеточных объектов для описания детей. Вы можете использовать $ компоненты в элементы гнезда.
И остальные атрибуты переводят 1: 1 на атрибуты DOM.
Используя только эти правила, вы можете создать полное дерево DOM с одной переменной, в комплекте с обработкой событий. Вот что вышеуказанный код выглядит когда вы открываете в браузере:
Однако реальная мощность для клетки заключается в его способности хранить данные и приложение непосредственно на каждом элементе. Это также легко.
Если вы заинтересованы, вы можете узнать больше на https://www.celljs.org и проверить фактические функциональные примеры в https://play.celljs.org Отказ
Используемые технологии
Весь точка ячейки заключалась в том, что она должна быть атомной единицей, который не зависит от 100%. Таким образом, на самом деле не используется 3-я партийная технология. Это все чистый JavaScript с нулевой внешней библиотекой. Cell опирается на 100% на API браузера и веб-стандарты.
Тем не менее, мы используем 3-я партийные библиотеки для модульных тестов и свита. Они очень важны для ячейки из-за его возникающей природы. Одна небольшая ошибка в коде ячеек клеток может в снежный ком в совершенно неожиданный результат, поэтому нам нужно убедиться, что каждая часть клеточных функций как предназначена.
Для тестирования мы используем Mocha, JSDOM и Sinon.js. Sinon.js был более поздним дополнением, но стал абсолютно необходимым. Он в основном используется, чтобы убедиться, что некоторые изменения состояния автоматически запускают другую функцию, а также для проверки того, что каждая функция называется именно ожидаемым количеством раз. Одна маленькая ошибка может вызвать огромный неожиданный результат. Это возникающее поведение является прочностью библиотеки, но в то же время является наиболее сложной частью, потому что его иногда трудно отлаживать. Вот почему я написал много единичных тестов.
Технические задачи
Клетки написаны в ES5 – это очень важно, потому что в отличие от ES6, ES5 в настоящее время работает во всех браузерах, что означает, что нет необходимости трансировать с помощью Babel. Я очень сильно боролся, чтобы все виды зависимостей из ячейки. Это должно было быть 100% свободной зависимостью, если я хотел избавиться от WebPack, NPM, Babel и т. Д. От картины в целом, и вместо этого позволят пользователям использовать библиотеку, просто включающую одну строку