Эта статья устарела, проверьте новую (с новым репозиторием) для Angular5 + Ionic3.
В связи с тем, что в настоящее время проходит Саммит Google Progressive Web Apps 2016, бурно ведутся споры о будущем мобильных приложений нативные или веб-приложения (Кэмерон Молл недавно опубликовал отличную статью об этом).
ВЕБ-МОБИЛЬНЫЕ ПРИЛОЖЕНИЯ
С одной стороны, Google упорно продвигает концепцию прогрессивных веб-приложений с помощью платформы Angular и делает ставку на упадок модели AppStore и разработки собственных приложений.
В видении Google есть много веских аргументов, но в настоящее время это будущее только Android (и 65% наших мобильных пользователей используют iOS).
НАТУРАЛЬНЫЕ МОБИЛЬНЫЕ ПРИЛОЖЕНИЯ
С другой стороны, Apple по-прежнему очень довольна успехом своего многомиллиардного бизнеса AppStore и по-прежнему делает ставку на лучшую в своем классе среду разработки собственных приложений.
Apple права: при правильном исполнении нативные приложения могут предложить идеальный пользовательский интерфейс, но это довольно дорогой подход.
Для такого стартапа, как мы, мы не можем позволить себе иметь собственную команду разработчиков для Android, команду разработчиков для iOS, команду веб-разработчиков и три разные базы кода, конвейеры тестирования и сборки. И оставайся стройным…
ГИБРИДНЫЕ МОБИЛЬНЫЕ ПРИЛОЖЕНИЯ
Несколько лет назад мы применили подход к гибридным мобильным приложениям с AngularJS и Ionic, который предлагает почти нативный опыт работы с веб-технологиями, и мы до сих пор очень довольны этим выбором.
Если однажды Apple решит присоединиться к этой группе и будет поддерживать прогрессивные веб-приложения, наше приложение будет готово к этому благодаря Angular и Ionic (вот хорошее вступление в блоге Ionic).
Наше текущее мобильное приложение отлично справляется со своей задачей, и у нас есть единый технический стек переднего плана и единая команда разработчиков полного стека для мобильных устройств и Интернета.
БУДУЩЕЕ: ANGULAR2 + IONIC2
С Angular2 (rc2) и Ionic2 (beta9) не за горами, мы в настоящее время экспериментируем и строим будущую основу нашего интерфейса, технического стека и архитектуры.
Наша текущая организация базы кода AngularJS и Ionic не является оптимальной из-за большого количества дублированного кода и логики между веб-репозиториями и мобильными репозиториями.
Чтобы проверить наш подход, мы создали прототипы со следующими целями:
- инкапсулировать всю бизнес-логику (на основе @ ngrx / store) в основной модуль и
- сохраняйте определенный макет представления, разметку и логику навигации в проектах мобильных и веб-приложений.
Примечание: @ ngrx / store - это управление состоянием на основе RxJS, вдохновленное Redux для приложений Angular 2. В настоящее время это самый популярный способ структурировать сложную бизнес-логику в приложениях Angular2.
ДОКАЗАТЕЛЬСТВО КОНЦЕПЦИИ
Вот репо нашей первоначальной проверки концепции, недавно обновленной до последних библиотек:
Http://github.com/benorama/ngrx-demo-apps
Репо разделено на три отдельных проекта npm Typescript:
- ngrx-demo-core, общий пакет с логикой состояния, редукторов и действий на основе @ ngrx / store (версия 2.2.1)
- ngrx-demo-web, веб-приложение, основанное на Angular (версия 2.0.2), управляемое Angular CLI
- ngrx-demo-mobile - мобильное приложение на базе Ionic (версия 2.0.0-rc0), управляемое Ionic CLI.
Для демонстрации мы используем пример кода счетчика (действия и редукторы) из @ ngrx / store.
ngrx-demo-core предоставляет:
- CounterState интерфейс, модель состояния счетчика
- Редуктор counterReducer, управление состоянием счетчика на основе отправленных действий,
- Действия счетчика увеличения, уменьшения и сброса
В мобильном или веб-приложении мы используем эти активы для построения модели состояния приложения.
import { CounterState } from ‘ngrx-demo-core’;
export interface AppState {
counter: CounterState,
// Add other states here
}
И предоставляйте действия, службы и редукторы во время начальной загрузки приложения.
import { CounterActions, counterReducer } from ‘ngrx-demo-core’;
let reducers = compose(combineReducers)({
counterState: counterReducer,
// Add other state+reducers here
});
@NgModule({
bootstrap: [
AppComponent
],
declarations: [
AppComponent
],
imports: [
BrowserModule,
StoreModule.provideStore(reducer)
]
})
export class AppModule { }
Теперь мы можем использовать эти активы в любом компоненте представления приложения.
// HTML component template
<h2>
{{counter$ | async}}
</h2>
<p>
<button (click)=”increment()”> +1 </button>
<button (click)=”decrement()”> -1 </button>
</p>
<p>
<button (click)=”reset()”> Reset </button>
</p>
С соответствующим компонентом:
// Typescript component @Component({ templateUrl: 'some.component.html' }) export class SomeComponent { counter$: Observable<number>; constructor(private store: Store<AppState>) { this.counter$ = this.store.select(s => s.counter.total); } decrement() { this.store.dispatch(new DecrementAction()); } increment() { this.store.dispatch(new IncrementAction()); } reset() { this.store.dispatch(new ResetAction()); } }
Вся бизнес-логика полностью инкапсулирована в общий модуль. Например, мы могли бы добавить в микс @ ngrx / effects, чтобы обрабатывать асинхронные вызовы API.
Представление «знает» только о доступных действиях для отправки и модели состояния, на которую оно может подписаться.
Общий модуль Typescript можно повторно использовать в любом типе приложения Angular2:
- сеть
- мобильный (Ionic2)
- настольный (Электрон)
Миссия выполнена!
Примечание: мы нанимаем! Вы обалденный fullstack или front-end разработчик, который хочет работать с Angular 2, Java или Groovy? Вы должны связаться со мной, чтобы присоединиться к команде нашей мечты в Париже!
Если вам понравилась эта статья, нажмите кнопку ❤, чтобы порекомендовать ее. Это поможет другим пользователям Medium это обнаружить.
