SwiftUI - это новый Vue.js
По крайней мере, для собственной разработки Apple
В этом году на WWDC Apple анонсировала SwiftUI. Быстро стало очевидно, что это ответ Apple на Flutter, React Native и Electron. Когда я нырял в первый день, я не мог не заметить сходство с Vue.js. При просмотре видеороликов WWDC у меня возникло ощущение, что SwiftUI специально смоделирован таким образом. Вопрос о том, было ли это намеренно, остается только предположением, но похоже, что Apple знает, что делает.
Как это обычно бывает с Apple, существует минимальное указание на то, как создавать архитектуру для нативных приложений. Для тех из вас, кто не знаком с Vue.js, я думаю, что это отличная архитектурная модель для нативного приложения. И, возможно, стоит изучить это для ваших следующих приложений. Этот пост является первым из серии, в которой объясняется сходство между SwiftUI и Vue.js. И мы можем научиться создавать современную нативную архитектуру по пути.
А пока начнем с основ.
Я сделаю простое приложение счетчика для обеих платформ, чтобы проиллюстрировать сходство.
Начнем с примера Vue.js:
Если вы уже знакомы с vue, это довольно тривиально, вы можете перейти к версии SwiftUI.
Для тех из вас, кто не знает Vue.js:
Из строк 1–9 у нас есть шаблон, который представляет собой просто HTML-код с некоторыми привязками. В строке 3 мы привязываем к переменной состояния «counter», в строке 4 мы привязываем кнопку к методу «onAdd», а в строке 5 мы привязываем кнопку к методу «onMinus».
В строках 12–24 у нас есть объявление переменных и методов. В строке 15 мы определяем переменную состояния counter и инициализируем ее значением 0. В строке 17 мы определяем метод onAdd, который изменяет переменную counter, добавляя 1. В строке 21 мы определяем метод onAdd, который изменяет переменную counter путем вычитания 1.
Теперь о версии SwiftUI:
Очень похоже нет?
Строки 6–14 создают тело представления. Строка 5 - это объявление переменной состояния «counter», а строки 16–21 определяют функции, которые изменяют состояние.
Swift автоматически повторно визуализирует элементы в основной части представления в зависимости от изменений состояния.
Vue.js также повторно отображает элементы DOM на основе изменений состояния.
Хотя этот пример довольно тривиален, он помогает нам увидеть мощь и простоту обеих платформ.
Нативная разработка была более требовательной и требовала меньше инструментов. Но теперь переключаться между созданием веб-приложений и нативных приложений стало еще проще.
Нужны еще ресурсы?
Я размещу ссылки на следующие статьи ниже.
Удачного кодирования!
