Creating Ionic Applications with StencilJS
  • PDF, EPUB & MOBI
  • Beginner to Advanced Theory
  • 3 Practical Example Applications
  • Builds for iOS, Android, PWA
  • All Source Code Included
  • BONUS: 1h 45m Video Course
  • Updates always free

StencilJS takes the best concepts from popular frontend frameworks, but instead generates standards-based Web Components that run in any modern browser and in any frontend framework.

- stenciljs.com

As well as being a powerful tool for generating reuseable web components, StencilJS also provides the tools needed to build an entire application out of web components.

Combined with the Ionic web components (which are built with StencilJS), StencilJS gives us everything we need to build high-quality production mobile applications.

Throw Capacitor into the mix, and we can easily create native builds for our web based application for iOS and Android - all from a single codebase.

Jump straight to the packages

or continue reading below for more information.

Build blazing fast apps with web tech

Weather Application built with Ionic and Stencil
Firestore Chat Application built with Ionic and Stencil
eCommerce Store Application build with Ionic and Stencil
Ionic Logo + Stencil Logo =

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.

  1. Simplicity - StencilJS has only a few Stencil specific concepts/patterns to learn, most of what you code is just standard modern JavaScript (TypeScript).
  2. 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.
  3. 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.
  4. 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.
Angular LogoReact LogoVue Logo

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:

  1. To use it as the basis for building your entire application in place of a traditional framework like Angular, React, or Vue
  2. 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
Vea Glenn's testimonial for my previous book: Building Mobile Apps with Ionic & AngularVea Glenn

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

The Example Applications

Level 1 Level 2 Level 3

Weather App

The first example application in the book is a weather application. The basic idea is that it will allow the user to see live weather data for their current location, or a location of their choosing.

This serves as a fantastic first project to tackle because it is simple enough to not be too overwhelming, but it also gives a chance to utilise a broad range of the theory that we will have learned in the Basics chapter.

It is also perhaps a little more interesting than the traditional "todo" style application that is often used (by me quite often as well) as an initial example.

Key concepts:

  • Creating a basic user interface
  • Retrieving location data using the Geolocation API from Capacitor
  • Creating singleton services
  • Routing/Navigation
  • Using a utility/helper function
  • Dealing with user input and forms
  • Saving data in storage, and loading data from storage
  • Dealing with asynchronous methods using async/await
  • Creating custom types
  • Integrating with a real third-party API (we will use a free API to grab weather data)
  • Processing data
  • Styling an application
Weather Application built with Ionic and Stencil
Weather Application built with Ionic and Stencil
Live Chat Application built with Ionic and Stencil
Live Chat Application built with Ionic and Stencil
Level 2 Level 3

Live Chat

The second example application is an intermediate level Live Chat application that uses Firebase and a Firestore database.

The application will allow users to chat anonymously with other users of the application, and any new messages that are added will be updated live for anybody who is in the chat room.

We also take a bit of a different approach in this application as we will be utilising a standalone reusable web component we will have created in the previous chapter to display our chat messages (with cool slide-in animations).

Key concepts:

  • Creating a backend
  • Integrating Firebase
  • Handling authentication
  • Using your own standalone web components
  • Dealing with live data
  • Using a Firestore Database
  • Security
  • Creating a login flow
  • Restricting access to pages
  • Building and using animations
Level 3

Storefront

The last example application is an advanced level eCommerce application that uses Redux for state management.

We will be building a storefront application that allows users to browse through a range of products, and add products to a persistent shopping cart.

Advanced state management concepts will be used to help facilitate graceful data loading with error detection/handling built in, persisting data, and enabling searching and filtering.

This is a complex application with a large number of components and a heavy focus on design, usability, and maintainability/scalability.

Key concepts:

  • Complex state management
  • Integrating Redux
  • Dispatching Events
  • Creating actions and reducers
  • User experience
  • Data Loading
  • Searching and Filtering
  • Routing
  • Using advanced Stencil decorators
  • Error handling
  • State persistence
  • Advanced Styling
eCommerce Shop Application built with Ionic and Stencil
eCommerce Shop Application built with Ionic and Stencil
Baadier Sydow's testimonial for my previous book: Building Mobile Apps with Ionic & AngularBaadier Sydow

You've really delivered a lot of value for the price and to be honest, I can't say that about all the authors I've supported in the past. I'd like to wholeheartedly thank you. The book has been an invaluable resource while working on our current project. The reading on my Kindle has been a real blessing because I can literally read about Ionic in bed :)

Baadier Sydow, Founder, Sem Zoom

The Video Course

The EXPERT package of Creating Ionic Applications with StencilJS also comes with an additional 1h 45m video course. The video course is intended to give you a brief overview of the most important Ionic and StencilJS features and concepts as we build a simple Todo application.

You can watch the following lesson for free to see what the video course is like:

Sebastián Ferreras' testimonial for my previous book: Building Mobile Apps with Ionic & AngularSebastián Ferreras

Just wanted to say thank you - I started learning Ionic (and Angular) almost a year ago with your book, and I've learned everything I needed not only for developing several mobile apps, but also to become one of the top Ionic users on StackOverflow. Your book really helped me to learn the core concepts, and then go a step forward understanding what every piece of code does, and how.

Sebastián Ferreras - Information Software Engineer

The Packages

Creating Ionic Applications with StencilJS

All prices are in USD. Taxes may apply to some customers depending on their location.

BASIC PACKAGE
Creating Ionic Applications with StencilJS - Basic
  • All Level 1 Content
  • eBook in PDF Format (Basic Version ~378 pages)
  • eBook in EPUB & MOBI formats (Basic Versions)
  • Weather Application Source Code
  • BUY NOW $39 (excl. tax)
PREMIUM PACKAGE
Creating Ionic Applications with StencilJS - Premium
  • All Level 1 & Level 2 Content
  • eBook in PDF Format (Premium Version ~499 pages)
  • eBook in EPUB & MOBI formats (Premium Versions)
  • Weather Application Source Code
  • Live Chat Application Source Code
  • BUY NOW $79 (excl. tax)
EXPERT PACKAGE
Creating Ionic Applications with StencilJS - Expert
  • All Level 1, Level 2 & Level 3 Content
  • eBook in PDF Format (Expert Version ~658 pages)
  • eBook in EPUB & MOBI formats (Expert Versions)
  • Weather Application Source Code
  • Live Chat Application Source Code
  • Storefront Application Source Code
  • 1h 45m Video Course
  • Todo Application Source Code
  • BUY NOW $129 (excl. tax)

Frequently Asked Questions

What do I get when I purchase the book?

Once you have purchased the package you want, you will receive a downloadable package that will contain all of the content for the book. The downloadable package will give you access to all of the content for your package, including all of the source code for the applications in your package. This will be available instantly after you make the purchase.

Can I use the example applications to build my own apps?

Yes, you may use the source code provided as you please (even commercially), however I ask that you do not submit an exact copy to app stores (we will walk through all of the steps for submitting an application, just don't hit that final submit button if you're using the example we have built).

Keep in mind that these examples are provided primarily for educational purposes, and no guarantees are provided for their functionality.

Will I need to pay for updates?

No - I typically update all of my Ionic books and courses for new major versions, and sometimes updates are also provided between major versions if necessary. Any updates to the package you have bought will always be free.

What version of Ionic/StencilJS was this created for?

The current version of the book has been written for Ionic 4.x and StencilJS 1.x.

What if I don't like the book?

If you feel like the book was not worth your money, then I will gladly refund you the full price. Simply reply to your purchase receipt email requesting a refund within 14 days.

Still have a question?

Feel free to contact me at me@joshmorony.com and I'd be happy to answer any questions you have about the book.

Back to packages
Start building Ionic apps with StencilJS: BUY NOW