In this talk I present a completely new development flow for creating mobile apps. React, Redux, Webpack etc. those are all subjects that we usually associate with web development, but what if it could be different?? I will show how we can use tools like before-mentioned ones to completely change the DX in mobile development, while not sacrificing the quality or the UX. I show how we can have hot reloading, iterative development, universal code that can be run on web, Android and iOS and all the other "little" awesome things that will make you love mobile development.

1. ULTIMATE DX USING JS AS
A PRIMARY LANGUAGE
Fatos Hoti / @hotifatos

2. WARNINGS!

3. Who am I?
- Fatos Hoti
- Pula, Croatia (Pola)
- Berlin, Germany
- Writing awful code that from time to time performs really good for cca. 10 years
- PHP developer who fell in love with JS
- Ready to take our love to the next level

4. As I said...
- I love JS
- I love the web
- Always wanted to do mobile, but….
- Java + OBJ-C
- Xcode + Android Studio
- Bad DX

5. What’s this DX sourcery you speak of...
- App / page reloading
- Typo breaking
- 100000000000 grunt/gulp tasks (JS)
- App recompling
- Doing stuff like it’s 2001
- In 2016 we can have : hot reloading, light config bundling, fast builds, fast
development iterations, CI...
- At least in the web…. Or is it JUST in the web

6. What tools are we going to use
- Express
- Socket.io
- ReactJS
- React-native
- Redux
- Babel
- Flexbox model
- Expect, mocha, chai
- ImmutableJS

7. Express & socket.io
- Universal rendering
- Real-time communication
- All stuff backend

8. React & React-Native
- View layer for all our clients
- React vs. react-native
- Why is react-native a good thing
- Why it’s different

9. React & React-Native
- NPM INSTALL WHATEVER
- TOTALLY ASYNC
- OPEN SOURCE COMPONENTS
- BLAZING FAST COMMUNITY
- OVER THE AIR UPDATES
- EXPOSING NATIVE MODULES
- NATIVE APIs
- NATIVE UI, MODULES, COMPONENTS...

10. Talking to native code
- http://facebook.github.io/react-native/docs/native-modules-ios.html
- http://facebook.github.io/react-native/docs/native-components-ios.html
- http://facebook.github.io/react-native/docs/native-modules-android.html
- http://facebook.github.io/react-native/docs/native-components-android.html

11. Redux
- Predictable container for JS apps
- Redux vs. Flux
- Data layer for our app
- Used in client-side as well as in server-side
- Small API
- Extra light
- Very very testable (Predictable)
- Awesome dev tools

12. Flexbox
- New and better way to write css
- SASS, stylus for web
- StyleSheet for mobile
- https://github.com/MicheleBertoli/css-in-js

13. Webpack
- The all mighty bundler of all things static
- Js, images, css (all flavors), json….
- Webpack-dev-server
- Building our web app

14. Babel
- Transpiler of all things JS
- Stage-0, react, es2015
- Classes, spread operators, fat arrow functions… everywhere
- Ability to target platforms

15. Testing
- Mocha, chai
- Expect (https://github.com/mjackson/expect)
- React-test-utils (https://facebook.github.io/react/docs/test-utils.html)
- Jest (http://facebook.github.io/jest/)
- Comes natural with redux
- Easiest TDD approach I’ve seen

16. How are we accomplishing it
- Higher order components
- Presentational / Dump platform specific components
- Platform specific loading
- Connection to the redux store

17. The good
- Great fun
- Good DX
- Fast(er) development
- Taking things to a new level
- Code reusability
- Skills reusability
- Covering all things internet

18. The bad
- Dependencies
- A lot of bad advice on the web
- Easy to get outdated
- No best practices

19. DEMO TIME

20. Where to go next?
- http://reactnative.com/
- http://docs.apphub.io/
- http://rnplay.org/
- https://github.com/GordyD/3ree
- http://www.flexboxdefense.com/
- https://getsiphon.com/
- http://graphql.org/
- https://facebook.github.io/relay/
- https://github.com/tosFa/react-cross-platform-boardgame-example

21. Recap
- Same DX in web and mobile
- Skill reusability
- Code reusability / Cross platform code
- Fast development
- One team to rule it all
- Money / Time saver
- Universal JS is no longer “just” server and browser
- Full stack in one language / ecosystem
- Coding is fun

22. Thank you
@hotifatos