Если вы пытаетесь создать веб-интерфейс в 2019 году, JavaScript - бесспорный король. Как сказал друг, «если вы думаете, что можете создать достойное веб-приложение без JavaScript, вам нужно подумать немного усерднее».
Но что делать, если по какой-то причине вам не нравится писать JavaScript? (Я должен предупредить об этом, сказав, что * многим * людям это нравится. Если вы один из них - добро пожаловать, я имею в виду, что вы не проявляете неуважения). Но, возможно, вас смущают инструменты (webpack, babel, grunt, create-react-app…), или вас не устраивает разрастание зависимостей в node_modules, или у вас возникли проблемы с рассуждением о Object.prototype , или вообще не доверяете приведению типов (1 + «1» = «11»), или чувствуете, что постоянно ищите ошибки в Stack Overflow. И, возможно, вы также хотите отловить больше ошибок с помощью проверки статического типа и компилятора, но обнаружите, что TypeScript только усугубляет проблему с инструментарием.
Могут ли ваши отношения с JavaScript в Интернете стать похожими на отношения с машинным кодом повсюду: вы знаете, что он всегда будет там, но вам не придется дурачиться с ним самостоятельно, если вы не хотите?
Я думаю, что с Dart v2 ответ изменился с определенно нет на может быть. Dart - это язык со статической типизацией, который активно поддерживается Google и предназначен для разработки пользовательских интерфейсов. Вероятно, наиболее известен как язык Flutter, фреймворка для кроссплатформенной разработки мобильных приложений. Но он также усиливает поддержку Интернета. На официальной странице Dart есть серия руководств по низкоуровневому веб-программированию, демонстрирующая встроенный пакет dart: html, которая послужила источником вдохновения для этого проекта.
Но предположим, что вы хотите поэкспериментировать с созданием веб-приложения на Dart. Вы, вероятно, ожидаете эффективных методов реагирования. Такие вещи, как компоненты и прослушиватели состояний и событий, которые повторно отображают определенные элементы без обновления всей страницы. В конце концов, есть причина, по которой React и Vue.js являются двумя из самых важных проектов с открытым исходным кодом за последнее десятилетие. Вы можете попробовать AngularDart или over_react, но предположим, что вы не хотите брать на себя весь фреймворк и предпочитаете работать ближе к чистому Dart.
Если это ваша ситуация, вы можете попробовать повторно активировать.
Философия reactify состоит в том, чтобы предоставить веб-разработчикам типизированный, протестированный и крошечный пакет (не фреймворка) для создания пользовательского интерфейса из реактивных компонентов. Напишите код в Dart, перенесите его в JavaScript с помощью встроенных инструментов (либо dart2js, либо webdev serve), а затем используйте его в HTML, как вы ожидаете.
Reactify в действии
Reactify предоставляет только два класса: UserInterface и Component. Корневые компоненты организованы в список внутри UserInterface и могут содержать собственные подкомпоненты.
Вот простой пример.
index.html
<!DOCTYPE html>
<head>
<script type="text/javascript" defer src="main.dart.js"></script></head>
<body>
<div id="root"></div>
</body>
---
main.dart
import 'dart:html';
import 'package:reactify/reactify.dart' as reactify;
void main() {
document.getElementById('root').replaceWith(
ExampleUI.initialize()
);
}
final ExampleUI = reactify.UserInterface(
components: [ExampleComponent]
);
final ExampleComponent = reactify.Component(
id: 'sample'
template: (self) => DivElement()..text = self.getState('static'),
state: {'static': 'This is a sample Component'}
);
Ваш html теперь отображается как:
<div> This is a sample Component </div>
Используя те же принципы, вы можете легко создать приложение с глобальным состоянием, одним или несколькими корневыми компонентами, вычисленным состоянием, обработчиками, несколькими подкомпонентами, скрытыми элементами, условной логикой и стилем CSS.
"Поймай меня, если сможешь!" это игра с поиском чисел, написанная с помощью 0 строк JavaScript. Поскольку он транслируется в JavaScript, он может работать в любом веб-браузере.
Разбивка игры:
Если вы хотите углубиться дальше, посмотрите исходный код. Это открытый исходный код, поэтому добавление кода приветствуется.
Заключение
Я понимаю, что идея типизированного реактивного веб-интерфейса, написанного на чистом Dart без фреймворка, покажется вам ужасной и бессмысленной, поскольку TypeScript и React уже существуют. Вы, вероятно, относитесь к большинству веб-разработчиков, и я хочу сказать, что вы не проявляете неуважения. В противном случае, пожалуйста, дайте повторную активацию и дайте мне знать, как это происходит!
📝 Прочтите этот рассказ позже в Журнале.
👩💻 Просыпайтесь каждое воскресное утро и слушайте самые интересные истории из области технологий, ожидающие вас в вашем почтовом ящике. Прочтите информационный бюллетень« Примечательно в технологиях .
