hariroshan/elm-native-library
1
1
Fork 0
mirror of https://github.com/hariroshan/elm-native-library.git synced 2024-11-24 09:04:47 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity
Elm native allows elm developers to build mobile application using NativeScript
119 Commits 7 Branches 1 Tag 6.2 MiB
ReScript 37.9%
Elm 37.9%
JavaScript 21.7%
SCSS 1.7%
CSS 0.6%
Other 0.2%
73fcde9219
Go to file
Hari Roshan 73fcde9219
Allows adding user defined custom elements (#7) 
* added null check for el

* added customElements field

* renamed dashed to kebabCased

* refactored and exposed addViewRender and buildHandler

* exposed build handler

* added types for customElements

* increased version

* added customElements Class extending ability

* minor change version bump

* testing custom elements with animated circle

* added missing element definition

* fixed ns-animated circle issue
2023-05-21 13:16:03 +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 Allows adding user defined custom elements (#7) 2023-05-21 13:16:03 +05:30
examples added weather app example 2023-03-11 16:59:50 +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 weather app example 2023-03-11 16:59:50 +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 Replacing gif with video (#5) 2023-03-12 21:27:08 +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

README.md

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 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

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

Get Started

  1. Clone the blank template

    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

  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