Stencil Mobile - Setup Phase

[karntrehan]

Stencil Mobile

Stencil Mobile is an initiative to create a comprehensive design library for mobile that encapsulates various components, referred to as "molecules". Each molecule is a small, self-contained component that integrates multiple mobile features. When combined, these molecules can be used to build fully functional features, referred to as "pages". The library will rely on native mobile widgets wrapped in Material3 components, and it will be packaged as a mobile SDK, making it easy to integrate into any existing or new project.

Stencil Mobile draws inspiration from the existing web version of Stencil, which includes a front-end design library (Stencil-UI) and a back-end service (Stencil). The complete documentation for which is mentioned here.

Repositories

Stencil Mobile will be divided into two main repositories:

1. Stencil Mobile Molecules: This repository will contain individual molecules, each representing a small component that performs a specific function.
2. Stencil Mobile Pages: This repository will compile various molecules to create complete pages or sections of an app.

Next Steps

• [ ] Identify tech stack: Should work on both Android and iOS.
• [ ] Identify configurability
• [ ] Scope molecules relevant for mobile: Identify and list the molecules that are most relevant and useful.
• [ ] Stencil Mobile in NL/NisAI
• [ ] Create a structure for the library
• [ ] Create 1-2 base components for community to replicate
• [ ] Create list of components for the community to contribute
• [ ] Start documentation
• [ ] Make changes to stencil-repo to allow mobile repo
• [ ] Community contribution: Steps to make it available to the community for contribution. Also, what are the pre-requisites.

We will set up the base of Stencil Mobile internally before the community can contribute functionality/molecules to it.

By following these steps, Stencil Mobile aims to provide a robust, reusable, and scalable set of design components that streamline the development process and enhance the consistency and quality of mobile applications.

[charanpreet-s]

1. Compose vs React Native vs Flutter
2. Web to update the docs with the latest Configurations, Mobile to follow the doc and give suggestions if required
3. Documentation to be fixed for Web pages, new category for pages to be created,
4. To create a plan if it will be possible to be implement in NisAI
5. Depends on 1
6. Identify a list of molecules/pages relevant to NisAI, Create work on 2 initial pages and dependent molecules of the new NL design
7. Documentation for the newly created molecules and also the scope of how that can be implemented on the Web as well
8. Rename stencil-ui to web stencil and check for required changes
9. @prtkjakhar to do clean up of repo structure in the stencil org
10. Guidelines and steps to contribute to be created along with Prateek

[prtkjakhar]

I have renamed stencil ui repository to stencil-web. Also, I have deleted redundant repositories except molecules-cli. I would like to wait until the new monorepo structure gets merged in dev branch before deleting it. @ankitmlesmagico will be picking up documentation restructuring in the next sprint. cc: @ChakshuGautam

[rohitsamagra]

• Charanpreet to break the ticket down into specific sprints

[charanpreet-s]

React Native <> Flutter <> Jetpack Compose

Language analysis on Multi-Platform Projects

Criteria	React Native	Flutter	Jetpack Compose
Community Support	Large, active, many resources.	Growing, strong Google support.	Smaller, strong Kotlin and Google support.
Performance	Overall good, however lags for complex graphics. Performance gets weaker if architecturally not defined well	High, near-native performance. Slower startup.	Improved over XML, deep Android integration. Faster startup because of AOT compilation
Ease of Contribution	Easy for JavaScript/React devs, hot reload. Web developers can also contribute	Easy with good docs, hot reload. Dart knowledge required	Simplifies UI, may have higher learning curve.
Code Reusability	High between iOS and Android. Can check if web NextJs code can be reused as well	High across iOS, Android, web, desktop.	More focus on Android with jetpack. iOS still under Beta
UI Consistency	Varies, needs extra effort for uniformity.	Consistent across platforms.	Consistent within Android. Not much about iOS checked
Ecosystem and Libraries	Extensive JavaScript Closed/ Open source libraries, some native modules.	Good set of libraries, still growing. Major contribution by Google itself	Growing, benefits from Android/Kotlin ecosystem.
Learning Curve	Moderate, easier for JavaScript devs.	Moderate, good docs and simple model.	Steeper for new to Kotlin/declarative UI. iOS not known yet
App Size	Larger, especially with many libraries.	Larger, includes Dart runtime/Skia engine. Results AOT	Comparable to traditional Android apps.
Development Speed	Fast, hot reloading, reusable components.	Rapid, hot reload, pre-designed widgets.	Fast with pre-knowledge of kotlin
Integration with Native Code	Allows, but can add complexity.	Supports platform channels, need bridging.	Seamless with existing Android code/libraries.

[rohitsamagra]

• Currently, looking on compose approach
• Checking on IOS