mirror of
https://github.com/hariroshan/elm-native-library.git
synced 2024-12-04 17:02:49 +03:00
70 lines
2.4 KiB
Markdown
70 lines
2.4 KiB
Markdown
# Elm Native
|
|
|
|
Build mobile apps with elm using NativeScript API. `elm/http` works with this library as well!
|
|
|
|
We can build simple apps like counter
|
|
|
|
https://user-images.githubusercontent.com/5707049/224556167-e4cc713f-79da-4c75-b1c6-9333d911f2f3.mp4
|
|
|
|
or something like a blog
|
|
|
|
https://user-images.githubusercontent.com/5707049/224556315-ff8ffaf5-c38c-4147-8bf8-0ab5018b1ed8.mp4
|
|
|
|
|
|
or even complex app with page transitions, modals, dialog, and much more!
|
|
|
|
https://user-images.githubusercontent.com/5707049/224556409-61d6b92f-f25f-4e83-9203-5f008f6fe627.mp4
|
|
|
|
## How it works
|
|
|
|
We will use [CustomElements](https://guide.elm-lang.org/interop/custom_elements.html) feature to create mobile UI elements with nativescript objects and control the nativescript object from elm.
|
|
|
|
Here's a simple representation of how UI elements are created
|
|
|
|
`Elm` -> `Nativescript` -> `Mobile`
|
|
|
|
When we listen for / receive an event,
|
|
|
|
`Mobile` -> `Nativescript` -> `Elm`
|
|
|
|
Consider this flow while building an application. This will help you to overcome performance issues if you encounter them.
|
|
|
|
Use the attributes from `Native.Attributes` and NOT `Html.Attributes`
|
|
|
|
Checkout [examples](./examples)
|
|
|
|
### Supported Features
|
|
|
|
- Dialog
|
|
- Page transitions animations
|
|
- Modal page
|
|
- Execution of OS specific property assignment and Native code (Be careful)
|
|
- Navigating page back and forth using frame functions
|
|
- Has bindings for all Nativescript UI elements
|
|
- Calling methods/setting attributes in the event object within elm (Will be improved in future)
|
|
- Simple and complex listviews templates and much more
|
|
|
|
More features will be added soon.
|
|
|
|
This project tooks months of research and days of work. If you feel like it is valuable to the elm community, **[please consider supporting this project](https://github.com/sponsors/hariroshan)**
|
|
|
|
## Get Started
|
|
|
|
1. Clone the blank template
|
|
|
|
```sh
|
|
git clone https://github.com/hariroshan/template-blank-elm
|
|
```
|
|
|
|
2. Install dependencies using `yarn` or `npm install`
|
|
3. Follow the instructions to setup your [mobile development enviroment](https://docs.nativescript.org/environment-setup.html)
|
|
4. Run project using
|
|
- `yarn run run:ios` or `npm run run:ios` for iOS
|
|
- `yarn run run:android` or `npm run run:android` for Android
|
|
|
|
## TODO
|
|
|
|
- [ ] Convert raw js into rescript
|
|
- [ ] Build a starter template with elm support with bindings pre-installed
|
|
- [ ] Support animations
|