My experience with React 16

  • If you have a React 15.5 app which doesn’t use deprecated features and doesn’t throw errors, then React 16 just works!
  • One of my favorite things about React is that it gives me access to a great library of open-source components.
  • And thanks to the stability of React’s API, I haven’t needed to upgrade many of these components… until now.
  • In previous versions of React, throwing exceptions within event handlers would have unpredictable results.
  • While React’s API hasn’t changed much, it has an entirely new engine under the hood called React Fiber.

Now I don’t want to waste your time with another “What is React 16?”; the official blog is already very informative. But what I can give you is the story of my experience this week, when I upgraded a large project to React 16.
Continue reading “My experience with React 16”

TypeScript + Webpack: Super Pursuit Mode – webpack – Medium

  • Add fork-ts-checker-webpack-plugin as a devDependency of your project and then amend the webpack.config.js to set ts-loader into transpileOnly mode and drop the plugin into the mix:var ForkTsCheckerWebpackPlugin = webpackConfig = { // other config… context: __dirname, // to automatically find tsconfig.json module: { rules: [ { test: /\.
  • $/, loader: ‘ts-loader’, options: { // disable type checker – we will use it in fork plugin transpileOnly: true } } ] }, plugins: [ new ForkTsCheckerWebpackPlugin() ]};If you’d like to see an example of how to use the plugin then take a look at a simple example and a more involved one.HappyPackNot so long ago I didn’t know what HappyPack was.
  • Isn’t multi-threading great?ts-loader did not initially play nicely with HappyPack; essentially this is because ts-loader touches parts of webpack’s API that HappyPack replaces.
  • id=ts’ } ] }, plugins: [ new HappyPack({ id: ‘ts’, threads: 2, loaders: [ { path: ‘ts-loader’, query: { happyPackMode: true } } ] }), new ForkTsCheckerWebpackPlugin({ checkSyntacticErrors: true }) ]};Note that the ts-loader options are now configured via the HappyPack query and that we’re setting ts-loader with the happyPackMode option set.There’s one other thing to note which is important; we’re now passing the checkSyntacticErrorsoption to the fork plugin.
  • Do note that, as with HappyPack, the thread-loader is highly configurable.If you’d like to see an example of how to use thread-loader and cache-loader then once again we have a simple example and a more involved one.All This Could Be Yours…In this post we’re improving build speeds with TypeScript and webpack in 3 this plugin in play ts-loader only performs transpilation.

If you’re like me then you’ll like TypeScript and you’ll like module bundling with webpack. You may also like speedy builds. That’s completely understandable. The fact of the matter is, you sacrifice…
Continue reading “TypeScript + Webpack: Super Pursuit Mode – webpack – Medium”

The Most Important Color In UI Design – UX Planet

  • Just look at your smartphone app icons, and you’ll see that a lot of them are blue: Facebook, Twitter, Shazam, Safari, etc.So why is blue the chosen color?There are a lot of reasons to use blue, I’ll list a few of them:People like this color.
  • Surveys show majority of people see blue as their favorite color.
  • Blue is strongly associated with clean water, clear skies, etc., which leads to its high preference as a color.Blue has an association with nature due to this being the color of ocean and sky.Universal color for UI designers.
  • Blue is a very common color for websites and apps in the travel industry.
  • ConclusionI hope that after reading this article you have a good idea of why blue color is so popular among designers.

As you probably already guessed this article is dedicated to blue color. Without a doubt, blue is one of the most important colors in UI design, and one of the most frequent. Just look at your…
Continue reading “The Most Important Color In UI Design – UX Planet”

Themes in React Native – Adam Bene – Medium

Themes in React Native  #reactnative #javascript #react #reactjs #reactjs

  • Themes in React Nativetheme provider and UI elementsWhen developing a large scale app it is a good idea to build our own UI components.
  • The styles should be factored out to be DRY.ContextReact context is a suitable tool for dependency injection.
  • Let’s inject our theme.ThemeProvider theme={lightTheme} ButtonTap param is props, 2nd is context.contextTypes has to be defined in order to receive properties in context.
  • Otherwise context will be empty.const Button = ({ text }, { theme }) = ( TouchableHighlight Text style={{ theme.color }}{text}/Text = { theme: PropTypes.shape({ color: PropTypes.string })}ThemeProviderThe return value of getChildContext() will be propagated to its children down the component tree as context.childContextTypes property is needed to defined.class ThemeProvider extends React.Component { getChildContext() { return { theme: this.props.theme } } render() { return this.props.children = { theme: PropTypes.shape({ color: PropTypes.string })}Change ThemesThemes can be changed through props.
  • The example below toggles two themes in the state.light theme by defaultdark theme with smaller border radius, paddings, margins and fontsWorking ExampleYou can try out a working example both on iOS and Android after setting up development environment.react-native run-iosreact-native run-androidSee Also

When developing a large scale app it is a good idea to build our own UI components. The styles should be factored out to be DRY. React context is a suitable tool for dependency injection. Similar to…
Continue reading “Themes in React Native – Adam Bene – Medium”

Introduction – Developing a native mobile app with React-Native and Typescript – Medium

Introduction  #typescript #javascript #react #reactnative

  • We decided on developing a mobile app with react-native just because the idea of developing a native mobile app with javascript felt very exciting.We also thought of using Typescript with React because we feel it not only just brings type-safety to the javascript code but in-fact brings all the advantages of object-oriented programming allowing us to think javascript code in terms of some well-established design patterns and standards that help us design highly scalable code.
  • The goodies it brings — abstract and concrete classes, types, interface, enums are hard to resist.As we started on the development of the app, I thought it would be a good idea to put our learnings here in a series as it not only will help us document our tasks but would also help other react-native learners and developers.In this series, we will document step-by-step each task that we work on during the development of this app, right from the initial project set-up to its final implementation and release to the app store.What app we are going to developThe app we would be developing would be a simple photo albums app, where user can create an album and add photos to its from his/her mobile.Tech-stack to be usedUI using react-native + TypescriptStorage — Azure DocumentDBREST API using node.js, Azure DocumentDB Node APIAuthentication — oAuth (Facebook and Google)Targeted platformsIn its first version, we are planning to target only Android platform simply because couple of us in the team don’t own a Mac Book and apple doesn’t allow to develop iOS apps from any other operating system.Github RepoOur LimitationsWe are all learners of react/react-native, also this being a side project that we all will work on in our spare time, we are anticipating the project to go on a bit slow pace.Functional Testing — we don’t have a QE Automation expert in our team yet, so for most of its part Functional testing would be manual3.
  • Environment — for the UI app, we will use emulators on our local system to test our code.
  • Being a mobile app, it would be released to Android Playstore and thus we don’t need to maintain any servers for the UI app4.
  • So stay tuned, more stories to come soonInterested in joining us in this wonderful journey?we’ll be glad to have you in our team, pls email to us at with a little bit about yourself

Couple of weeks back, I and some of my friends, started on a side/hobby project to learn reactJS. We decided on developing a mobile app with react-native just because the idea of developing a native…
Continue reading “Introduction – Developing a native mobile app with React-Native and Typescript – Medium”

Organizing stores for apps with MobX – Huiseoul Engineering

Organizing stores for apps with MobX  #mobx #javascript #react #reactjs

  • Organizing stores for apps with MobXMobX is a simple and scalable state management system that goes well with React and ReactNative.
  • Let’s take a look at how we can go about it with MobX stores.Let’s build a ToDo app to demonstrate.What stores will have?Stores will store either states of each domain or app-wide states.
  • Also it makes sense to have getter methods using @computed of MobX:@computedpublic get sortedToDos() { return this.toDos.sort((a, b) = b.createdAt – a.createdAt);}@computedpublic get isNewToDoValid() { return this.newToDo.isValid;}And some @action methods for strict mode:@actionpublic pushNewToList = () = { this.list.push(; this.resetNew();}Have one ui store and many domain storesYour application might have application-wide ui states indicating if a modal is shown, menu button is pressed, etc.
  • These states have to be stored in somewhere and having an AppStore or UIStore might be a good idea for them.class UIStore { @observable public isModalOn: boolean; …}Every other store should represent their own domain such as UserStore, ToDoStore, etc.
  • One way to achieve this is to export an already instantiated object from store class.class ToDoStore { …}export default new ToDoStore();The other way is to use provider components and inject in mobx-react library.

MobX is a simple and scalable state management system that goes well with React and ReactNative. Often time when an app scales it makes sense to give it a logical structure. Let’s take a look at how…
Continue reading “Organizing stores for apps with MobX – Huiseoul Engineering”