JSX

Я тут вечерком сидел, воевал с HTML в Aurelia и вспомнил наш разговор про framework-и, что у нас большое банковское приложение, которое надо будет долго и аккуратно поддерживать. С этим нам конечно же поможет типизация, мол переименовал свойство в одном месте, и оно поменялось везде. Поддержка TypeScript-а есть в обоих библиотеках, позволю себе заметить в React-е она неизбежно лучше, но это другая история.

Возвращаясь к проблеме моей насущной. Предположим у меня в Aurelia есть строка в HTML-е:

<input value.bind="process.name">

В данном случае, когда я пишу текст в кавычках, мой редактор ничего не знает о process, то есть после точки я могу написать все что угодно и все будут довольны, даже Aurelia в runtime-е не упадет, потому что undefined вполне себе значение. Если бы мы использовали TypeScript в Aurelia, ничего бы не поменялось, даже более того, переименовывая name мы все еще не могли бы быть уверенными, что он везде корректно переименован используя F2 и все равно использовали бы поиск.

Как же обстоят дела в других framework-ах/библиотеках.
К сожалению, в Angular подход тот же. Мы конечно используем обратную кавычку и можем писать template в том же файле, дабы искать потом было легче, но преимущества не получаем:

<input [(ngModel)]="process.name">

Редактор до сих пор не знает, что такое name. Есть расширения наверно, а может даже и WebStorm-ы, которые пытаются быть умными, но мы то знаем, что это просто строка, которая потом будет испытывать на себе eval, а то и что-нибудь похуже.

Я уже не говорю про банан в коробке и то как надо все еще думать, что process это свойство view model-и/компонента, и framework это все магическим образом превратит в то что нужно.

В React-е нет HTML-я, там все JS, пардон, TS. То есть, когда мы пишем:

<input value={this.process.name}/>

мы все еще пишем JS, редактор знает, что такое process, и так как мы используем TS с интерфейсом IProcess, например, наш name в безопасности, мы не можем написать туда не существующее свойство, мы можем его спокойно переименовывать, ну и где оно используется мы тоже можем найти моментально.

Как-то так. Если мы говорим о больших проектах, то у React-а тут плюс.

Stay tuned. To be continued…