Building Hangman in elm-native-ui

Philipp Marvovics @unkai and me talkingat the Elm Berlin Meetup about how we built Hangman in elm-native-ui.

Transcript

1. Building Hangman in elm-native-ui
2. elm-native-ui what is it? write native (iOS and Android) apps with Elm powered by React Native
3. elm-native-ui how does it work? Forked elm-compiler adds support for NativeUi type
4. elm-native-ui how does it work? elm-core adds embedReact function forwards render and update to elm-native-ui functions
5. elm-native-ui how does it work? elm-native-ui translates NativeUi.VNode into
 React components
6. Let’s build Hangman with this! This is perfect for a Hackathon. How hard can it be?
7. Okay, how do we enter text?
8. Time’s up! Still no Hangman :’(
9. Building Hangman Support more components and properties like TextInput and value use react-docgen to generate a prop spec of each component generated 1200+ lines of Elm code from prop spec organized similar to elm-html very easy to generate Elm code out of templates
10. Elements Template Generated Elm code
11. Properties Template Generated Elm code
12. Safe Enum Properties Template Generated Elm code
13. Event Handlers Template Generated Elm code
14. Limitations some components don’t have a prop spec no signatures for event handlers provided by spec exceptions need to be added for duplicate property names Android/iOS differences are not handled yet
15. Enough functionality to build Hangman though!
16. Hangman’s view function
18. Outlook create pull request with new components restrict components to use only their supported properties support more components (like Android components)
19. https://github.com/elm-native-ui/elm-native-ui https://github.com/mk/hangman Twitter: Thanks! @mkvlr @unkai Find us on Github: mk joe-loco