SlideShare a Scribd company logo
One code Web, iOS, Android
Artem Marchenko, 09 Feb 2017
https://twitter.com/AgileArtem
Artem
https://twitter.com/AgileArtem
• Buzzwords:
– Interactive images, Qt/QML, Jolla SailfishOS, Agile-
shmagile, TDD, product management, JavaScript, Java,
whatever works, prototyping, startups, paragliding, salsa
dancing, ReactJS, React Native
– http://www.thinglink.com
• Twitter: @AgileArtem
Подорожник
https://twitter.com/AgileArtem
Подорожник – калькулятор
https://twitter.com/AgileArtem

Recommended for you

Get Hip with JHipster - Colorado Springs OSS Meetup April 2016
Get Hip with JHipster - Colorado Springs OSS Meetup April 2016Get Hip with JHipster - Colorado Springs OSS Meetup April 2016
Get Hip with JHipster - Colorado Springs OSS Meetup April 2016

Building a modern web (or mobile) application requires a lot of tools, frameworks and techniques. This session shows how JHipster unites popular frameworks like AngularJS, Spring Boot and Bootstrap. Using Yeoman, a scaffolding tool for modern webapps, JHipster will generate a project that uses Java 8, SQL or NoSQL databases, Spring profiles, Maven or Gradle, Gulp.js, WebSockets and BrowserSync. It also supports a number of different authentication mechanisms: classic session-based auth, OAuth 2.0, or token-based authentication. For cloud deployments, JHipster includes out-of-the-box support for Cloud Foundry and Heroku.

open sourcejavayeoman
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Rich Web Experie...
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Rich Web Experie...Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Rich Web Experie...
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Rich Web Experie...

Building a modern web (or mobile) application requires a lot of tools, frameworks and techniques. This session shows how JHipster unites popular frameworks like AngularJS, Spring Boot and Bootstrap. Using Yeoman, a scaffolding tool for modern webapps, JHipster will generate a project for you and allow you to use Java 7 or 8, SQL or NoSQL databases, Spring profiles, Maven or Gradle, Grunt or Gulp.js, WebSockets and BrowserSync. It also supports a number of different authentication mechanisms: classic session-based auth, OAuth 2.0, or token-based authentication. For cloud deployments, JHipster includes out-of-the-box support for Cloud Foundry, Heroku and Openshift.

rwx2015bootstrapspringboot
Top 8 Ruby on Rails Gems
Top 8 Ruby on Rails GemsTop 8 Ruby on Rails Gems
Top 8 Ruby on Rails Gems

This document lists and describes 8 of the most useful Ruby on Rails gems for developers. It provides the name of each gem, a link to its GitHub page, a brief description of its purpose, and a difficulty level for implementing each gem. The gems covered are Devise for user authentication, Simple Form for building forms, Bootstrap for responsive design, Rails Admin for an admin panel, Paperclip for file attachments, CanCan for authorization, Sunspot Solr for search, and Stripe for credit card payments. Implementation difficulty levels range from very easy to hard depending on the gem.

developmentruby on railscoding
Подорожник – калькулятор
https://twitter.com/AgileArtem
Actually usable
https://twitter.com/AgileArtem
WHAT’S UNDER COVER
https://twitter.com/AgileArtem
Under the cover
https://twitter.com/AgileArtem

Recommended for you

Vuejs getting-started - Extended Version
Vuejs getting-started - Extended VersionVuejs getting-started - Extended Version
Vuejs getting-started - Extended Version

It's an extended version of getting started with VueJs. I had a talk at Bahcesehir University with Istanbul Coders group.

vuejsvuejavascript
Introducing Playwright's New Test Runner
Introducing Playwright's New Test RunnerIntroducing Playwright's New Test Runner
Introducing Playwright's New Test Runner

Playwright Test is a new test runner built from scratch by the Playwright team specifically to accommodate end-to-end testing needs. Join Principal Engineer, Andrey Lushinkov as he demonstrates how to use Playwright Test to author new tests, how to migrate existing tests, how to deploy them on CI, and debug them if something goes wrong.

software testingtest automationplaywright
The Gist of React Native
The Gist of React NativeThe Gist of React Native
The Gist of React Native

React Native allows developers to use React and JavaScript to build mobile apps for Android and iOS. It uses the same fundamental UI building blocks as regular React, such as JSX, components, and unidirectional data flow. However, instead of rendering to the DOM, React Native renders native mobile UI components. This allows apps written in React Native to look and feel like they were built for each native platform, while sharing common JavaScript code between platforms. React Native is still young but is gaining popularity due to its promise of allowing web developers to build truly native mobile apps while reusing their existing skills.

reactcross platformmobile application development
App structure
https://twitter.com/AgileArtem
index.js
index.ios.js
index.androi
d.js
native/
AppContainer
AppContainer
Other web UI
components
Other native
UI
components
web reducers
common
reducer
native
reducers
native-
specific
reducer (e.g.
orientation
change)
Project structure
- src
- native
- components
- styles
- util
- web
- components
- test
- web
- components
https://twitter.com/AgileArtem
WHAT WORKED
https://twitter.com/AgileArtem
Google Analytics: Mobile
react-native-google-analytics-bridge
• Worked as simple as
const GA = require('react-native-google-
analytics-bridge');
const GA_TRACKER_ID = Platform.OS === 'ios'
? 'UA-76217125-6' : 'UA-76217125-5';
GA.setTrackerId( GA_TRACKER_ID );
GA.trackEvent('general', 'app: activated');
https://twitter.com/AgileArtem

Recommended for you

E2E testing Single Page Apps and APIs with Cucumber.js and Puppeteer
E2E testing Single Page Apps and APIs with Cucumber.js and PuppeteerE2E testing Single Page Apps and APIs with Cucumber.js and Puppeteer
E2E testing Single Page Apps and APIs with Cucumber.js and Puppeteer

This document discusses end-to-end testing of single page applications and APIs using Cucumber.js and Puppeteer. It explains that E2E testing an SPA needs to handle loading the SPA, API, databases, and test data. An effective strategy must coordinate setup and teardown across components and be flexible to changes. The document then provides a 7 step process for using Cucumber.js to describe features, run automated tests, and provide living documentation. It also discusses using Puppeteer to control the browser from Node.js. Finally, it provides an example of using these tools together to test the Dashku application, which loads the SPA and API as modules, manages test data in MongoDB, and abstract

node.jscucumberpuppeteer
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx 2015
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx 2015Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx 2015
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx 2015

JHipster is a development platform that generates Spring Boot and AngularJS projects. It aims to make developers hip by including the latest trends like microservices, Docker, and cloud-native technologies. The presentation demonstrated generating a blog application with JHipster and deploying it to the cloud in under 30 minutes. JHipster allows generating CRUD screens from entities and provides features like authentication, metrics monitoring, and internationalization out of the box.

browsersyncspring-bootbootstrap
End to end testing Single Page Apps & APIs with Cucumber.js and Puppeteer (Em...
End to end testing Single Page Apps & APIs with Cucumber.js and Puppeteer (Em...End to end testing Single Page Apps & APIs with Cucumber.js and Puppeteer (Em...
End to end testing Single Page Apps & APIs with Cucumber.js and Puppeteer (Em...

Here are the slides from my talk at Ember London meetup June 2018 on End-to-end testing Single Page Apps & APIs with Cucumber.js and Puppeteer

node.jsember.jscucumber
Mobile Ads: Google AdMob
react-native-admob
Converting default React Native iOS project to pods/workspace
can be challenging, but then the usage is super-simple
import { AdMobBanner } from 'react-native-admob’;
<AdMobBanner
style={appStyle.bottomBanner}
bannerSize={"smartBannerPortrait"}
adUnitID={"ca-app-pub-
6248714847105943/1045980532"}
didFailToReceiveAdWithError={this.bannerError}
/>
https://twitter.com/AgileArtem
Redux and Redux Dev Tools
• Redux (or Flux if you like) could be the best
part of React practice actually
https://twitter.com/AgileArtem
WHAT WORKED OKAYISH
https://twitter.com/AgileArtem
Redux. Good parts
• Redux is awesome.
• Debugging dumb structures, tracing changes
message by message and time traveling is
simple and efficient
• Definitely use Redux Dev Tools (e.g. as a
Chrome extension)
https://twitter.com/AgileArtem

Recommended for you

React Native
React NativeReact Native
React Native

React Native is an open source JavaScript library created by Facebook that allows developers to build mobile apps using React. Over 500 companies use React Native including Facebook, Microsoft, and Samsung. React Native enables developers to write once and deploy their code to both Android and iOS, bridging native components while providing a native experience. It uses the same fundamental UI building blocks as regular Android and iOS apps.

react native
Lo mejor y peor de React Native @ValenciaJS
Lo mejor y peor de React Native @ValenciaJSLo mejor y peor de React Native @ValenciaJS
Lo mejor y peor de React Native @ValenciaJS

Una charla sobre React Native que di el 23 de Marzo 2017 en el meetup ValenciaJS: https://www.meetup.com/es-ES/ValenciaJS/events/238249872/ En 2016 desarrollé durante seis meses una aplicación para React Native. En esta charla compartí todo lo que he aprendido sobre este framework, y cómo os puede servir para crear una app nativa para iOS y Android al mismo tiempo de manera rápida y ágil. Hablé sobre la parte positiva, y las cosas que aceleraron nuestro proceso de desarrollo, pero también sobre algunos inconvenientes que hay que tener en cuenta. Se trata sobre todo de problemas muy específicos de cada plataforma, poner en marcha un flujo de integración continua y facilitar un proceso sencillo de testar la app con los usuarios. React Native es una buena solución que está muy de moda pero esto no significa que hay que usarlo sin analizar bien las necesidades de tu proyecto. Presenté brevemente una alternativa (Ionic 2) y conté que ventajas tiene en comparación con React Native desde mi punto de vista.

reactjavascriptvalencià
Philip Shurpik "Architecting React Native app"
Philip Shurpik "Architecting React Native app"Philip Shurpik "Architecting React Native app"
Philip Shurpik "Architecting React Native app"

React Native становится все более зрелым фреймворком для создания кросс платформенных мобильных приложений. Доклад основан на нашем опыте создания production приложения - от архитектуры до тестирования и CI. Рассмотрим вопрос переиспользования кода при разработке для разных платформ- что и сколько процентов можно переиспользовать и как этого достичь. Поговорим о том, как можно очень просто сделать offline-first приложение для чтения и создания данных. И чем нам в этом могут помочь Redux и Redux persist. Разберем, как максимально просто сделать навигацию в приложении. И, конечно же, какое production приложение без тестирования и continuous integration? Рассмотрим компонентное тестирование с Enzyme и интеграционное с Appium. А также, как максимально приблизить процесс deploy к тому, чему мы привыкли в web, с помощью CodePush.

frameworksjsfwdays
Redux. Complexities
• Making Redux, routing and Local Storage like
each other was pain in the bottom and rain
dances
– There is logic certainly, but you’ll either need to learn
a lot of it or dance around and hope
– Or clone my solution, but be aware it’s coding by
accident
• Modifying several files in the different parts of
code base (action creator, reducer, handler) for
just passing same stuff around is a lot of error
prone typing.
– Consider ducks approach – all the code about one bit
of functionality together
https://twitter.com/AgileArtem
Redux: more mistakes
• Do not store UI state (screen size) or
computable data (final price) in the model
• Use memoizable redux selectors for it (e.g.
reselect).
– Looks the same, feels the same, but you do not
pollute the model with the data to keep in sync
https://twitter.com/AgileArtem
Immutable.JS
const calcedPaymentState =
preUpdatedState.setIn(['paymentOptions', 'eTicket',
'totalCost'], newETicketCost)
• State that’s guaranteed to be immutable is way easier to
debug
• But not all the components are ready for it out of the box and
want to see plain JS objects (I had issues with browserHistory I
think)
• And on a small research-like app you might not see benefits of
immutability yet while you might hit the integration obstacles
https://twitter.com/AgileArtem
Routing and browse and sharable urls
import { Router, Route, IndexRoute, browserHistory, useRouterHistory } from 'react-
router';
import { routerMiddleware, syncHistoryWithStore, routerReducer, push } from 'react-
router-redux';
import createBrowserHistory from 'history/lib/createBrowserHistory';
const queryString = require('query-string');
const history = syncHistoryWithStore(browserHistory, store,
{selectLocationState: (state) => {
const r = state.getIn(['metadata', 'routing']);
return r || '/';
}});
const routedState = state.setIn(['metadata', 'routing'], {
locationBeforeTransitions: {
pathname: '/',
search: searchString,
query: {},
hash: ''
}
}) https://twitter.com/AgileArtem

Recommended for you

Spring Boot
Spring BootSpring Boot
Spring Boot

Overview of Spring Boot for the rapid development of Java Applications and Microservices. More information can be found at : https://www.spiraltrain.nl/course-spring-boot-development/?lang=en

spring frameworkspring bootdependency injection
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx UK 2016
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx UK 2016Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx UK 2016
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx UK 2016

Building a modern web (or mobile) application requires a lot of tools, frameworks and techniques. This session shows how JHipster unites popular frameworks like AngularJS, Spring Boot and Bootstrap. Using Yeoman, a scaffolding tool for modern webapps, JHipster will generate a project that uses Java 8, SQL or NoSQL databases, Spring profiles, Maven or Gradle, Gulp.js, WebSockets and BrowserSync. It also supports a number of different authentication mechanisms: classic session-based auth, OAuth 2.0, or token-based authentication. For cloud deployments, JHipster includes out-of-the-box support for Cloud Foundry and Heroku.

bootstrapspringmvcjavascript
From zero to hero with React Native!
From zero to hero with React Native!From zero to hero with React Native!
From zero to hero with React Native!

1. Create React Native App 2. Implementazione del codice del gioco del memory 3. Expo: integrazione di funzionalità native 4. Eject del progetto: integrazione di Expo 5. Integrazione camera/libreria foto

commituniversitycommit softwarereact native
Routing and browse and sharable urls
• React Router is okay, browserHistory is okay, storing routing in a
storage is okay, but making it work together is tough
– Especially if some more middleware is involved: Redux Dev Tools
• I used query string as the initial boss that commanded the state
that was setting up the routing
– Then state updates are changing the browserHistory-specific keys.
browserHistory was updating the address bar
• And there are WebKit bugs features. You cannot update URL too
often
• Use my solution if you just want things to work
– Yet it’s programming by accident
https://twitter.com/AgileArtem
Structuring controls for testing
• Simple, isolates core part for testability, but I didn’t use
much testing in the end
– Started from awesome tutorial by a Finn
@teropahttp://teropa.info/blog/2015/09/10/full-stack-
redux-tutorial.html
export class InputBlock extends React.Component {
constructor(props) {
…
export const InputBlockContainer = connect(
mapStateToProps,
actionCreators
)(InputBlock);
https://twitter.com/AgileArtem
Using template for injecting stuff into
the web root
var HtmlWebpackPlugin = require('html-webpack-plugin');
…
new HtmlWebpackPlugin({
inject: false,
template: 'src/web/index.ejs',
googleAnalytics: {
trackingId: 'UA-76217125-4',
pageViewOnLoad: true
},
…
<% if
(htmlWebpackPlugin.options.googleAnalytics.trackingId) {
%>
ga('create', '<%=
htmlWebpackPlugin.options.googleAnalytics.trackingId%>',
'auto'); https://twitter.com/AgileArtem
Title/Nav bar
react-native-navbar
• Surprisingly difficult to do in crosplatform way
• react-native-navbar works, but don’t expect to
fool a maniacal designer
https://twitter.com/AgileArtem

Recommended for you

Automation Abstractions: Page Objects and Beyond
Automation Abstractions: Page Objects and BeyondAutomation Abstractions: Page Objects and Beyond
Automation Abstractions: Page Objects and Beyond

When you start writing automation for your projects, you quickly realize that you need to organize and design the code. You will write far more than “test” code; you also will write abstraction code because you want to make tests easier to read and maintain. But how do you design all this code? How do you organize and structure it? Should you use a domain specific language? Should you go keyword driven or use Gherkin? Should you use page objects with POJO or Factories? Do you create DOM level abstractions? Where do domain models fit in? Alan Richardson provides an overview of options available to you when modeling abstraction layers. Based on his experience with many approaches on real-world commercial projects, Alan helps you understand how to think about the modeling of abstraction layers. Illustrated with a number of code examples, Alan shows you a variety of approaches and discusses the pros and cons associated with each.

ForwardJS 2017 - Fullstack end-to-end Test Automation with node.js
ForwardJS 2017 -  Fullstack end-to-end Test Automation with node.jsForwardJS 2017 -  Fullstack end-to-end Test Automation with node.js
ForwardJS 2017 - Fullstack end-to-end Test Automation with node.js

Slide deck for ForwardJS 2017 in San Francisco - March 1st 2017 https://forwardjs.com/schedule#lecture-224 Airware builds hardware, software and cloud for commercial drones. We have transitioned to Node.js for cloud functional test automation in 2015. The purpose of this is to unite Fullstack developers and Automation engineers to speak in the same language which is JavaScript. With a year worth of lessons learnt, we will share the challenges involved with building a full-stack test automation framework with Node.js while using the latest and greatest in JavaScript tools.

nodejsjavascriptcloud computing
Code Quality Management iOS
Code Quality Management iOSCode Quality Management iOS
Code Quality Management iOS

This document provides guidelines for code quality management in iOS projects. It discusses best practices for file and folder naming conventions using capital letter prefixes, code organization using commenting styles, handling global constants in a dedicated file, using classes and structs appropriately, following patterns like singleton, factory, and implementing memory warning handling. The document also provides tips on image assets, data models, error handling, typealias, subclassing, extensions and more.

programmingqualitycode
Portrait-Landscape layouting and
*cascading* styles
react-native-media-queries
• Works, but you may need to track rotation yourself
• Not exactly full. E.g. no difference between min-width and
min-device-width
const baseStyle = {
podorozhnikAppView: {
flexDirection: 'column',
…
export const appStyle = createStyles(
baseStyle,
maxHeight(400, {
optionsBlock: {
marginTop: 0,
…
https://twitter.com/AgileArtem
Portrait-Landscape layouting and
*cascading* styles
<View
style={appStyle.podorozhnikAppView}
onLayout={(e) => {
if(this.props.onAppLayout) {
this.props.onAppLayout({
width:
e.nativeEvent.layout.width,
height:
e.nativeEvent.layout.height
});
https://twitter.com/AgileArtem
Autostoring redux data to localStorage
import * as storage from 'redux-storage';
import createEngine from 'redux-storage-engine-
reactnativeasyncstorage';
import merger from 'redux-storage-merger-
immutablejs';
• Just works
• Mobile app only implementation
• Immutable JS was an issue here. As restoring
data was trying to overwrite the model
https://twitter.com/AgileArtem
WHAT NOT TO FOLLOW
https://twitter.com/AgileArtem

Recommended for you

Make use of Sonar for your mobile developments - It's easy and useful!
Make use of Sonar for your mobile developments - It's easy and useful!Make use of Sonar for your mobile developments - It's easy and useful!
Make use of Sonar for your mobile developments - It's easy and useful!

- Install Sonar, Sonar Runner, and the Sonar Objective-C plugin - Configure the Xcode project by adding a run-sonar.sh script and sonar-project.properties file - Run analysis by executing the run-sonar.sh script which will trigger the Sonar analysis using tools like xctool, gcovr, and oclint

iosandroidmobile
Code Review for iOS
Code Review for iOSCode Review for iOS
Code Review for iOS

Hi I’m Cris, iOS Developer in KLabCyscorpions. In this post, I want to share with you my presentation on Code Review guidelines for iOS. But, what is Code Review? According to Wikipedia: “Code Review is systematic examination (often known as peer review) of computer source code. It is intended to find and fix mistakes overlooked in the initial development phase, improving both the overall quality of software and the developers’ skills. Reviews are done in various forms such as pair programming, informal walkthroughs, and formal inspections.” Want to review code? Then First things first! For you to review code effectively, you need the basic know-how of reviewing code as both the developer and the reviewer. These slides will give some guidelines on how to think in both these roles when reviewing code.

code reviewios
How to improve code quality for iOS apps?
How to improve code quality for iOS apps?How to improve code quality for iOS apps?
How to improve code quality for iOS apps?

The deck contains a few ideas how to improve iOS apps code quality using continuous inspection and unit testing

iosios appscode quality
WebViews on the app side for the web
services
• I tried one for disqus
• Bad idea. Slow, error prone, hard to debug
and fix
https://twitter.com/AgileArtem
A note on testing
• I love automated structured testing so much that for
Jolla Sailfish OS I baked HelloWorld wizard that
includes testing of engine, UI, C++, JavaScript, whatnot.
• Started in full testing more in ReactJS/Native and..
• Nearly completely dropped in the end
• For the relatively simple UI-intensive project Redux
with its DevTools lets you identify and fix issues faster
than tests would have prevented them
• In a bigger project with collaborators and less core
research I’d use auto testing though
https://twitter.com/AgileArtem
iPad layout
• Didn’t work
• Seems to be possible, but solution I used
results in the iPhone mode
https://twitter.com/AgileArtem
Same code for React app on the web,
iOS, Android
• Yes
• No
• Maybe
• You are only going to really benefit from the
logic part only
• iOS and Android are close enough for sharing
almost everything
https://twitter.com/AgileArtem

Recommended for you

LinkedIn Mobile: How do we do it?
LinkedIn Mobile: How do we do it?LinkedIn Mobile: How do we do it?
LinkedIn Mobile: How do we do it?

A brief overview of the design, code, test and deploy model we use at LinkedIn in the mobile group to build and support multiplatform development.

html5androidmobile
Code Review
Code ReviewCode Review
Code Review

Presentation from Agile Base Camp 2 conference (Kiev, May 2010) and AgileDays'11 (Moscow, March 2011) about one of the most useful engineering practices from XP world.

engineering practicesxpagile
iOS Design to Code - Design
iOS Design to Code - DesigniOS Design to Code - Design
iOS Design to Code - Design

This course have 2 parts (Design & Code). Learning iOS dev from zero. There is many things you can do without code. 1. Define the problem you want to solve. 2. Known the basic UI component in iOS world. 3. App flow controll with navigation 4. Why we need Autolayout?

guidelinedesignautolayout
WHAT NEXT
https://twitter.com/AgileArtem
Next project: compare medicine or
alcohol prices around you. Anybody
in?
https://twitter.com/AgileArtem
Contacts
• https://podorozhnik.firebaseapp.com
• https://itunes.apple.com/ru/app/podoroznik-kal-
kulator/id1107432204
• https://play.google.com/store/apps/details?id=com.art
emmarchenko.podorozhnik
• https://twitter.com/AgileArtem
• http://github.com/amarchen
• http://www.codingsubmarine.com
• http://www.agilesoftwaredevelopment.com
https://twitter.com/AgileArtem

More Related Content

What's hot

Webdriver cheatsheets summary
Webdriver cheatsheets summaryWebdriver cheatsheets summary
Webdriver cheatsheets summary
Alan Richardson
 
Optimizing React Native views for pre-animation
Optimizing React Native views for pre-animationOptimizing React Native views for pre-animation
Optimizing React Native views for pre-animation
ModusJesus
 
Rapidly scaffold your frontend with yeoman
Rapidly scaffold your frontend with yeomanRapidly scaffold your frontend with yeoman
Rapidly scaffold your frontend with yeoman
Simon Waibl
 
Get Hip with JHipster - Colorado Springs OSS Meetup April 2016
Get Hip with JHipster - Colorado Springs OSS Meetup April 2016Get Hip with JHipster - Colorado Springs OSS Meetup April 2016
Get Hip with JHipster - Colorado Springs OSS Meetup April 2016
Matt Raible
 
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Rich Web Experie...
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Rich Web Experie...Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Rich Web Experie...
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Rich Web Experie...
Matt Raible
 
Top 8 Ruby on Rails Gems
Top 8 Ruby on Rails GemsTop 8 Ruby on Rails Gems
Top 8 Ruby on Rails Gems
Tiago E.M. Martins
 
Vuejs getting-started - Extended Version
Vuejs getting-started - Extended VersionVuejs getting-started - Extended Version
Vuejs getting-started - Extended Version
Murat Doğan
 
Introducing Playwright's New Test Runner
Introducing Playwright's New Test RunnerIntroducing Playwright's New Test Runner
Introducing Playwright's New Test Runner
Applitools
 
The Gist of React Native
The Gist of React NativeThe Gist of React Native
The Gist of React Native
Darren Cruse
 
E2E testing Single Page Apps and APIs with Cucumber.js and Puppeteer
E2E testing Single Page Apps and APIs with Cucumber.js and PuppeteerE2E testing Single Page Apps and APIs with Cucumber.js and Puppeteer
E2E testing Single Page Apps and APIs with Cucumber.js and Puppeteer
Paul Jensen
 
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx 2015
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx 2015Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx 2015
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx 2015
Matt Raible
 
End to end testing Single Page Apps & APIs with Cucumber.js and Puppeteer (Em...
End to end testing Single Page Apps & APIs with Cucumber.js and Puppeteer (Em...End to end testing Single Page Apps & APIs with Cucumber.js and Puppeteer (Em...
End to end testing Single Page Apps & APIs with Cucumber.js and Puppeteer (Em...
Paul Jensen
 
React Native
React NativeReact Native
React Native
Fatih Şimşek
 
Lo mejor y peor de React Native @ValenciaJS
Lo mejor y peor de React Native @ValenciaJSLo mejor y peor de React Native @ValenciaJS
Lo mejor y peor de React Native @ValenciaJS
Marcel Kalveram
 
Philip Shurpik "Architecting React Native app"
Philip Shurpik "Architecting React Native app"Philip Shurpik "Architecting React Native app"
Philip Shurpik "Architecting React Native app"
Fwdays
 
Spring Boot
Spring BootSpring Boot
Spring Boot
koppenolski
 
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx UK 2016
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx UK 2016Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx UK 2016
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx UK 2016
Matt Raible
 
From zero to hero with React Native!
From zero to hero with React Native!From zero to hero with React Native!
From zero to hero with React Native!
Commit University
 
Automation Abstractions: Page Objects and Beyond
Automation Abstractions: Page Objects and BeyondAutomation Abstractions: Page Objects and Beyond
Automation Abstractions: Page Objects and Beyond
TechWell
 
ForwardJS 2017 - Fullstack end-to-end Test Automation with node.js
ForwardJS 2017 -  Fullstack end-to-end Test Automation with node.jsForwardJS 2017 -  Fullstack end-to-end Test Automation with node.js
ForwardJS 2017 - Fullstack end-to-end Test Automation with node.js
Mek Srunyu Stittri
 

What's hot (20)

Webdriver cheatsheets summary
Webdriver cheatsheets summaryWebdriver cheatsheets summary
Webdriver cheatsheets summary
 
Optimizing React Native views for pre-animation
Optimizing React Native views for pre-animationOptimizing React Native views for pre-animation
Optimizing React Native views for pre-animation
 
Rapidly scaffold your frontend with yeoman
Rapidly scaffold your frontend with yeomanRapidly scaffold your frontend with yeoman
Rapidly scaffold your frontend with yeoman
 
Get Hip with JHipster - Colorado Springs OSS Meetup April 2016
Get Hip with JHipster - Colorado Springs OSS Meetup April 2016Get Hip with JHipster - Colorado Springs OSS Meetup April 2016
Get Hip with JHipster - Colorado Springs OSS Meetup April 2016
 
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Rich Web Experie...
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Rich Web Experie...Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Rich Web Experie...
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Rich Web Experie...
 
Top 8 Ruby on Rails Gems
Top 8 Ruby on Rails GemsTop 8 Ruby on Rails Gems
Top 8 Ruby on Rails Gems
 
Vuejs getting-started - Extended Version
Vuejs getting-started - Extended VersionVuejs getting-started - Extended Version
Vuejs getting-started - Extended Version
 
Introducing Playwright's New Test Runner
Introducing Playwright's New Test RunnerIntroducing Playwright's New Test Runner
Introducing Playwright's New Test Runner
 
The Gist of React Native
The Gist of React NativeThe Gist of React Native
The Gist of React Native
 
E2E testing Single Page Apps and APIs with Cucumber.js and Puppeteer
E2E testing Single Page Apps and APIs with Cucumber.js and PuppeteerE2E testing Single Page Apps and APIs with Cucumber.js and Puppeteer
E2E testing Single Page Apps and APIs with Cucumber.js and Puppeteer
 
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx 2015
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx 2015Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx 2015
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx 2015
 
End to end testing Single Page Apps & APIs with Cucumber.js and Puppeteer (Em...
End to end testing Single Page Apps & APIs with Cucumber.js and Puppeteer (Em...End to end testing Single Page Apps & APIs with Cucumber.js and Puppeteer (Em...
End to end testing Single Page Apps & APIs with Cucumber.js and Puppeteer (Em...
 
React Native
React NativeReact Native
React Native
 
Lo mejor y peor de React Native @ValenciaJS
Lo mejor y peor de React Native @ValenciaJSLo mejor y peor de React Native @ValenciaJS
Lo mejor y peor de React Native @ValenciaJS
 
Philip Shurpik "Architecting React Native app"
Philip Shurpik "Architecting React Native app"Philip Shurpik "Architecting React Native app"
Philip Shurpik "Architecting React Native app"
 
Spring Boot
Spring BootSpring Boot
Spring Boot
 
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx UK 2016
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx UK 2016Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx UK 2016
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx UK 2016
 
From zero to hero with React Native!
From zero to hero with React Native!From zero to hero with React Native!
From zero to hero with React Native!
 
Automation Abstractions: Page Objects and Beyond
Automation Abstractions: Page Objects and BeyondAutomation Abstractions: Page Objects and Beyond
Automation Abstractions: Page Objects and Beyond
 
ForwardJS 2017 - Fullstack end-to-end Test Automation with node.js
ForwardJS 2017 -  Fullstack end-to-end Test Automation with node.jsForwardJS 2017 -  Fullstack end-to-end Test Automation with node.js
ForwardJS 2017 - Fullstack end-to-end Test Automation with node.js
 

Viewers also liked

Code Quality Management iOS
Code Quality Management iOSCode Quality Management iOS
Code Quality Management iOS
Arpit Kulsreshtha
 
Make use of Sonar for your mobile developments - It's easy and useful!
Make use of Sonar for your mobile developments - It's easy and useful!Make use of Sonar for your mobile developments - It's easy and useful!
Make use of Sonar for your mobile developments - It's easy and useful!
cyrilpicat
 
Code Review for iOS
Code Review for iOSCode Review for iOS
Code Review for iOS
KLabCyscorpions-TechBlog
 
How to improve code quality for iOS apps?
How to improve code quality for iOS apps?How to improve code quality for iOS apps?
How to improve code quality for iOS apps?
Kate Semizhon
 
LinkedIn Mobile: How do we do it?
LinkedIn Mobile: How do we do it?LinkedIn Mobile: How do we do it?
LinkedIn Mobile: How do we do it?
phegaro
 
Code Review
Code ReviewCode Review
Code Review
Mikalai Alimenkou
 
iOS Design to Code - Design
iOS Design to Code - DesigniOS Design to Code - Design
iOS Design to Code - Design
Liyao Chen
 
iOS Design to Code - Code
iOS Design to Code - CodeiOS Design to Code - Code
iOS Design to Code - Code
Liyao Chen
 

Viewers also liked (8)

Code Quality Management iOS
Code Quality Management iOSCode Quality Management iOS
Code Quality Management iOS
 
Make use of Sonar for your mobile developments - It's easy and useful!
Make use of Sonar for your mobile developments - It's easy and useful!Make use of Sonar for your mobile developments - It's easy and useful!
Make use of Sonar for your mobile developments - It's easy and useful!
 
Code Review for iOS
Code Review for iOSCode Review for iOS
Code Review for iOS
 
How to improve code quality for iOS apps?
How to improve code quality for iOS apps?How to improve code quality for iOS apps?
How to improve code quality for iOS apps?
 
LinkedIn Mobile: How do we do it?
LinkedIn Mobile: How do we do it?LinkedIn Mobile: How do we do it?
LinkedIn Mobile: How do we do it?
 
Code Review
Code ReviewCode Review
Code Review
 
iOS Design to Code - Design
iOS Design to Code - DesigniOS Design to Code - Design
iOS Design to Code - Design
 
iOS Design to Code - Code
iOS Design to Code - CodeiOS Design to Code - Code
iOS Design to Code - Code
 

Similar to One code Web, iOS, Android

Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]
GDSC UofT Mississauga
 
Introduction to react native with redux
Introduction to react native with reduxIntroduction to react native with redux
Introduction to react native with redux
Mike Melusky
 
WebTest - Efficient Functional Web Testing with HtmlUnit and Beyond
WebTest - Efficient Functional Web Testing with HtmlUnit and BeyondWebTest - Efficient Functional Web Testing with HtmlUnit and Beyond
WebTest - Efficient Functional Web Testing with HtmlUnit and Beyond
mguillem
 
Frontend microservices: architectures and solutions
Frontend microservices: architectures and solutionsFrontend microservices: architectures and solutions
Frontend microservices: architectures and solutions
Mikhail Kuznetcov
 
An Introduction to Web Components
An Introduction to Web ComponentsAn Introduction to Web Components
An Introduction to Web Components
Red Pill Now
 
Introduction to web application development with Vue (for absolute beginners)...
Introduction to web application development with Vue (for absolute beginners)...Introduction to web application development with Vue (for absolute beginners)...
Introduction to web application development with Vue (for absolute beginners)...
Lucas Jellema
 
Front End Development for Back End Developers - vJUG24 2017
Front End Development for Back End Developers - vJUG24 2017Front End Development for Back End Developers - vJUG24 2017
Front End Development for Back End Developers - vJUG24 2017
Matt Raible
 
Front End Development for Back End Developers - UberConf 2017
Front End Development for Back End Developers - UberConf 2017Front End Development for Back End Developers - UberConf 2017
Front End Development for Back End Developers - UberConf 2017
Matt Raible
 
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
Zach Lendon
 
MidwestJS 2014 Reconciling ReactJS as a View Layer Replacement
MidwestJS 2014 Reconciling ReactJS as a View Layer ReplacementMidwestJS 2014 Reconciling ReactJS as a View Layer Replacement
MidwestJS 2014 Reconciling ReactJS as a View Layer Replacement
Zach Lendon
 
Professionalizing the Front-end
Professionalizing the Front-endProfessionalizing the Front-end
Professionalizing the Front-end
Jordi Anguela
 
Pain Driven Development by Alexandr Sugak
Pain Driven Development by Alexandr SugakPain Driven Development by Alexandr Sugak
Pain Driven Development by Alexandr Sugak
Sigma Software
 
React.js at Cortex
React.js at CortexReact.js at Cortex
React.js at Cortex
Geoff Harcourt
 
LvivCSS: Web Components as a foundation for Design System
LvivCSS: Web Components as a foundation for Design SystemLvivCSS: Web Components as a foundation for Design System
LvivCSS: Web Components as a foundation for Design System
Vlad Fedosov
 
Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011
Timothy Fisher
 
Untangling spring week5
Untangling spring week5Untangling spring week5
Untangling spring week5
Derek Jacoby
 
Passionate People Meetup - React vs Vue with a deepdive into Proxies
Passionate People Meetup - React vs Vue with a deepdive into ProxiesPassionate People Meetup - React vs Vue with a deepdive into Proxies
Passionate People Meetup - React vs Vue with a deepdive into Proxies
Harijs Deksnis
 
Testable client side_mvc_apps_in_javascript
Testable client side_mvc_apps_in_javascriptTestable client side_mvc_apps_in_javascript
Testable client side_mvc_apps_in_javascript
Timothy Oxley
 
Android crash course
Android crash courseAndroid crash course
Android crash course
Showmax Engineering
 
ReactJS vs AngularJS - Head to Head comparison
ReactJS vs AngularJS - Head to Head comparisonReactJS vs AngularJS - Head to Head comparison
ReactJS vs AngularJS - Head to Head comparison
500Tech
 

Similar to One code Web, iOS, Android (20)

Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]
 
Introduction to react native with redux
Introduction to react native with reduxIntroduction to react native with redux
Introduction to react native with redux
 
WebTest - Efficient Functional Web Testing with HtmlUnit and Beyond
WebTest - Efficient Functional Web Testing with HtmlUnit and BeyondWebTest - Efficient Functional Web Testing with HtmlUnit and Beyond
WebTest - Efficient Functional Web Testing with HtmlUnit and Beyond
 
Frontend microservices: architectures and solutions
Frontend microservices: architectures and solutionsFrontend microservices: architectures and solutions
Frontend microservices: architectures and solutions
 
An Introduction to Web Components
An Introduction to Web ComponentsAn Introduction to Web Components
An Introduction to Web Components
 
Introduction to web application development with Vue (for absolute beginners)...
Introduction to web application development with Vue (for absolute beginners)...Introduction to web application development with Vue (for absolute beginners)...
Introduction to web application development with Vue (for absolute beginners)...
 
Front End Development for Back End Developers - vJUG24 2017
Front End Development for Back End Developers - vJUG24 2017Front End Development for Back End Developers - vJUG24 2017
Front End Development for Back End Developers - vJUG24 2017
 
Front End Development for Back End Developers - UberConf 2017
Front End Development for Back End Developers - UberConf 2017Front End Development for Back End Developers - UberConf 2017
Front End Development for Back End Developers - UberConf 2017
 
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
 
MidwestJS 2014 Reconciling ReactJS as a View Layer Replacement
MidwestJS 2014 Reconciling ReactJS as a View Layer ReplacementMidwestJS 2014 Reconciling ReactJS as a View Layer Replacement
MidwestJS 2014 Reconciling ReactJS as a View Layer Replacement
 
Professionalizing the Front-end
Professionalizing the Front-endProfessionalizing the Front-end
Professionalizing the Front-end
 
Pain Driven Development by Alexandr Sugak
Pain Driven Development by Alexandr SugakPain Driven Development by Alexandr Sugak
Pain Driven Development by Alexandr Sugak
 
React.js at Cortex
React.js at CortexReact.js at Cortex
React.js at Cortex
 
LvivCSS: Web Components as a foundation for Design System
LvivCSS: Web Components as a foundation for Design SystemLvivCSS: Web Components as a foundation for Design System
LvivCSS: Web Components as a foundation for Design System
 
Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011
 
Untangling spring week5
Untangling spring week5Untangling spring week5
Untangling spring week5
 
Passionate People Meetup - React vs Vue with a deepdive into Proxies
Passionate People Meetup - React vs Vue with a deepdive into ProxiesPassionate People Meetup - React vs Vue with a deepdive into Proxies
Passionate People Meetup - React vs Vue with a deepdive into Proxies
 
Testable client side_mvc_apps_in_javascript
Testable client side_mvc_apps_in_javascriptTestable client side_mvc_apps_in_javascript
Testable client side_mvc_apps_in_javascript
 
Android crash course
Android crash courseAndroid crash course
Android crash course
 
ReactJS vs AngularJS - Head to Head comparison
ReactJS vs AngularJS - Head to Head comparisonReactJS vs AngularJS - Head to Head comparison
ReactJS vs AngularJS - Head to Head comparison
 

More from Artem Marchenko

Getting started with coding for Jolla Sailfish OS. 29 Mar 2014, Tampere, Finland
Getting started with coding for Jolla Sailfish OS. 29 Mar 2014, Tampere, FinlandGetting started with coding for Jolla Sailfish OS. 29 Mar 2014, Tampere, Finland
Getting started with coding for Jolla Sailfish OS. 29 Mar 2014, Tampere, Finland
Artem Marchenko
 
Getting started with coding for Jolla Sailfish OS. 22 Feb 2014, Tampere, Finland
Getting started with coding for Jolla Sailfish OS. 22 Feb 2014, Tampere, FinlandGetting started with coding for Jolla Sailfish OS. 22 Feb 2014, Tampere, Finland
Getting started with coding for Jolla Sailfish OS. 22 Feb 2014, Tampere, Finland
Artem Marchenko
 
Test driving-qml
Test driving-qmlTest driving-qml
Test driving-qml
Artem Marchenko
 
Test driving-qml
Test driving-qmlTest driving-qml
Test driving-qml
Artem Marchenko
 
Test driving QML
Test driving QMLTest driving QML
Test driving QML
Artem Marchenko
 
Misapplied Scrum pattern
Misapplied Scrum patternMisapplied Scrum pattern
Misapplied Scrum pattern
Artem Marchenko
 
Effective Software Development for the 21st century
Effective Software Development for the 21st centuryEffective Software Development for the 21st century
Effective Software Development for the 21st century
Artem Marchenko
 

More from Artem Marchenko (7)

Getting started with coding for Jolla Sailfish OS. 29 Mar 2014, Tampere, Finland
Getting started with coding for Jolla Sailfish OS. 29 Mar 2014, Tampere, FinlandGetting started with coding for Jolla Sailfish OS. 29 Mar 2014, Tampere, Finland
Getting started with coding for Jolla Sailfish OS. 29 Mar 2014, Tampere, Finland
 
Getting started with coding for Jolla Sailfish OS. 22 Feb 2014, Tampere, Finland
Getting started with coding for Jolla Sailfish OS. 22 Feb 2014, Tampere, FinlandGetting started with coding for Jolla Sailfish OS. 22 Feb 2014, Tampere, Finland
Getting started with coding for Jolla Sailfish OS. 22 Feb 2014, Tampere, Finland
 
Test driving-qml
Test driving-qmlTest driving-qml
Test driving-qml
 
Test driving-qml
Test driving-qmlTest driving-qml
Test driving-qml
 
Test driving QML
Test driving QMLTest driving QML
Test driving QML
 
Misapplied Scrum pattern
Misapplied Scrum patternMisapplied Scrum pattern
Misapplied Scrum pattern
 
Effective Software Development for the 21st century
Effective Software Development for the 21st centuryEffective Software Development for the 21st century
Effective Software Development for the 21st century
 

Recently uploaded

dachnug51 - Whats new in domino 14 .pdf
dachnug51 - Whats new in domino 14  .pdfdachnug51 - Whats new in domino 14  .pdf
dachnug51 - Whats new in domino 14 .pdf
DNUG e.V.
 
Development of Chatbot Using AI\ML Technologies
Development of Chatbot Using AI\ML TechnologiesDevelopment of Chatbot Using AI\ML Technologies
Development of Chatbot Using AI\ML Technologies
MaisnamLuwangPibarel
 
Ported to Cloud with Wing_ Blue ZnZone app from _Hexagonal Architecture Expla...
Ported to Cloud with Wing_ Blue ZnZone app from _Hexagonal Architecture Expla...Ported to Cloud with Wing_ Blue ZnZone app from _Hexagonal Architecture Expla...
Ported to Cloud with Wing_ Blue ZnZone app from _Hexagonal Architecture Expla...
Asher Sterkin
 
Independence Day Hasn’t Always Been a U.S. Holiday.pdf
Independence Day Hasn’t Always Been a U.S. Holiday.pdfIndependence Day Hasn’t Always Been a U.S. Holiday.pdf
Independence Day Hasn’t Always Been a U.S. Holiday.pdf
Livetecs LLC
 
Folding Cheat Sheet #7 - seventh in a series
Folding Cheat Sheet #7 - seventh in a seriesFolding Cheat Sheet #7 - seventh in a series
Folding Cheat Sheet #7 - seventh in a series
Philip Schwarz
 
Top 10 Tips To Get Google AdSense For Your Website
Top 10 Tips To Get Google AdSense For Your WebsiteTop 10 Tips To Get Google AdSense For Your Website
Top 10 Tips To Get Google AdSense For Your Website
e-Definers Technology
 
What is OCR Technology and How to Extract Text from Any Image for Free
What is OCR Technology and How to Extract Text from Any Image for FreeWhat is OCR Technology and How to Extract Text from Any Image for Free
What is OCR Technology and How to Extract Text from Any Image for Free
TwisterTools
 
React vs Next js: Which is Better for Web Development? - Semiosis Software Pr...
React vs Next js: Which is Better for Web Development? - Semiosis Software Pr...React vs Next js: Which is Better for Web Development? - Semiosis Software Pr...
React vs Next js: Which is Better for Web Development? - Semiosis Software Pr...
Semiosis Software Private Limited
 
MVP Mobile Application - Codearrest.pptx
MVP Mobile Application - Codearrest.pptxMVP Mobile Application - Codearrest.pptx
MVP Mobile Application - Codearrest.pptx
Mitchell Marsh
 
Wired_2.0_Create_AmsterdamJUG_09072024.pptx
Wired_2.0_Create_AmsterdamJUG_09072024.pptxWired_2.0_Create_AmsterdamJUG_09072024.pptx
Wired_2.0_Create_AmsterdamJUG_09072024.pptx
SimonedeGijt
 
ENISA Threat Landscape 2023 documentation
ENISA Threat Landscape 2023 documentationENISA Threat Landscape 2023 documentation
ENISA Threat Landscape 2023 documentation
sofiafernandezon
 
Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...
Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...
Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...
onemonitarsoftware
 
Addressing the Top 9 User Pain Points with Visual Design Elements.pptx
Addressing the Top 9 User Pain Points with Visual Design Elements.pptxAddressing the Top 9 User Pain Points with Visual Design Elements.pptx
Addressing the Top 9 User Pain Points with Visual Design Elements.pptx
Sparity1
 
ThaiPy meetup - Indexes and Django
ThaiPy meetup - Indexes and DjangoThaiPy meetup - Indexes and Django
ThaiPy meetup - Indexes and Django
akshesh doshi
 
Safe Work Permit Management Software for Hot Work Permits
Safe Work Permit Management Software for Hot Work PermitsSafe Work Permit Management Software for Hot Work Permits
Safe Work Permit Management Software for Hot Work Permits
sheqnetworkmarketing
 
Shivam Pandit working on Php Web Developer.
Shivam Pandit working on Php Web Developer.Shivam Pandit working on Php Web Developer.
Shivam Pandit working on Php Web Developer.
shivamt017
 
dachnug51 - HCL Sametime 12 as a Software Appliance.pdf
dachnug51 - HCL Sametime 12 as a Software Appliance.pdfdachnug51 - HCL Sametime 12 as a Software Appliance.pdf
dachnug51 - HCL Sametime 12 as a Software Appliance.pdf
DNUG e.V.
 
一比一原版英国牛津大学毕业证(oxon毕业证书)如何办理
一比一原版英国牛津大学毕业证(oxon毕业证书)如何办理一比一原版英国牛津大学毕业证(oxon毕业证书)如何办理
一比一原版英国牛津大学毕业证(oxon毕业证书)如何办理
avufu
 
Google ML-Kit - Understanding on-device machine learning
Google ML-Kit - Understanding on-device machine learningGoogle ML-Kit - Understanding on-device machine learning
Google ML-Kit - Understanding on-device machine learning
VishrutGoyani1
 
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
Roshan Dwivedi
 

Recently uploaded (20)

dachnug51 - Whats new in domino 14 .pdf
dachnug51 - Whats new in domino 14  .pdfdachnug51 - Whats new in domino 14  .pdf
dachnug51 - Whats new in domino 14 .pdf
 
Development of Chatbot Using AI\ML Technologies
Development of Chatbot Using AI\ML TechnologiesDevelopment of Chatbot Using AI\ML Technologies
Development of Chatbot Using AI\ML Technologies
 
Ported to Cloud with Wing_ Blue ZnZone app from _Hexagonal Architecture Expla...
Ported to Cloud with Wing_ Blue ZnZone app from _Hexagonal Architecture Expla...Ported to Cloud with Wing_ Blue ZnZone app from _Hexagonal Architecture Expla...
Ported to Cloud with Wing_ Blue ZnZone app from _Hexagonal Architecture Expla...
 
Independence Day Hasn’t Always Been a U.S. Holiday.pdf
Independence Day Hasn’t Always Been a U.S. Holiday.pdfIndependence Day Hasn’t Always Been a U.S. Holiday.pdf
Independence Day Hasn’t Always Been a U.S. Holiday.pdf
 
Folding Cheat Sheet #7 - seventh in a series
Folding Cheat Sheet #7 - seventh in a seriesFolding Cheat Sheet #7 - seventh in a series
Folding Cheat Sheet #7 - seventh in a series
 
Top 10 Tips To Get Google AdSense For Your Website
Top 10 Tips To Get Google AdSense For Your WebsiteTop 10 Tips To Get Google AdSense For Your Website
Top 10 Tips To Get Google AdSense For Your Website
 
What is OCR Technology and How to Extract Text from Any Image for Free
What is OCR Technology and How to Extract Text from Any Image for FreeWhat is OCR Technology and How to Extract Text from Any Image for Free
What is OCR Technology and How to Extract Text from Any Image for Free
 
React vs Next js: Which is Better for Web Development? - Semiosis Software Pr...
React vs Next js: Which is Better for Web Development? - Semiosis Software Pr...React vs Next js: Which is Better for Web Development? - Semiosis Software Pr...
React vs Next js: Which is Better for Web Development? - Semiosis Software Pr...
 
MVP Mobile Application - Codearrest.pptx
MVP Mobile Application - Codearrest.pptxMVP Mobile Application - Codearrest.pptx
MVP Mobile Application - Codearrest.pptx
 
Wired_2.0_Create_AmsterdamJUG_09072024.pptx
Wired_2.0_Create_AmsterdamJUG_09072024.pptxWired_2.0_Create_AmsterdamJUG_09072024.pptx
Wired_2.0_Create_AmsterdamJUG_09072024.pptx
 
ENISA Threat Landscape 2023 documentation
ENISA Threat Landscape 2023 documentationENISA Threat Landscape 2023 documentation
ENISA Threat Landscape 2023 documentation
 
Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...
Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...
Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...
 
Addressing the Top 9 User Pain Points with Visual Design Elements.pptx
Addressing the Top 9 User Pain Points with Visual Design Elements.pptxAddressing the Top 9 User Pain Points with Visual Design Elements.pptx
Addressing the Top 9 User Pain Points with Visual Design Elements.pptx
 
ThaiPy meetup - Indexes and Django
ThaiPy meetup - Indexes and DjangoThaiPy meetup - Indexes and Django
ThaiPy meetup - Indexes and Django
 
Safe Work Permit Management Software for Hot Work Permits
Safe Work Permit Management Software for Hot Work PermitsSafe Work Permit Management Software for Hot Work Permits
Safe Work Permit Management Software for Hot Work Permits
 
Shivam Pandit working on Php Web Developer.
Shivam Pandit working on Php Web Developer.Shivam Pandit working on Php Web Developer.
Shivam Pandit working on Php Web Developer.
 
dachnug51 - HCL Sametime 12 as a Software Appliance.pdf
dachnug51 - HCL Sametime 12 as a Software Appliance.pdfdachnug51 - HCL Sametime 12 as a Software Appliance.pdf
dachnug51 - HCL Sametime 12 as a Software Appliance.pdf
 
一比一原版英国牛津大学毕业证(oxon毕业证书)如何办理
一比一原版英国牛津大学毕业证(oxon毕业证书)如何办理一比一原版英国牛津大学毕业证(oxon毕业证书)如何办理
一比一原版英国牛津大学毕业证(oxon毕业证书)如何办理
 
Google ML-Kit - Understanding on-device machine learning
Google ML-Kit - Understanding on-device machine learningGoogle ML-Kit - Understanding on-device machine learning
Google ML-Kit - Understanding on-device machine learning
 
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
 

One code Web, iOS, Android

  • 1. One code Web, iOS, Android Artem Marchenko, 09 Feb 2017 https://twitter.com/AgileArtem
  • 2. Artem https://twitter.com/AgileArtem • Buzzwords: – Interactive images, Qt/QML, Jolla SailfishOS, Agile- shmagile, TDD, product management, JavaScript, Java, whatever works, prototyping, startups, paragliding, salsa dancing, ReactJS, React Native – http://www.thinglink.com • Twitter: @AgileArtem
  • 9. App structure https://twitter.com/AgileArtem index.js index.ios.js index.androi d.js native/ AppContainer AppContainer Other web UI components Other native UI components web reducers common reducer native reducers native- specific reducer (e.g. orientation change)
  • 10. Project structure - src - native - components - styles - util - web - components - test - web - components https://twitter.com/AgileArtem
  • 12. Google Analytics: Mobile react-native-google-analytics-bridge • Worked as simple as const GA = require('react-native-google- analytics-bridge'); const GA_TRACKER_ID = Platform.OS === 'ios' ? 'UA-76217125-6' : 'UA-76217125-5'; GA.setTrackerId( GA_TRACKER_ID ); GA.trackEvent('general', 'app: activated'); https://twitter.com/AgileArtem
  • 13. Mobile Ads: Google AdMob react-native-admob Converting default React Native iOS project to pods/workspace can be challenging, but then the usage is super-simple import { AdMobBanner } from 'react-native-admob’; <AdMobBanner style={appStyle.bottomBanner} bannerSize={"smartBannerPortrait"} adUnitID={"ca-app-pub- 6248714847105943/1045980532"} didFailToReceiveAdWithError={this.bannerError} /> https://twitter.com/AgileArtem
  • 14. Redux and Redux Dev Tools • Redux (or Flux if you like) could be the best part of React practice actually https://twitter.com/AgileArtem
  • 16. Redux. Good parts • Redux is awesome. • Debugging dumb structures, tracing changes message by message and time traveling is simple and efficient • Definitely use Redux Dev Tools (e.g. as a Chrome extension) https://twitter.com/AgileArtem
  • 17. Redux. Complexities • Making Redux, routing and Local Storage like each other was pain in the bottom and rain dances – There is logic certainly, but you’ll either need to learn a lot of it or dance around and hope – Or clone my solution, but be aware it’s coding by accident • Modifying several files in the different parts of code base (action creator, reducer, handler) for just passing same stuff around is a lot of error prone typing. – Consider ducks approach – all the code about one bit of functionality together https://twitter.com/AgileArtem
  • 18. Redux: more mistakes • Do not store UI state (screen size) or computable data (final price) in the model • Use memoizable redux selectors for it (e.g. reselect). – Looks the same, feels the same, but you do not pollute the model with the data to keep in sync https://twitter.com/AgileArtem
  • 19. Immutable.JS const calcedPaymentState = preUpdatedState.setIn(['paymentOptions', 'eTicket', 'totalCost'], newETicketCost) • State that’s guaranteed to be immutable is way easier to debug • But not all the components are ready for it out of the box and want to see plain JS objects (I had issues with browserHistory I think) • And on a small research-like app you might not see benefits of immutability yet while you might hit the integration obstacles https://twitter.com/AgileArtem
  • 20. Routing and browse and sharable urls import { Router, Route, IndexRoute, browserHistory, useRouterHistory } from 'react- router'; import { routerMiddleware, syncHistoryWithStore, routerReducer, push } from 'react- router-redux'; import createBrowserHistory from 'history/lib/createBrowserHistory'; const queryString = require('query-string'); const history = syncHistoryWithStore(browserHistory, store, {selectLocationState: (state) => { const r = state.getIn(['metadata', 'routing']); return r || '/'; }}); const routedState = state.setIn(['metadata', 'routing'], { locationBeforeTransitions: { pathname: '/', search: searchString, query: {}, hash: '' } }) https://twitter.com/AgileArtem
  • 21. Routing and browse and sharable urls • React Router is okay, browserHistory is okay, storing routing in a storage is okay, but making it work together is tough – Especially if some more middleware is involved: Redux Dev Tools • I used query string as the initial boss that commanded the state that was setting up the routing – Then state updates are changing the browserHistory-specific keys. browserHistory was updating the address bar • And there are WebKit bugs features. You cannot update URL too often • Use my solution if you just want things to work – Yet it’s programming by accident https://twitter.com/AgileArtem
  • 22. Structuring controls for testing • Simple, isolates core part for testability, but I didn’t use much testing in the end – Started from awesome tutorial by a Finn @teropahttp://teropa.info/blog/2015/09/10/full-stack- redux-tutorial.html export class InputBlock extends React.Component { constructor(props) { … export const InputBlockContainer = connect( mapStateToProps, actionCreators )(InputBlock); https://twitter.com/AgileArtem
  • 23. Using template for injecting stuff into the web root var HtmlWebpackPlugin = require('html-webpack-plugin'); … new HtmlWebpackPlugin({ inject: false, template: 'src/web/index.ejs', googleAnalytics: { trackingId: 'UA-76217125-4', pageViewOnLoad: true }, … <% if (htmlWebpackPlugin.options.googleAnalytics.trackingId) { %> ga('create', '<%= htmlWebpackPlugin.options.googleAnalytics.trackingId%>', 'auto'); https://twitter.com/AgileArtem
  • 24. Title/Nav bar react-native-navbar • Surprisingly difficult to do in crosplatform way • react-native-navbar works, but don’t expect to fool a maniacal designer https://twitter.com/AgileArtem
  • 25. Portrait-Landscape layouting and *cascading* styles react-native-media-queries • Works, but you may need to track rotation yourself • Not exactly full. E.g. no difference between min-width and min-device-width const baseStyle = { podorozhnikAppView: { flexDirection: 'column', … export const appStyle = createStyles( baseStyle, maxHeight(400, { optionsBlock: { marginTop: 0, … https://twitter.com/AgileArtem
  • 26. Portrait-Landscape layouting and *cascading* styles <View style={appStyle.podorozhnikAppView} onLayout={(e) => { if(this.props.onAppLayout) { this.props.onAppLayout({ width: e.nativeEvent.layout.width, height: e.nativeEvent.layout.height }); https://twitter.com/AgileArtem
  • 27. Autostoring redux data to localStorage import * as storage from 'redux-storage'; import createEngine from 'redux-storage-engine- reactnativeasyncstorage'; import merger from 'redux-storage-merger- immutablejs'; • Just works • Mobile app only implementation • Immutable JS was an issue here. As restoring data was trying to overwrite the model https://twitter.com/AgileArtem
  • 28. WHAT NOT TO FOLLOW https://twitter.com/AgileArtem
  • 29. WebViews on the app side for the web services • I tried one for disqus • Bad idea. Slow, error prone, hard to debug and fix https://twitter.com/AgileArtem
  • 30. A note on testing • I love automated structured testing so much that for Jolla Sailfish OS I baked HelloWorld wizard that includes testing of engine, UI, C++, JavaScript, whatnot. • Started in full testing more in ReactJS/Native and.. • Nearly completely dropped in the end • For the relatively simple UI-intensive project Redux with its DevTools lets you identify and fix issues faster than tests would have prevented them • In a bigger project with collaborators and less core research I’d use auto testing though https://twitter.com/AgileArtem
  • 31. iPad layout • Didn’t work • Seems to be possible, but solution I used results in the iPhone mode https://twitter.com/AgileArtem
  • 32. Same code for React app on the web, iOS, Android • Yes • No • Maybe • You are only going to really benefit from the logic part only • iOS and Android are close enough for sharing almost everything https://twitter.com/AgileArtem
  • 34. Next project: compare medicine or alcohol prices around you. Anybody in? https://twitter.com/AgileArtem
  • 35. Contacts • https://podorozhnik.firebaseapp.com • https://itunes.apple.com/ru/app/podoroznik-kal- kulator/id1107432204 • https://play.google.com/store/apps/details?id=com.art emmarchenko.podorozhnik • https://twitter.com/AgileArtem • http://github.com/amarchen • http://www.codingsubmarine.com • http://www.agilesoftwaredevelopment.com https://twitter.com/AgileArtem