Ionic 4, Stencil question!

Ionic Framework
1

Hello!

I have recently discovered ionic framework! I tried ionic pwa toolkit and it is super smooth to mess with. But there is no concrete source of information on the following:

-will I be able to use ionic framework to develop x-platform apps with stencil as a replacement for angular?
-will I be able to preview with ionic devapp?
-will there be a ionic cli tool for generating components for stencil?
-can it be done now, manually. To change the import to stencil/core and then use stencil!

There are so many changes, none of the tutorials really make sense after couple of months. I really don’t want to waste time learning angular.

And yes this question has been asked before but since there is no real answer I thought it will not hurt to post another.

thank you
leon

2

I don’t pretend knowing things about Stencil and Ionic 4 in and out but here are my answers

Ionic core (set of web components) can be used with any framework (like angular, vue, react). Stencil is not a framework, it’s a Compiler for Web Components and PWAs (Quoting the github repo). You use it to build component that can then be used in your application with another framework or with no framework.

If you are using the ionic-cli to create and run your project then yes, I believe (ionic serve -c)

Stencil has it’s own cli

Up to you, you can choose a different framework than Angular with ionic 4 but most people here are using it at the moment (depends on your experience with other frameworks).

I’d also suggest looking at the ionic 4 documentation for more details

Hope that helps

3

Hey! Thank you for your fast response!

Some of my questions were not clear enough, I do apologize.

I get what stencil is and while it is not a framework, it is a way to organize your code in components. The way things are organized inside a stencil project, and how you code, makes 100x more sense to me (a complete newbie), than any of the frameworks I have tried. Also the ability to use all the knowledge from web coding is usefull since there are 100x more tutorials on that.

So recently I tried:

-using stencil app starter and while fun, it does not build for me even when only cloning from github. That made me worried:)
-so i tried ionic-pwa-toolkit which did build and I made a working example pwa test and learn from
-so now I discovered ionic dashboard and followed the instructions and boy does creating a project with that look and feel super slick. And the android app DEVAPP, lets me test it all in seconds…

The only problem is… the project type generated is angular (somewhere it was written this is only temp). The styling is in scss while I want to use css, and the project has a different structure.

I would like to know if that last workflow, so generating components using ionic create component and using dev app for testing and so forth… is planned or am I waiting on something that is not planned.

I have read much of the documentation but I am still missing a big part of the picture.

My ideal workflow would be.

-create a project with ionicdashboard friendlines
-use ionic CLI to generate new content and code logic in typescript
-use CSS for styling
-use devapp to test

It is a handfull yes but one can dream:)

Also I get ionic 4, stencil and capacitator are all in beta and i could swear I saw a info page that said most of this would be possible but since I tried 3 things and would like the best possible mix of these, I came here for some sort of confirmation.

All in all, I will keep using ionic, if not for native apps, then 100% for PWA dev, but its nice to have options!

And thank you for your effort before and in advance.

Leon

4

You had me look in the repos again because I’m not sure of anything now :slight_smile: (that’s a good thing).

From an architecture standpoint you have:
@ionic/angular uses @ionic/core uses @stencil/core

You can decide not to use @ionic/angular and directly use @ionic/core to have ionic component without angular and that’s what the ionic-pwa-toolkit is based on.

I still believe you can do everything with one code base:

  • PWA
  • Ionic components (look and feel)
  • Your framework of choice
  • App on the stores with capacitor

But right now I don’t think you can get around not using angular if you want to use the ionic-cli (high hopes for the future :slight_smile:)

I think ionic-cli is the way to go in your case if your want the ease of use to develop your app.

You can write CSS in a SASS file and it will work although it’s like having a 2000€ gaming pc and using it to play minesweeper :wink:

1 Like