Is it planned to include StencilJS as a development choice in Ionic?

I'm curious about the potential adoption of Stencil JS for developing mobile apps within the Ionic framework.

When I mention "an option for developing," I'm referring to frameworks like NativeScript where developers can choose between Angular + Typescript or Javascript. Additionally, there are other alternatives available such as VueJS for NativeScript.

StencilJS presents an intriguing alternative to traditional javascript frameworks like Angular, and it would be exciting to see its integration with Ionic for app development.

Considering that the StencilJS framework was developed by the Ionic team, I can't help but wonder if it will eventually become a viable option for all Ionic developers as an alternative to Angular.

angulartypescriptstenciljsionic4

Answer №1

Update 24-01-2018:

A new piece by Josh is now available: An Introduction to Stencil

Achieve more with Stencil.

Stencil acts as a compiler that creates Web Components, specifically Custom Elements. By incorporating the finest elements of popular frameworks into a user-friendly build-time tool, Stencil stands out in its category.

Thanks to Stencil's production of web components that adhere to standards, they seamlessly integrate with numerous renowned frameworks and can also function independently because they are essentially web components. Moreover, Stencil facilitates several essential features beyond mere Web Components, including Server Side Rendering (SSR) which does not necessitate a headless browser, pre-rendering, and utilization of objects as properties instead of just strings.

To delve deeper into Stencil, visit their official documentation here

For a guide on implementing Stencil with Vue.js, check out this resource

Answer №2

Absolutely! Like @Sampath mentioned earlier, Stencil serves as a compiler to create WebComponents. However, your question seems to focus on whether ionic components will be usable without Angular. The team at Ionic is currently in the process of converting all their UI elements into WebComponents with the help of Stencil to simplify the transition.

Once this conversion is complete, ionic-angular will continue to be accessible as it is now, but there will also be a new addition known as ionic-core (or simply core) which will encompass all Ionic UI elements as standard web components. These components can be integrated into various frameworks like React or Vue, or even used independently in vanilla JavaScript projects.

While I haven't delved deeply into this topic yet, I anticipate that the Ionic CLI will offer different project creation options based on the core library.

Stencil will remain unchanged - serving its purpose as a tool for crafting WebComponents. It's even possible to construct an entire application using only Stencil-built components.

To track the development of the core library, you can visit the core branch on GitHub. Within the packages folder, separate packages for ionic-angular and core are discernible.

Answer №3

Ionic 4 is taking a new approach by utilizing Stencil for all its Components. This shift will enhance Ionic's adaptability across different frameworks. Unlike traditional frameworks, Stencil is lightweight and modular. It can easily be integrated into projects using npm, offering more flexibility compared to previous versions tied closely with Angular.

For further details, check out their official blog post:

The creators also delivered a presentation at Polymer Summit 2017:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to customize the visible columns in a mat table based on the size of the screen?

Using mat-table, I have specified the columns to display in an array: In TypeScript: displayedColumns: string[] = ['date', 'customer', 'project', 'performanceRecord', 'duration', 'status', &apos ...

angular

Navigating to different HTML pages by utilizing <a> elements in Angular 2

As a newcomer to Angular 2, I've decided to build my personal website using this framework. The main page of my website contains bio information, while the other page will feature blog content. Both pages will have a shared header and footer, but diff ...

htmlangulartypescriptangular2-routingangular2-template

In just a single line of code, you can iterate through a Record object and retrieve an array of DOM elements

I am working with an object type MyType = 'name' | 'base' | 'six'; obj: MyType = { 'name': {key: 'm1'}, 'base': {key: 'm2'}, 'six': {key: 'm3'}, } My goal is ...

javascripttypescript

Developing a Javascript object using Typescript

Trying my hand at crafting a TypeScript object from JavaScript. The specific JavaScript object I'm attempting to construct can be found here: https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.2/chess.js In the provided JavaScript example, the obj ...

javascripttypescript

Angular Universal SSR - prerendering static content

After updating to the latest Angular version 10, I encountered an issue when trying to run a static prerender. The error message displayed is: Unhandled Promise rejection: Cannot read property 'moduleType' of undefined. Despite trying various con ...

angularexpressangular-universal

Utilizing Dynamic Variables in Angular Module Declarations

I am facing an issue with importing a module in my @NgModule setup. Currently, I have the following code: MqttModule.forRoot(environment.MQTT_SERVICE_OPTIONS) However, I want to retrieve the value from a configuration file instead of the environment. To ...

angular

Finding the duration of an audio file in a React/Typescript environment

I've been attempting to determine the duration of an audio file. It seems like the audio property is not included in the file by default. The only properties I see are size, name, and type. Is there a way for me to get the duration of the audio file i ...

reactjstypescript

In what ways can enhancing the TypeScript type system with additional restrictions help eliminate errors?

Encountered issues while working on my TypeScript project due to errors in the type definitions of a library. The solution was to enable the strictNullChecks flag. It seems counter-intuitive that adding restrictions can eliminate errors, when usually it&a ...

typescripttypingnull-check

Encountering an error in Cytoscape using Angular and Typescript: TS2305 - Module lacks default export

I am working on an Angular app and trying to integrate Cytoscape. I have installed Cystoscape and Types/cytoscape using npm, but I encountered an error when trying to import it into my project. To troubleshoot, I started a new test project before implement ...

angulartypescripttypescytoscape.js

Angular2: Implementing a nested subscription with a secondary subscription within a loop

I am still discovering the world of Angular2, just a week into it! Currently dealing with 2 API calls in my project. The initial API call fetches an array (queryResults) of JSON objects. (1st Subscribe) Showcasing that array in the view. Iterating throu ...

angularhttprequestangular2-observablesangular2-http

Encountering an unexpected token while trying to use createUserWithEmailAndPassword in firebase/auth with Next.js and TypeScript left Jest puzzled

I have been working on integrating Firebase authentication into my Next.js project (using TypeScript), but it appears that there are configuration issues with Firebase causing my Jest tests to fail. Here are the key configuration files: jest.config.js : ...

typescriptfirebasenext.jsjestjsfirebase-authentication

Error in Angular: Trying to access the property 'id' of an undefined value

I am facing an issue with a div tag in my HTML file. The code snippet looks like this: <div *ngIf="chat.asReceiver.id != user?.id; else otherParty"> Unfortunately, it always returns the following error: ERROR TypeError: Cannot read propert ...

angulartypescript

Angular Components: Achieving Full Height Issue with TabsResolved

I'm facing a challenge in making my tab fill the full height of the content underneath it. I've tried different solutions like setting height: 100%, but nothing seems to be working. Here is the HTML code: <mat-tab-group [selectedIndex]=" ...

angularangular-material

Typesafe-actions for defining typings of async actions reducers

I'm currently facing a minor issue while using createAsyncAction from the library typesafe-actions (Typesafe Actions) and correctly typing them for my reducer function Below is an example of the action being created: export const login = createAsync ...

reactjstypescriptreact-redux

Can a type alias be created for more than one parameter of a class or function with multiple type parameters?

When using Vue, there are situations where a generic function may require 3, 4, or even 5 type parameters. Is it possible to create a type alias for these parameters in order to avoid typing them out repeatedly? Something like this perhaps: // Example of ...

typescriptvue.jstypescript-generics

Using Angular 5 for sending HTTP POST requests with x-www-form-urlencoded content-type

Currently, I have been immersing myself in Angular and am nearing completion of my initial end-to-end application. This specific app is designed to interact with Spotify's public API in order to search for music and play track previews. The primary i ...

angularhttppostspotify

What is the best way to use two distinct CSS styles for mat-form-field across multiple pages?

On one of my pages, I have a mat-form-field: <mat-form-field class="form-control-full-width"> <input type="text" matInput placeholder="First Name" formControlName="firstNameFC" required> <mat-error *ngIf="hasNewUserErro ...

htmlcssangularangular-materialmat-form-field

Receiving API response with a format similar to JSON, but encountering an issue during the parsing process

My API is returning the following: {"permissions": [{"id":1,"product_id":10,"permission_type":"ADD","name":"Add"}, {"id":2,"product_id":10,"p ...

reactjsjsontypescript

What is the proper way to define the Typescript type of the return value from the dispatch function in a Redux application?

fetchSomething is defined as follows: export const fetchSomething = createAsyncThunk( 'something', async () => { return Promise.resolve({name: 'jack'}) } ) This is the code within a React component: const dispatch = useApp ...

reactjstypescriptreduxredux-toolkit

Safari having trouble auto-playing Vimeo iframe embed

Update 6/26/23: Seems like a mysterious change occurred, as now the Vimeo video on project pages is playing automatically for me in Safari without any specific reason. It's working fine on Chrome too. Not sure if Vimeo made an update or if it's r ...

javascripthtmlangulariframevimeo