Build blazing fast apps with web tech
+ 
= Meet Stencil: A new way to build Ionic apps
Mobile developers have been using Ionic to build mobile applications for the web, iOS, and Android for many years - but since the introduction of StencilJS a whole new world of possibilities has opened up.
StencilJS is what is used to build Ionic itself using pure web components, which is a standard built directly into the browser for defining your own custom elements. Before StencilJS, Ionic components required the Angular framework. Now, Ionic's components can be used just about everywhere by utilising the power of the browser instead of a framework.
It goes even further than that. Not only can Stencil be used to easily build web components, it can also be used to build entire applications out of pure web components - no framework required. Being able to build an entire application without a framework sounds cool, but let's consider the actual benefits in a little more depth.
- Simplicity - StencilJS has only a few Stencil specific concepts/patterns to learn, most of what you code is just standard modern JavaScript (TypeScript).
- Less overhead - since your applications just need to include the tiny StencilJS runtime, rather than a full framework, the bundled build sizes of the application can be drastically smaller than alternatives. This is especially powerful if you intend to ship your application as a PWA.
- Reuse and future proofing - A big scary factor in adopting a particular framework is that fear of "backing the right horse", if you are investing a lot of time and effort into a particular framework, you don’t want that work to become redundant. This is less of an issue with StencilJS since it is designed with the intent of being "future-proof". With StencilJS, it is primarily web components that you are building, which are native to the web platform and don’t require a specific framework to run.
- Everything under one roof - StencilJS, Ionic, and Capacitor are all built and maintained by the same people with the intent of being used together. This means interoperability is hardly even a factor to consider.
What about Angular, React, and Vue?
These three are the juggernaughts of JavaScript frameworks on the web, and they can all be used with Ionic. StencilJS falls into a bit of a unique category when compared to traditional frameworks like these.
StencilJS can be used as an alternative to these traditional frameworks - meaning you can build an application entirely with Stencil with no need to include a framework like Angular, React, or Vue - or as a companion to them.
There are primarily two reasons for learning and using StencilJS:
- To use it as the basis for building your entire application in place of a traditional framework like Angular, React, or Vue
- To build reusable web components that work with any framework (or none at all) just like Ionic itself
The web components that you build with StencilJS can be used just about everywhere, just like Ionic can be. This means that you could use what you build with Stencil inside of Angular, React, Vue, or wherever else you like. If you are only interested in building applications and not with reusability, then none of these approaches (Stencil, Angular, React, Vue) are necessarily any better than the other. It just comes down to a decision on what your needs, goals, and preferences are.
What will I learn?
If you keep scrolling down you will see a complete overview of everything this book and its resources will teach you about building Ionic applications with Stencil, but I will give you a quick overview now.
The book begins with a Basics section that teaches all of the important concepts you will need to understand to build applications. This includes concepts like TypeScript, JSX, Environment Configuration, Navigation/Routing, Handling Forms, Events, Storage and more.
Once the basic theory has been covered, the books moves on to a series of example applications. Different packages come with a different number of example applications. These applications vary in difficulty from beginner friendly and basic, to rather advanced and complex.
The final section of the book covers building and distribution. We will walk through everything you need to know to publish your applications as a Progressive Web Application (PWA) on the web, as a native iOS application on the Apple App Store, and as a native Android application on Google Play.
Who is this book for?
This book explains all concepts thoroughly, and should be suitable to anybody from a beginner to advanced level. The only prerequisites are that you have a basic understanding of modern web development. This includes being reasonably comfortable with using modern HTML/CSS/JavaScript and running commands in the terminal to generate/build/run applications. If you are not already familiar with these concepts, but still want to complete this book, you might benefit from finding additional resources to help teach the basics.
Table of Contents
You can view the entire table of contents for the book below. There are different packages available depending on how much you want to learn. What is available in each package is indicated by the Level 1, Level 2, and Level 3 labels.
As well as the theory, the book also contains several example application walkthroughs. You can view more details about these applications below the table of contents.
Section 1: Introduction
| Level 1 Level 2 Level 3 Lesson 1: Welcome |
| Level 1 Level 2 Level 3 Lesson 2: Understanding the Ionic Ecosystem |
| Level 1 Level 2 Level 3 Lesson 3: An Introduction to StencilJS |
| Level 1 Level 2 Level 3 Lesson 4: The Ionic Web Components |
| Level 1 Level 2 Level 3 Lesson 5: Native Builds and Functionality with Capacitor |
Section 2: Basics
| Level 1 Level 2 Level 3 Lesson 1: StencilJS & Ionic Basics |
| Level 1 Level 2 Level 3 Lesson 2: JSX and TypeScript |
| Level 1 Level 2 Level 3 Lesson 3: Environment Configuration |
| Level 1 Level 2 Level 3 Lesson 4: Generating & Understanding StencilJS Projects |
| Level 1 Level 2 Level 3 Lesson 5: Using Async/Await |
| Level 1 Level 2 Level 3 Lesson 6: Decorators and Lifecycle Hooks |
| Level 1 Level 2 Level 3 Lesson 7: Navigation and Routing |
| Level 1 Level 2 Level 3 Lesson 8: Services and Helpers |
| Level 1 Level 2 Level 3 Lesson 9: Fetching Data with HTTP Requests |
| Level 1 Level 2 Level 3 Lesson 10: Data Storage |
| Level 1 Level 2 Level 3 Lesson 11: User Actions and Events |
| Level 1 Level 2 Level 3 Lesson 12: Handling Forms & User Input Preview! |
| Level 1 Level 2 Level 3 Lesson 13: Styling & Shadow DOM |
| Level 1 Level 2 Level 3 Lesson 14: Using External Libraries |
Section 3: Weather App
| Level 1 Level 2 Level 3 Lesson 1: Introduction & Requirements |
| Level 1 Level 2 Level 3 Lesson 2: Getting Ready |
| Level 1 Level 2 Level 3 Lesson 3: Creating the User Interface |
| Level 1 Level 2 Level 3 Lesson 4: Implementing Geolocation & Saving Data |
| Level 1 Level 2 Level 3 Lesson 5: Handling User Input & Settings |
| Level 1 Level 2 Level 3 Lesson 6: Integrating the Weather API |
| Level 1 Level 2 Level 3 Lesson 7: Improving User Experience and Styling |
| Level 1 Level 2 Level 3 Lesson 8: Conclusion |
Section 4: Building Reuseable Web Components
| Level 2 Level 3 Lesson 1: Why Build Reusable Web Components? |
| Level 2 Level 3 Lesson 2: Creating a Collection of Web Components |
| Level 2 Level 3 Lesson 3: Publishing and Using a Collection of Web Components |
Section 5: Live Chat App (with Firebase/Firestore)
| Level 2 Level 3 Lesson 1: Introduction & Requirements |
| Level 2 Level 3 Lesson 2: An Introduction to Firebase and NoSQL |
| Level 2 Level 3 Lesson 3: Getting Ready |
| Level 2 Level 3 Lesson 4: Setting up Firebase |
| Level 2 Level 3 Lesson 5: Implementing the User Interface |
| Level 2 Level 3 Lesson 6: Adding Authentication |
| Level 2 Level 3 Lesson 7: Protecting Routes |
| Level 2 Level 3 Lesson 8: Creating and Reading Data with Firestore |
| Level 2 Level 3 Lesson 9: Implementing Firestore Security Rules |
| Level 2 Level 3 Lesson 10: Improving Styling |
| Level 2 Level 3 Lesson 11: Conclusion |
Section 6: Advanced State Management
| Level 3 Lesson 1: What is State Management? |
| Level 3 Lesson 2: Stencil State Tunnel |
| Level 3 Lesson 3: An Introduction to Redux |
Section 7: eCommerce Store App (with Redux)
| Level 3 Lesson 1: Introduction & Requirements |
| Level 3 Lesson 2: Getting Ready |
| Level 3 Lesson 3: Implementing the User Interface |
| Level 3 Lesson 4: Integrating Redux |
| Level 3 Lesson 5: Loading Products |
| Level 3 Lesson 6: Implementing Searching and Filtering |
| Level 3 Lesson 7: Creating a Shopping Cart |
| Level 3 Lesson 8: Persisting State |
| Level 3 Lesson 9: Styling and User Experience |
| Level 3 Lesson 10: Conclusion |
Section 8: Testing & Debugging
| Level 1 Level 2 Level 3 Lesson 1: Testing & Debugging |
Section 9: Building & Submitting
| Level 1 Level 2 Level 3 Lesson 1: Preparing Assets |
| Level 1 Level 2 Level 3 Lesson 2: Building for iOS and Distributing to the Apple App Store |
| Level 1 Level 2 Level 3 Lesson 3: Building for Android and Distributing to Google Play |
| Level 1 Level 2 Level 3 Lesson 4: Creating iOS Certificates on Windows |
| Level 1 Level 2 Level 3 Lesson 5: Publishing as a PWA (Progressive Web Application) with Netlify |
Section 9: Congrats!
| Level 1 Level 2 Level 3 Lesson 1: Conclusion |
“ I wanted to reach out to you and say thank you so much for putting this book together, as well as all of your videos on YouTube. I'm a single founder of an ed-tech startup, and while a software developer for 17 years, Ionic/Angular/Cordova was new to me. I honestly feel as though I have expert insight that I can tap into as I push forward to getting my app successfully deployed. Based on what I already knew, and coupled with your book, I'm now prepared and motivated to move forward. ”
Vea Glenn, Founder, Insightful Decisions
