The Future of the Ionic CLI

Ionic Framework ionic-v3
1

The Ionic CLI should be your go to tool for building and maintaining Ionic applications.

It should provide:

A standardised project structure; code scaffolding; aliases; environment specific configuration; themes; logging; unit and e2e testing; and baked in best practices that have been discovered by the community over time.

Schematics

One of the major projects that the Angular team delivered in the last few months is Schematics.

To quote Schematics README.md:

Schematics are generators that transform an existing file system. It can create files, refactor existing files, or move files around.

See: https://robferguson.org/blog/2017/12/31/the-future-of-the-ionic-cli/

2 Likes
2

Very interesting. I’ll be able to take a closer look over the next couple of days. Is this your work?

3

-> Is this your work?

@jaydz Yes, Robinyo is my Brazilian soccer name :slight_smile:

4

Getting Started with @ionic-angular/schematics

Goals

    ├── <PROJECT_ROOT>
        └── /src
            └── /app                                  -  App Module
                ├── app.component.ts
                ├── app.html
                ├── app.module.ts
                ├── app.scss
                ├── main.ts
                └── /core                             - Core Feature Module (e.g., Singleton Services/Providers)
                    ├── core.module.ts                       
                    └── /logger
                        ├── console-logger.service.ts
                        ├── logger.service.ts                               
                └── /pages                            - Page (Component) Modules
                    └── /home
                        ├── home.page.html
                        ├── home.page.module.ts 
                        ├── home.page.scss   
                        ├── home.page.spec.ts
                        ├── home.page.ts                                                                                                               
                └── /shared                           - Shared Feature Module (shared Components, Directives and Pipes)
            └── /assets
            └── /theme
                ├── variables.scss     
            ├── index.html
            ├── manifest.json
            ├── service-worker.js
        └── /resources
        └── /www
            └── /assets
            └── /build   
            ├── index.html
            ├── manifest.json
            ├── service-worker.js
        ├── .editorconfig
        ├── .gitignore
        ├── config.xml
        ├── ionic.config.json      
        ├── package.json
        ├── tsconfig.json
        ├── tslint.json

Note: See this post re Shared Feature Module (Shared Common Modules) v Encapsulated Modules.

Generating a new Ionic Project

See: https://github.com/Robinyo/ionic-angular-schematics#generating-and-serving-an-ionic-project

Generating Components

See: https://github.com/Robinyo/ionic-angular-schematics#generating-components

5

Your diagram as posted is ideal for an app with a small number of pages, like the Facebook or Instagram app. (They aren’t Ionic, but are good examples of well-programmed successful apps on few pages.) But for an app with many pages that could double as a PWA (like the Amazon app), it isn’t a good fit, and I’ve been struggling with that myself.

The standard Angular recipe in that case is to organize content by feature modules. The problem is that Angular’s routing fits well with feature modules, whereas Ionic’s routing-by-page does not. What I’ve ended up doing is splitting some features into ModuleWithProviders (a real thing) and “view” Modules (my own thing). Those modules both appear inside folders of the appropriate feature. I load the provider modules eagerly, and lazy load the view modules.

So it’s a specialization of the Angular features structure. Folders are organized by feature, and inside the features folder there are two types of features modules: providers and views.

6

@AaronSterling

I’ve just started using working with Schematics, open to suggestions (and pull requests) re any of the goals: https://github.com/Robinyo/ionic-angular-schematics

Have you seen these posts:

7

The asymmetry is that in Angular you lazy load modules. In Ionic you lazy load pages, and the modules follow. The suggestion in your first link is for a small app. The suggestions in your second link run afoul of the lazy loading asymmetry.

8

@AaronSterling

Another interesting post: https://chariotsolutions.com/blog/post/angular-modules-barrels-and-aot/