Upload File

with react nativetry to keep everyone satisfied. what makes a good dx? stability function ... async...

  • Home
  • Documents
  • with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and
69
World class experience with React Native

Upload: others

Post on 17-Jun-2020

1 views

Category:

Documents


0 download

Report

TRANSCRIPT

Page 1: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

World class experiencewith React Native

Page 2: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

Michał Chudziak

michal_chudziak mike866 michalchudziak

Page 3: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

The challenge

Page 4: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

Mobile appwritten in React Native

performant two-way infinite lists

components shared between web and mobile

native video players

native driven animations

phone & tablet support

Chromecast integration

many more…

Page 5: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

How to make this kind of app with React Native?

Page 6: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

Work close to your team

Page 7: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

“It is literally true that you can succeed best and quickest by helping

others to succeed.” ~ Napoleon Hill

Page 8: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

Try to keep everyone satisfied

Page 9: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

What makes a good DX?

Stability Function

EasinessClarity

Page 10: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

It’s much more than this

Page 11: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

Cooperate with QA team,

Page 12: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

review each other’s code…

Page 13: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

…and use nice tools!

Page 14: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

GraphQLholy grail of frontend development

Page 15: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

Queries and mutations

query FavoriteClub { favorite_club { id background_color color_opacity crest { token } name { short } } }

mutation SetFavClub($club: Club!) { set_fav_club(club: $club) { id background_color color_opacity crest { token } name { short } } }

Page 16: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

How it plays with React Native?

Page 17: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

Perfectthanks to react-apollo

Page 18: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

react-apolloconst withGraphql = graphql(QUERY, { skip: ({ localData }) => localData.loading || localData.error, props: ({ data }) => ({ error: data.error, loading: data.loading, userConfig: data.userConfig, }), options: ({ shouldPoll, userId }) => ({ pollInterval: shouldPoll ? 60000 : 0, variables: { userId, }, }), });

export default compose(withLocalData, withGraphql)(FollowStar);

Page 19: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

Why react-apollo?

simplicity

composability

universality

understandability

extensibility

amazing plugin

system

"apollo-cache-inmemory": “1.1.7", "apollo-cache-persist": "0.1.1", "apollo-client": "2.2.3", "apollo-link": "1.2.1", "apollo-link-batch-http": "1.0.5", "apollo-link-dedup": "1.0.6", "apollo-link-error": "1.0.5", "apollo-link-http": "1.5.3", "apollo-link-persisted-queries": "0.2.0", "apollo-link-state": "0.3.1",

Page 20: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

Speaking of plugins

Page 21: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

You can use them to control things like network requests,

caching and…

Page 22: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

… the state management!

Page 23: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

apollo-link-stateimport { withClientState } from 'apollo-link-state';

ApolloLink.from([ withClientState({ // Same cache as ApolloClient cache, resolvers: { Mutation: { update_local_state: async (_: any, args: Object) => { await setLocalData(args);

return null; }, }, Query: { local_state: async () => await getLocalData(), }, }, }), ]);

Page 24: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

Now you can use this simple mutation and query in your

components

{ local_state @client }

{ update_local_state(userId: 1) @client { local_state } }

Page 25: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

Turns out you don’t need Redux or MobX at all

Page 26: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

Haulfeel the power of a webpack

Page 27: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

What’s haul?

metro bundler replacement

easy access to webpack ecosystem

no watchman needed

HMR

Haul is a drop-in replacement for react-native CLI built on open tools like Webpack. It can act as a development server

or bundle your React Native app for production.

Page 28: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

Haul

Page 29: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

Picking a good tools can save you a lot of time

Page 30: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

It’s also worth to automate some processes

Page 31: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

Continuous Integration & Continuous Deploymentfrom GitHub to your testers with one click

Page 32: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

CircleCI 2.0

Page 33: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

How to set it up for react-native?

Page 34: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

js_env: &js_env working_directory: ~/darwin docker: - image: circleci/node:latest

Create different environments

JavaScript

Page 35: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

ios_env: &ios_env working_directory: ~/darwin/ios macos: - xcode: 9.3.0

Create different environments

iOS

Page 36: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

android_env: &android_env working_directory: ~/darwin/android docker: - image: farwayer/react-native

Create different environments

Android

Page 37: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

You can use CircleCI (or any other CI system) to perform

some code quality checks

Page 38: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

What to check?

Page 39: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

lint: <<: *js_env steps: - attach_workspace: at: ~/darwin - run: yarn eslint

ESLint

You can run the linter to make sure a code in the PR matches your styleguide

Page 40: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

flow: <<: *js_env steps: - attach_workspace: at: ~/darwin - run: yarn flow

Flow

Static type checking helps you fetch a lot of bugs in early stage

Page 41: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

unit-tests: <<: *js_env steps: - attach_workspace: at: ~/darwin - run: yarn test

Jest

Unit test are very important, especially while working in a bigger team

Page 42: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

danger: <<: *js_env steps: - attach_workspace: at: ~/darwin - run: yarn danger

Danger

Danger helps you codify your teams norms, leaving humans to think only about

harder problems

Page 43: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

DetoxGray box end-to-end testing and

automation librarye2e-ios: <<: *ios_env steps: - attach_workspace: at: ~/darwin - run: name: Load Detox dependencies command: | brew update brew tap wix/brew brew install --HEAD applesimutils yarn global add detox-cli - run: yarn e2e:ios:release

Page 44: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

Check blog.callstack.com for more information about setting up these

tools in your project

Page 45: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

If every test passes and PR gets accepted

Page 46: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

We can merge it to the master

Page 47: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

This is where we run beta deployment tasks

Page 48: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

Fastlane

Page 49: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

Fastlane is OSS platform which lets you automate every aspect of

deployment flow

Page 50: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

Code signing

match( type: "adhoc", force_for_new_devices: true, app_identifier: [ "com.yourorg.app.NotificationService", "com.yourorg.app" ] )

"

Page 51: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

Building the app

gym( scheme: "darwin", silent: true, clean: true, sdk: “iphoneos11.3", export_method: "ad-hoc", )

iOS Android

gradle( task: "assembleRelease", properties: { 'versionName' => package["version"] 'versionCode' => ENV["BUILD_NUM"] } )

Page 52: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

Uploading to Appcenter

appcenter_upload( api_token: "xxxxxxxxxxxxxxxxxxxxxxxxxxx", owner_name: "mike866", group: "Alpha Testers", app_name: "Darwin", // IOS SPECIFIC FIELDS ipa: lane_context[SharedValues::IPA_OUTPUT_PATH], dsym: lane_context[SharedValues::DSYM_OUTPUT_PATH], // ANDROID SPECIFIC FIELDS apk: lane_context[SharedValues::GRADLE_APK_OUTPUT_PATH], )

Page 53: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

Sending a build to the slack

slack( channel: "#releases", username: "Release Bot", icon_url: “https://avatars.github.com/u/1111?s=48&v=4", message: "<https://install.appcenter.ms/users/mike866/apps/ Darwin/releases/#{id}/|Android Releases> \n🚀 Release number: #{id}", )

https://install.appcenter.ms/users/mike866/apps/
Page 54: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

The power of React Nativetake advantage of mixed JS and Native worlds

Page 55: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

Share things between the platforms

Page 56: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

We use npm packages to share between web and mobile

Page 57: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

You can reuse a lot of stuff between the platforms

UI components

Flow typings

Graphql queries and mutations

Unit tests

Utilities

Helpers

Page 58: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

Do it wisely, don’t force universality

Page 59: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

In the end we are working with native apps

Page 60: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

Use the native IDEs

Page 61: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

They provide a lot of nice tools

Page 62: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

You can debug your UI

Page 63: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

Even in Android 😉

Page 64: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

Also, there are some useful performance measuring tools such

as

Page 65: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

Instruments in Xcode

Page 66: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

and the Android Profiler

Page 67: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

Combining all of these can help you achieve the success

Page 68: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

Thanks for listening!

Page 69: with React NativeTry to keep everyone satisfied. What makes a good DX? Stability Function ... async => await getLocalData(), }, }, }), ]); Now you can use this simple mutation and

https://blog.callstack.com/continuous-delivery-integration-for-everyone-82d596cec680

https://blog.callstack.com/develop-react-native-apps-like-a-pro-aff7833879f0


Async-await best practices in 10 minutes

Async/Await: TPL & Message Pumps

Async/Await Best Practices

C# 5 async-await (for EastBay.NET)

Sync vs. Async programming, Tasks, C# 5 async and await, WinRT async operations George Georgiev Telerik Corporation Technical Trainer itgeorge.net

CSP in Javascript - Lambda Days · Hard to compose Mutexes Semaphores Atomic operations...and a lot more SOLUTIONS. ... Async async function publish() {try {const product = await

Click async Task LoadSettingsAsync() { await IO.Network.DownloadAsync(path); } async void Button1_Click(){ await LoadSettingsAsync(); UpdateView();

Asynchronous Programming (Async dan Await) pada C# 6€¦ · async dan await sehingga memudahkan kita dalam membuat pemograman Asynchronous. Step By Step Menjadi Programmer Handal

Promises - Cornell University•parallel: happening at the same time ... async/await in JavaScript and .NET, java.util.concurrent.Future, Clojure, Scala OCamlAsyncand Lwt (and many

Best Practices for Using async and await

Falling in love with async await in love with async await.pdf · Falling in love with async await Atishay Jain Agenda About me The async-await paradigm A

PowerPoint Presentationandywigleyblog.azurewebsites.net/wp-content/... · C# 5.0 includes the async and await keywords to ease writing of asynchronous code In Windows Store Apps,

Javascript async / await Frontend-IL

Bonus: ES8 Async& Await - GitHub PagesAJAX, the Async/Await Style 9. Outline •ES6 Promises •ES8 Async& Await •Pitfalls 10. Pitfall #1: Mixing Callbacks/Promises •Choose one

Async Programming WITH ASYNC TASK

ConcurrentSystemProgrammingwithEffect HandlersMulticore OCaml extends OCaml with the ability to declare user-defined effects with the help of the effect keyword. Since async, await

Async/Await: NServiceBus v6 API Update

MobConf - session on C# async-await on 18june2016 at Kochi

Async await...oh wait!

Nimbudocs Editor 3.1.4427 Beta11 Manual, Manual · 2.4 Using Async / Await In browsers that support asynchronous programming with the await keyword and async functions, you can also

Async/Sync and Sync/Async Bridge Scenarios · Async/Sync and Sync/Async Bridge Scenarios Configuring Async/Sync Bridge and Sync/Async Bridge without BPM

CTU June 2011 - C# 5.0 - ASYNC & Await

AsyncIOin Production War Stories€¦ · async/await keywords introduced with Python 3.5 asynchronous iteration, asynchronous context managers • December 23rd2016 [3.6] (stable)

Async and Await on the Server

NET Languages and its Construct€¦ · enhancement actually introduced two new contextual keywords, namely async and await to work with async code blocks. The keywords help you

Server-side Kotlin with Coroutines · •async/await asyncfun loadMargin(account: Account): Task But how? •Callbacks •Futures/Promises/Reactive •async/await

The Talk you’ve been .await-ing for€¦ · Async/await is simpler syntax for Futures* A Future represents a value that will exist sometime in the future. Let’s build a future!

BIM313 –Advanced Programming Techniquesceng.eskisehir.edu.tr/mkilicarslan/BIM313/icerik/02 - Variables and... · add ascending async await by descending dynamic equals from get

Tornado Documentationgnetna.com/books/Python tornado.pdf · Python 3.5: async and await Python 3.5 introduces the asyncand awaitkeywords (functions using these keywords are also called

“Parallel Programming with Async and Await ”

Programming in C# Jump Startdownload.microsoft.com/download/7/7/E/77EDAF30-7021-4190... · 2018-10-15 · •Async and await simplify asynchronous programming. •Async and await

Async await

"Synchronous" vs. Asynchronous programming, Tasks, C# 4.5 features async and await Telerik Academy Plus Concurrent C#

Async with C# 5sddconf.com/brands/sdd/library/C_Sharp_Async_Await.pdf · async and await async method must return void or a Task async method should include an await await

PTXug - Await/Async - Talks #1