Skip to content
No description, website, or topics provided.
Branch: master
Clone or download

README.md

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. Most if not all of these should be working, but there might be a straggler or two I missed.

  • AbsoluteLayout
  • ActionBar
  • ActionItem
  • ActivityIndicator
  • Border
  • Comment
  • Button
  • DatePicker
  • DockLayout
  • FlexboxLayout
  • FormattedString
  • GridLayout
  • Image
  • Label
  • NavigationButton
  • Page
  • Span
  • StackLayout
  • ScrollView
  • TabView
  • TabViewItem
  • TextView
  • WebView
  • WrapLayout

Event handling

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

Routing/Navigation

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. <LinkTo @target="Dashboard" @text="Dashboard" /> 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)

Example

<Page class="page">
    <ActionBar class="action-bar">
        <Label text={{this.title}} class="action-label" />
    </ActionBar>
    <TabView>
        <TabViewItem title="ToDo">
            <ScrollView>
                <StackLayout class="tasks">
                    {{#each tasks as |task|}}
                        <Task @task={{task}} />
                    {{/each}}
                </StackLayout>
            </ScrollView>
        </TabViewItem>
        <TabViewItem title="Calendar">
            <Button
                text={{this.buttonText}}
                class="btn"
                {{on "tap" (action buttonClick)}} />
            <Label text="Coming soon" />
        </TabViewItem>
    </TabView>
</Page>

and the component ts file:

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. List View not working yet (for now you can still use #each)
  3. Need ability to add plugins on the fly

Thanks to the following people for their help/guidance

Sponsored in part by Gavant Software

You can’t perform that action at this time.