Dev Blog: How We Chose Our Stack – MHacks

Dev Blog: How We Chose Our Stack  #react #nodejs #tech #docker #hackathons #reactjs

  • It had seen years of changes brought in from different tech teams and contributors, last-moment fixes to prevent catastrophic events moments before the hackathon started, and a general lack of consistency.
  • Suffice to say, it was a hodge-podge of things we needed without enough time to implement them.Over the life of MHacks, we’ve seen about 5 completely different tech stacks for the website/backend, 3 different apps for either iOS or Android, and a few extraneous repos along the way (and for the record, those numbers are probably low-balling it).
  • We also use Docker for everything DevOps, including setting up our development environments, so everyone on the team is on the same page.DockerBy using Docker, we were also able to simplify deployments to the point where we can deploy through a simple Slack command.
  • (And speaking of Docker, I’ll be giving a tech talk at MHacks X about all things Docker, so be sure to drop by if you’re interested!)
  • In combination with both of those passing, we require Pull Requests to go through multiple reviews to make sure things will work the way they should.A Community-Friendly StackIn my opinion though, the best part about this stack is that everything is customizable.

Hello World! My name is Antonio and I am a Pharmaceutical Sciences major (yes, you read that right) at the University of Michigan. On the MHacks Core Team, I act as sassadmin — or rather sysadmin …
Continue reading “Dev Blog: How We Chose Our Stack – MHacks”

Meteor Melbourne 39: The power in cross-platform web applications

  • Continuing on from his last presentation, David, based on his real-world experience with mobile Meteor applications at scale will take a deep dive into mobile application development with Meteor.
  • Steffan Ianigro and Joel Tankard from GROW Super will discuss the challenges they faced when creating a top ranking mobile app using Meteor + React on the front-end and a centralised REST API as the back-end.
  • They will cover topics on consistency between different device types, designing interactive components with React & D3 and the underlying design decisions that create consistency throughout the app.

6:00 PM – Meetup kicks off
6:30 PM – David Baxter
Continuing on from his last presentation, David, based on his real-world experience with mobile Meteor ap
Continue reading “Meteor Melbourne 39: The power in cross-platform web applications”

Expo SDK v19.0.0 is now available – Exposition

Expo SDK v19.0.0 is now available – Exposition  #reactjs #reactnative @expo_io

  • JavaScriptCore on Android gets a big updateThe version of JavaScriptCore (JSC) built into upstream React Native is currently (r174650) three years old and missing many features that are available on iOS already, such as native async/await support, ES6 Symbols, and native TypedArray (which works efficiently with Expo Graphics).
  • A friendly reminder: you should probably use your device most of the time.Access QR scanner from in-app menu on iOSWhen you shake your device to open the developer menu when you have a project open, it now includes an option to let you jump to the QR scanner screen.Set up Universal Links for expo.ioNavigating to will open the app directly into Expo if it is installed now.Developer toolsEnabled –non-interactive for exp login.
  • We will be adding a guide to the Expo documentation for this shortly.Customize permissions required by Android standalone appsA common request from developers building Android apps with Expo is the ability to customize which permissions are requested at install-time.
  • App developers should respect this and only request the minimal permissions that the app requires.In Expo SDK 19 you can select the permissions using app.json, see the full documentation.BugfixesIt’s hard to document all of the small fixes that go into each release, but here are some of the highlights.General fixesContacts API is more uniform on iOS and AndroidAPI server and XDE agree about username formatting requirementsDocumentation search is fixed on mobileAndroid standalone app names can now contain ‘’, ‘’, ‘’, “‘“, ‘“‘Audio fixes- When preparing a Recording, you can pass an optional settings dictionary to customize the format / extension / bitrate / quality / encoding, et cetera.
  • Upgrading your appHere’s how to upgrade your app to Expo SDK 19.0.0 from 18.0.0:Close XDE or your exp CLI serverIn app.json (formerly exp.json), change sdkVersion to “19.0.0”In package.json, change these dependencies:- react-native to expo to “^19.0.0”- react did not change from SDK 18- jest-expo to “~19.0.0” (if you use it)- sentry-expo to “~1.6.0” (if you use it)Delete your project’s node_modules directory and run npm installagain (or use yarn, we love yarn)Reopen your project in XDE and press “Restart” to clear the packager cache, or run exp start -c if you use use exp.Update the Expo app on your phones from the App Store / Play Store.

I am pleased to announce the release of Expo SDK v19.0.0. It is based off the recently released React Native 0.46, “June”. Our previous SDK, v18.0.0, is based off 0.45, “May”. The version of…
Continue reading “Expo SDK v19.0.0 is now available – Exposition”

Maximizing Debuggability with Redux – LogRocket

Making #Redux apps easier to debug #reactjs #webdev via @LogRocketJS

  • By using front end logging tools like LogRocket, developers can easily understand and fix tricky bugs in production by reviewing the actions and state changes leading up to a bug.While this information is immediately useful in any Redux app, there is a lot more we can achieve by architecting an app with logging in mind.
  • When debugging issues, we can dig into this state object to see information on in-flight requests, queryCount (if we’re polling on a query), and timings.Storing this information in Redux is critical, since it puts full context on all network activity in the Redux logs.Rolling your own data fetching “framework”If you’d prefer a simpler approach, you can roll your own data fetching “framework” by simply dispatching explicit actions when querying and receiving data from the network.For example, lets say we’re building a blogging app.
  • This would then update state appropriately to:postsQuery: { url: ‘api.blog.com/posts’, isPending: true, data: […],}This example is far from thorough, but the idea is that by being explicit with Redux actions for each part of the request lifecycle, it becomes easy to debug any potential race condition or network error.Handling other sources of non-determinismIn addition to network fetching, there are lots of other sources of non-determinism that can cause bugs.
  • For example:myWebSocket.onmessage = function (event) { store.dispatch({ type: ‘BLOG_POST_UPDATE_RECEIVED’, payload: event, } }That way, when looking at the Redux logs for an error or user-reported issue, we can see all the data that was received over the websocket and, crucially, relate it in time to other redux actions and network requests.Local StorageOften, an app needs to read from local storage when it first starts up.
  • Once you get the library set up, you’ll see a new key in your Redux store called routing with information on the current router state.In addition, react-router-redux dispatches actions like @@router/LOCATION_CHANGE when its state changes.Also of note is that using react-router-redux lets you rewind router state when time-traveling in redux-devtools, since its state its state is derived from the state in Redux.A note about local vs Redux stateI don’t want to get into the debate on local vs Redux state here, but production Redux logging does change the calculus of this decision in some cases.

In my last blog post, Redux Logging in Production, I discussed one of the most important benefits of using Redux — debuggability. By using front end logging tools like LogRocket, developers can…
Continue reading “Maximizing Debuggability with Redux – LogRocket”

Developing React Native Upon Native App (React Native Portland meetup) // Speaker Deck

  • A talk about how we developed React Native upon Native app, especially from Android stand point.
  • how our architecture looks like and key components to make a hybrid app work

    2.

  • How the team changed by developing a hybrid app

A talk about how we developed React Native upon Native app, especially from Android stand point.
There are 3 topics:
1. how our architecture looks like and key components to make a hybrid app work
2. Developing and Testing flow
3. How the team changed by developing a hybrid app
Continue reading “Developing React Native Upon Native App (React Native Portland meetup) // Speaker Deck”

Sharing stateful UI logic in React apps using Render Callback components

Sharing stateful UI logic in React apps using Render Callback components



#ReactJS

  • We have three components: an Accordion , Modal , and Thumbnail .
  • We could write each of them as a stateful class component with the same wrapping code, but since they have the same state setup – let’s share it!
  • Let’s abstract the state into a Toggle component (a Render Callback).
  • Now components that use Toggle will have access to their own isOpen and handleToggleClick arguments without having to wire up the state code.
  • The instances of Toggle (Accordion , Modal , and Thumbnail ) can just be stateless function components.

A few examples of abstracting shared logic across multiple components using the Render Callback pattern (aka Function as Child components).
Continue reading “Sharing stateful UI logic in React apps using Render Callback components”

Use react native in a different port – Humberto Suastegui – Medium

Use react native in a different port  #reactnative #react #reactjs

  • Use react native in a different portUsing React 16 and React Native 0.45:”dependencies”: { “react”: “16.0.0-alpha.12”, “react-native”: “^0.45.1″}To start the packager in a different port, add to the package.json:”scripts”: { “start”: “react-native start –port 9988”}Run the packager with npm start and check that the bundles are available in the new IOSOpen the project.xcodeproj in XcodeOpen RCTBundleURLProvider.m and replace the port 8081Open RCTPackagerConnection.m and replace the port 8081Open RCTWebSocketExecutor.m and replace the port 8081Remove the start packager step from the Build Phases in React.xcodeproj by clicking the cross.Finally, update the build navigate to Product Scheme Edit Scheme.
  • Untick Parallelize build and move React before the project.Finally, run the app in the simulator.For AndroidOpen the application in Android Studio and run the app in the emulator.
  • Once the emulator is running press CMD + m (Mac) or CTRL + m (Windows).
  • Select Dev Settings and then Debug server host port for device.
  • Enter the url with the new port.Finally CMD + R or CTRL + R and the application should reload with the new bundle.In both cases the react-native packager should be running in the command line before the Xcode or Android Studio build.

Finally, update the build navigate to Product > Scheme > Edit Scheme. Select build from the side bar, click the plus icon and add React from the list. Untick Parallelize build and move React before…
Continue reading “Use react native in a different port – Humberto Suastegui – Medium”