Glimmer-Native

Have you ever wanted to use Ember/Glimmer to create a native mobile app? Well now you can!
Keep in mind Glimmer Native is currently in an ALPHA state. Use in production at your own risk

Places this borrows code/concepts from:
Svelte,
Vue,
Glimmer Embedding Tutorial,
Nativescript Demo

How to create your first Glimmer-Native project

1. Follow the NativeScript Setup Guides
2. Run ember new hello-glimmer-native -b glimmer-native-blueprint in the command line
3. Run tns run ios --bundle (or to debug tns debug ios --bundle --debug-brk)

How to use Glimmer-Native

There is a default set of Glimmer Components available to you that render native elements

- AbsoluteLayout
- ActionBar
- ActionItem
- ActivityIndicator
- Border
- Comment
- Button
- DatePicker
- DockLayout
- FlexboxLayout
- FormattedString
- GridLayout
- HtmlView
- Image
- Label
- ListPicker
- ListView
- NavigationButton
- Page
- Span
- StackLayout
- ScrollView
- Tabs
- TabView
- TabViewItem
- TextField
- TextView
- Switch
- WebView
- WrapLayout

$3

There is a built in action helper, along with a built in on modifier to allow for event handling

$3

There is a LinkTo component provided that allows for navigation. You pass a target to it which tells GlimmerNative what component to render and navigate to. would create a component that listens for a click. Once clicked, Glimmer Native would look up the Dashboard Glimmer component, render it, and then navigate to it.

You MUST have the top level element be a Page component in order to navigate to it (so in the Dashboard component, the first element must be Page)

$3

``hbs








{{#each tasks key="@index" |task|}}

{{/each}}




text={{this.buttonText}}
class="btn"
{{on "tap" (action buttonClick)}} />




`

and the component ts file:

`js
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

export default class Task extends Component {
@tracked
public title = 'Welcome to glimmer';

public buttonText = 'Click Me!';

public buttonClick() {
this.title = 'Tracked yo';
}
}

``

Known Issues

1. Need demo app
2. Need tests
3. Need documentation site

Thanks to the following people for their help/guidance

- @chadhietala
- @pzuraq
- @acorncom

Sponsored in part by Gavant Software