Goal

I want to develop an e-learning platform and make it available as

  • Progressive Web App (PWA) for its discoverability and that its available on the web, I also foresee that it might become an alternative to native apps.
  • iOS/Android App for platforms' user

I don't want to develop the platform twice, therefore, I need to go with component based framework such as React or Angular.

Tech Stack

I could reuse components between PWA and Hybrid App (iOS/Android) by means of React Native or Ionic respectively.

For the back-end I intend to use Firebase and since it has very good integration through angularfire2 with Angular 4 it made the choice obvious.

You could ask why wouldn't you just develop an Ionic App and use it as a website as well? There are some serious limitations that come with Ionic such as accessibility issues (keep in mind that it is intended to be an app after all), doesn't work well with Angular Universal (I really want that better perceived performance, optimisation for search engines, and site preview e.g. on Facebook to work as expected.

Then, it follows that I should use Ionic. Summing up I chose my tech stack to be:

  • Angular 4
  • Ionic 3
  • Angularfire 2
  • Firebase
  • Angular 2 Universal

Structure

    app
    /pwa // progressive web app here
      /src
        /components
        // ...
      //...

    /ha // hybrid app i.e. iOS and Android app here
      /components // refers to ../pwa/src/components
    .git // common repository for PWA and HA.

This way I can focus on developing the components once for PWA and then wrap them around with ion-content etc. for Ionic.

Components

I need some basic components such as header, aside and footer and foresee that index.html will looks as follows:

    <app-header></app-header>
  <router-outlet></router-outlet> // outlets predefined component for specific path
  <app-aside></app-aside>
  <app-footer></app-footer>

Routes with corresponding outlet component.

URL Outlet Component
./ Main
./exam Exam
./exam/:year/:level ExamSheet
./exam/:year/:level/edit EditableExamSheet
./exam/:unit/:level ExamSheet
./exam/:unit/:level/edit EditableExamSheet
./:unit Unit
./:unit/edit EditableUnit
./:unit/:lesson Lesson
./:unit/:lesson/edit EditableLesson

This way I have fully outlined the structure of the application and decided on my tech stack.


974 0 14