Get your mobile app in production in 3 months: Native and Reactive Mobile Apps
0 likes1,555 views
The document discusses using a frontend web app framework like React to build modular and independently deployable frontend applications that communicate with backend APIs. It recommends choosing technologies based on requirements, and outlines how React, Redux, and Sass were used to build the administrative and client-facing parts of an application, including managing asynchronous data and CSS.
![var Webpack = require('webpack');
var LiveReloadPlugin = require('webpack-livereload-plugin');
var GlobalConfig = require('./config_global.js');
module.exports = {
entry: "./src/ui/module.js",
output: {
path: "./"+process.env.NAME,
filename: "bundle.js"
},
module: {
loaders: [
{
test: /.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react']
}
},
{
test: /.sass$/,
loader: 'style!css!sass?indentedSyntax'
},
{
test: /.css$/,
loader: "style!css"
},
{
test: /.(png|gif)$/,
loader: "url?mimetype=image/[ext]&limit=10000"
}
]
},
plugins: [
new LiveReloadPlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
},
}),](https://image.slidesharecdn.com/webpresentationberlin1-170525151117/85/Get-your-mobile-app-in-production-in-3-months-Native-and-Reactive-Mobile-Apps-34-320.jpg)
![build native mobile apps with
javascript!
using native blocks (java, obj-c)
compose blocks using JS
best solution for specific applications
React Native
render() {
const rows = this.state.news.map((row, ii)
=> {
return <Row key={ii} data={row.data}/>;
});
return (
<ScrollView
style={styles.scrollview}
refreshControl={
<RefreshControl
refreshing={this.props.isFetching}
onRefresh={this._onRefresh}
tintColor="#1b1b1b"
title="Loading..."
titleColor="#1b1b1b"
colors={['#ff0000', '#00ff00',
'#0000ff']}
progressBackgroundColor="#ffed00"
/>
}>
{rows}
</ScrollView>
);
}](https://image.slidesharecdn.com/webpresentationberlin1-170525151117/85/Get-your-mobile-app-in-production-in-3-months-Native-and-Reactive-Mobile-Apps-35-320.jpg)
Get your mobile app in production in 3 months: Native and Reactive Mobile Apps
- 1. Web frontend is an app too! Jakub Baierl
- 2. Before Using MVP frameworks - PHP Symfony, Nette, Laravel, Wordpress Non static websites - web frontend dependent of backend Web frontend as a part of backend - only templates, no possibility of code reusing, no flexibility Slow performance Hard build and deploy process - installing packages for whole system
- 3. Now Simple Scalability - few files hosted even on different server, focus on my application - not whole infrastructure Communication via API Modularity - more suitables technologies for different problems Increased Flexibility - using API for web, mobile app, public expose Separate build and deploy
- 4. How to choose the right technology?
- 15. Who will win? Client’s wish, common sense or our pride? Web frontend is independent -> huge market of frameworks & libs Constant changes or hard resets on dev stacks Build app on unsuitable technology
- 17. Requirements Administrative part - fetching data from API, huge number of forms, dynamic part - graphs, sorting lists, maps
- 18. Requirements Administrative part - fetching data from API, huge number of forms, dynamic part - graphs, sorting lists, maps
- 19. Requirements Client app - fetching data from API, loading data once (mobile app base), temporary saving data, custom responsive layout, SEO
- 20. Requirements Client app - fetching data from API, loading data once (mobile app base), temporary saving data, custom responsive layout, SEO
- 21. Prepared packages Static websites - pure HTML, SASS, JS Static websites with support of multiple languages or dynamic elements or SEO - Middleman generator of static sites Dynamic websites with fast communication with API - React (server rendering for seo), Webpack Nonpublic administration (internal) systems - React, Webpack, Redux
- 22. Choose from the magic pouch
- 23. Chosen heroes React - Layout, Components, App structure, Server-rendering (microsite) Fetch API - Getting data from API Redux - Data flow, App state Sass - CSS preprocessor, design
- 24. React component-based javascript library only for user interface prepared events - onClick, onHover virtual DOM
- 25. Containers class CarContainer extends Component { constructor(props) { super(props); } render = () => { return ( <Loader show={this.props.isFetching}> {this.props.car ? <CarComponent car={car}/> : null} </Loader> ); } } export default connect(state => ({ isFetching: state.carIsFetching, car: state.car, }), (dispatch) => ({ carActions: bindActionCreators(carActions, dispatch) }) )(CarContainer);
- 26. Components class CarComponent extends Component { constructor(props) { super(props); }; componentWillMount () {} componentDidMount () {} render() { return ( <div> <p>{this.props.car.name}</p> </div> ); }; }; export default CarComponent;
- 27. Managing data stop using carcinogenic CALLBACKS button -> click ->wait for callback ….. confusion NOW -> unidirectional data flow -> button -> click -> make action -> change application state -> components reload
- 28. Redux
- 29. CSS before Huge files No code reusing Non-objective No flexibility - change color of app - change on 100 lines —> use CSS preprocessors - Less, Sass, Stylus
- 30. Sass now! Variables Nesting Mixins - code reusing Imports - different libraries Math - width: (100%+35) Simply awesome <3
- 31. Variables & Nesting //Prague open fesival 2017 $main_colour_1: #0C4D78 $main_colour_2: #0f4064 $second_colour: #F7966B $bg_colour: #ffffff $contrast_colour: #000000 $text_colour_1: #000000 $text_colour_2: #ffffff ===================================================== // Testing of sass loader @import "../../common.sass" @import "../../../../variables.sass" .Header background-color: $main_colour_1 &-logo float: left img width: 100%
- 32. Building the web app Transpiling to browser language - from JSX, ES6 … Translate Sass files to CSS files Livereloading - realtime watching for changes and reloading app Different data for development and production Tools: Gulp, Grunt, Webpack
- 33. module bundler dependency graph -> bundles -> browser can load it building watching transpiling extracting minifying uglyfying livereload support development vs. production Webpack
- 34. var Webpack = require('webpack'); var LiveReloadPlugin = require('webpack-livereload-plugin'); var GlobalConfig = require('./config_global.js'); module.exports = { entry: "./src/ui/module.js", output: { path: "./"+process.env.NAME, filename: "bundle.js" }, module: { loaders: [ { test: /.js$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['react'] } }, { test: /.sass$/, loader: 'style!css!sass?indentedSyntax' }, { test: /.css$/, loader: "style!css" }, { test: /.(png|gif)$/, loader: "url?mimetype=image/[ext]&limit=10000" } ] }, plugins: [ new LiveReloadPlugin(), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, }, }),
- 35. build native mobile apps with javascript! using native blocks (java, obj-c) compose blocks using JS best solution for specific applications React Native render() { const rows = this.state.news.map((row, ii) => { return <Row key={ii} data={row.data}/>; }); return ( <ScrollView style={styles.scrollview} refreshControl={ <RefreshControl refreshing={this.props.isFetching} onRefresh={this._onRefresh} tintColor="#1b1b1b" title="Loading..." titleColor="#1b1b1b" colors={['#ff0000', '#00ff00', '#0000ff']} progressBackgroundColor="#ffed00" /> }> {rows} </ScrollView> ); }
- 36. Advanced topic Hosting react apps - Google Storage Bucket Redux sagas and middleware React native routing - using native controllers
- 37. www.ackee.de lovely people, lovely apps