8

I wonder if Stencil JS will be adopted as an option for developing mobile apps in Ionic.

Let me explane what I mean by "an option for developing". In other frameworks like NativeScript, you can choose to start a new project with Angular + Typescript or Javascript. Furthermore, other "options" exist (for example VueJS for NativeScript)

StencilJS is an interesting alternative to existing javascript frameworks like Angular, and it would be great to build Ionic apps with it.

Now, because the StencilJS framework was created by the Ionic framework team, I wonder if one day it will be available to all Ionic developers as an alternative to Angular.

David
  • 7,387
  • 3
  • 22
  • 39
F.Ricceri
  • 333
  • 1
  • 9
  • What did you mean by `development option in Ionic`? ` – Sampath Oct 20 '17 at 11:00
  • I mean an alternative to Angular as application framework. For instance, in NativeScript you can choose between Native Script + Angular or Native Script + Javascript (and if I'm not wrong, a VueJS for Nativescript exists). – F.Ricceri Oct 20 '17 at 12:38

3 Answers3

3

Update 24-01-2018:

Another great article from Josh: An Introduction to Stencil

Yes, you can.

Stencil is a compiler that generates Web Components (more specifically, Custom Elements). Stencil combines the best concepts of the most popular frameworks into a simple build-time tool.

Since Stencil generates standards-compliant web components, they can work with many popular frameworks right out of the box, and can be used without a framework because they are just web components. Stencil also enables a number of key capabilities on top of Web Components, in particular Server Side Rendering (SSR) without the need to run a headless browser, pre-rendering, and objects-as-properties (instead of just strings).

You can read more about it here

Here you can see how to do it with Vue.js

Sampath
  • 63,341
  • 64
  • 307
  • 441
  • Yes the documentation says "they can work with many popular frameworks.." but I didn't find any specific information about how to do this in Ionic – F.Ricceri Oct 20 '17 at 13:01
  • Please see the 2nd link in my post. It is with `Vue.js`. – Sampath Oct 20 '17 at 13:02
  • thanks for the link, but I mean using only StencilJS without VueJS or Angular – F.Ricceri Oct 20 '17 at 13:04
  • You're wrong here. `StencilJS` is just a `compiler`. Not a framework. It generates standards-compliant web components. After that, you can use those components with any framework you like or without a framework at all. – Sampath Oct 20 '17 at 13:07
  • You missed the point here. Because with StencilJS you can write a fully working web applications, it means that you can use it to build a mobile application. Using a framework is not the only option. Years ago we were building Phonegap applications with JQuery and HTML. So it's perfectly reasonable to have a mobile app with Stencil. (and... even Angular uses a compiler) – F.Ricceri Oct 20 '17 at 13:13
  • Where did you see that? **It is a compiler**. Do you know any compiler where you can use for developing web apps? – Sampath Oct 20 '17 at 13:19
  • This will be my last response, we are going off topic. Again, you don't need a framework to build a web app. Because StencilJS produces web components that can work inside a web page, and those components have both an UI and a logic, and you can use Typescript to build external logic and libraries, now you can build a web app. – F.Ricceri Oct 20 '17 at 13:31
  • Yes, That is what it says here too on the doc no? `they can work with many popular frameworks right out of the box, and can be used without a framework because they are just web components`. But without a framework means you're going to reinvent the wheel :) – Sampath Oct 20 '17 at 13:47
1

Yes! As @Sampath already mentioned Stencil itself is just a compiler for building WebComponents. But I think what you are asking is if the ionic components will be available for development without Angular. The ionic team is currently working on porting all of their UI elements to WebComponents using Stencil to make this process easier.

After the porting process is finished ionic-angular will still be available like it is now but there will also be something new which is called ionic-core (or just core) which contains all of ionics UI elements as standard conform web components. You can use these components wherever you want: In a React application, in a Vue application or without any framework in vanilla JS.

I don't know this for sure because I did not read anything about that exact topic up to now but I'm pretty sure that you will have options in the ionic CLI for creating different projects based on the core library.

Stencil itself will stay as it is - a tool for creating WebComponents. Of course you can use Stencil to build your entire application, meaning every component you use is built with stencil.

You can follow the progress of the core library on github at the core branch of the repo. As you can see in the packages folder there are different packages for ionic-angular and core.

David
  • 7,387
  • 3
  • 22
  • 39
  • This is Wrong `Of course you can use Stencil to build your entire application`. You cannot do that. How can you develop an app only by using UI components? The stencil is used for creating UI components only (i.e. `web components`). Nothing else it can do. If you need to develop an app you must either use an existing framework (that is the recommended way) or you need to reinvent the wheel. – Sampath Nov 08 '17 at 06:52
  • 1
    Thats what this: `meaning every component you use is built with stencil` sentence is for. I did not talk about native apps but about an application (which is why I wrote _application_ and not _app_) and it is very well possible to build it entirely with stencil. A good example are the [stencil docs](https://stenciljs.com/) - the entire page (application) is built with stencil. Even state-management can be done using stencil with [stencil-redux](https://github.com/ionic-team/stencil-redux). – David Nov 08 '17 at 11:19
0

Ionic 4 will be built with all Components written in Stencil. This will make Ionic more flexible and able to work with any framework. Stencil is very lightweight and not a framework in and of itself. It can be added to a project with npm rather than being tied tightly to an existing framework like current versions are with Angular.

More information can be found in their official blog announcement:

https://blog.ionicframework.com/the-end-of-framework-churn/

The 2 main guys also gave a talk at Polymer Summit 2017:

https://www.youtube.com/watch?v=UfD-k7aHkQE

leetheguy
  • 872
  • 10
  • 29