mirror of https://github.com/hariroshan/elm-native-library.git synced 2024-11-30 14:13:41 +03:00

Elm native allows elm developers to build mobile application using NativeScript

Go to file

hariroshan 8cf4ebd62c added webgl-triangle example		2023-06-11 17:03:38 +05:30
.github	Create FUNDING.yml	2023-02-24 17:56:47 +05:30
.vscode	inital commit	2023-01-05 13:27:26 +05:30
app	Allows adding user defined custom elements (#7 )	2023-05-21 13:16:03 +05:30
App_Resources	inital commit	2023-01-05 13:27:26 +05:30
doc	added gifs and updated readme	2023-03-04 14:37:36 +05:30
elm-native@8cf98ba481	updated docs	2023-03-05 16:30:07 +05:30
elm-native-js	Patch custom element registry (#10 )	2023-06-11 16:20:12 +05:30
examples	added webgl-triangle example	2023-06-11 17:03:38 +05:30
hooks/before-checkForChanges	added ns hooks	2023-03-05 16:08:52 +05:30
.editorconfig	inital commit	2023-01-05 13:27:26 +05:30
.gitignore	added ns hooks	2023-03-05 16:08:52 +05:30
.gitmodules	added webgl-triangle example	2023-06-11 17:03:38 +05:30
elm-code-wrap-loader.js	added elm deps	2023-01-05 13:46:48 +05:30
elm.json	added dialogs	2023-02-26 16:51:44 +05:30
LICENSE	added license	2023-03-04 15:37:44 +05:30
nativescript.config.ts	inital commit	2023-01-05 13:27:26 +05:30
package.json	Allows adding user defined custom elements (#7 )	2023-05-21 13:16:03 +05:30
README.md	Update README.md	2023-05-21 13:25:46 +05:30
references.d.ts	added typescript	2023-01-05 13:34:51 +05:30
tsconfig.json	added typescript	2023-01-05 13:34:51 +05:30
webpack.config.js	runs in ios	2023-01-06 19:21:13 +05:30
yarn.lock	Allows adding user defined custom elements (#7 )	2023-05-21 13:16:03 +05:30

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

or something like a blog

or even complex app with page transitions, modals, dialog, and much more!

How it works

We will use CustomElements 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

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
Define and use custom nativescript elements / plugins 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

Clone the blank template

git clone https://github.com/hariroshan/template-blank-elm

Install dependencies using yarn or npm install
Follow the instructions to setup your mobile development enviroment
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