React Sharing

 Here we have collected 7 Q&A about React, React Native problem.

1. How to do logging in React Native?

Answer 1:

Use console.log, console.warn etc.

As of React Native 0.29 you can simply run the following to see logs in the console:

$ react-native log-ios $ react-native log-android

Answer 2(for iOS):

console.log works.

By default on iOS, it logs to the debug pane inside Xcode.

From the IOS simulator press (⌘+D) and press Remote JS Debugging. This will open a resource, http://localhost:8081/debugger-ui on localhost. From there use Chrome Developer tools javascript console to view console.log

2. Hide keyboard in react-native.

Answer 1:

The problem with keyboard not dismissing gets more severe if you have keyboardType='numeric', as there is no way to dismiss it.

Replacing View with ScrollView is not a correct solution, as if you have multiple textInputs or buttons, tapping on them while the keyboard is up will only dismiss the keyboard.

Correct way is to encapsulate View with TouchableWithoutFeedback and calling Keyboard.dismiss()

EDIT: You can now use ScrollView with keyboardShouldPersistTaps='handled' to only dismiss the keyboard when the tap is not handled by the children (ie. tapping on other textInputs or buttons)

If you have

<View style=flex: 1> <TextInput keyboardType='numeric'/> </View>

Change it to

<ScrollView contentContainerStyle=flexGrow: 1 keyboardShouldPersistTaps='handled' > <TextInput keyboardType='numeric'/> </ScrollView>

or

import Keyboard from 'react-native' <TouchableWithoutFeedback onPress=Keyboard.dismiss accessible=false> <View style=flex: 1> <TextInput keyboardType='numeric'/> </View> </TouchableWithoutFeedback>

EDIT: You can also create a Higher Order Component to dismiss the keyboard.

import React from 'react'; import TouchableWithoutFeedback, Keyboard, View from 'react-native'; const DismissKeyboardHOC = (Comp) => return ( children, ...props ) => ( <TouchableWithoutFeedback onPress=Keyboard.dismiss accessible=false> <Comp ...props> children </Comp> </TouchableWithoutFeedback> ); ; const DismissKeyboardView = DismissKeyboardHOC(View)

Simply use it like this

... render() <DismissKeyboardView> <TextInput keyboardType='numeric'/> </DismissKeyboardView>

NOTE: the accessible=false is required to make the input form continue to be accessible through VoiceOver. Visually impaired people will thank you!

Answer 2:

This just got updated and documented! No more hidden tricks.

import Keyboard from 'react-native' // Hide that keyboard! Keyboard.dismiss()

3. Programmatically navigate using react router

Answer 1:

React Router v4

With v4 of React Router, there are three approaches that you can take to programmatic routing within components.

Use the withRouter higher-order component.

Use composition and render a <Route>

Use the context.

React Router is mostly a wrapper around the history library. history handles interaction with the browser’s window.history for you with its browser and hash histories. It also provides a memory history which is useful for environments that don’t have a global history. This is particularly useful in mobile app development (react-native) and unit testing with Node.

A history instance has two methods for navigating: push and replace. If you think of the history as an array of visited locations, push will add a new location to the array and replace will replace the current location in the array with the new one. Typically you will want to use the pushmethod when you are navigating.

In earlier versions of React Router, you had to create your own history instance, but in v4 the <BrowserRouter>, <HashRouter>, and <MemoryRouter> components will created browser, hash, and memory instances for you. React Router makes the properties and methods of the historyinstance associated with your router available through the context, under the router object.

1. Use the withRouter higher-order component

The withRouter higher-order component will inject the history object as a prop of the component. This allows you to access the push and replace methods without having to deal with the context.

import withRouter from 'react-router-dom' // this also works with react-router-native const Button = withRouter(( history ) => ( <button type='button' onClick=() => history.push('/new-location') > Click Me! </button> ))

2. Use composition and render a <Route>

The <Route> component isn’t just for matching locations. You can render a pathless route and it will always match the current location. The <Route> component passes the same props as withRouter, so you will be able to access the history methods through the history prop.

import Route from 'react-router-dom' const Button = () => ( <Route render=( history) => ( <button type='button' onClick=() => history.push('/new-location') > Click Me! </button> ) /> )

3. Use the context*

*But you probably should not

The last option is one that you should only use if you feel comfortable working with React’s contextmodel. Although context is an option, it should be stressed that context is an unstable API and React has a section Why Not To Use Context in their documentation. So use at your own risk!

const Button = (props, context) => ( <button type='button' onClick=() => // context.history.push === history.push context.history.push('/new-location') > Click Me! </button> ) // you need to specify the context type so that it // is available within the component Button.contextTypes = history: React.PropTypes.shape( push: React.PropTypes.func.isRequired )

1 and 2 are the simplest choices to implement, so for most use cases they are your best bets.

Answers 2:

React-Router 4.0.0+ Answer

In 4.0 and above, use the history as a prop of your component.

class Example extends React.Component // use `this.props.history.push('/some/path')` here ;

React-Router 3.0.0+ Answer

In 3.0 and above, use the router as a prop of your component.

class Example extends React.Component // use `this.props.router.push('/some/path')` here ;

React-Router 2.4.0+ Answer

In 2.4 and above, use a higher order component to get the router as a prop of your component.

import withRouter from 'react-router'; class Example extends React.Component // use `this.props.router.push('/some/path')` here ; // Export the decorated class var DecoratedExample = withRouter(Example); // PropTypes Example.propTypes = router: React.PropTypes.shape( push: React.PropTypes.func.isRequired ).isRequired ;

React-Router 2.0.0+ Answer

This version is backwards compatible with 1.x so there’s no need to an Upgrade Guide. Just going through the examples should be good enough.

That said, if you wish to switch to the new pattern, there’s a browserHistory module inside the router that you can access with

import browserHistory from 'react-router'

Now you have access to your browser history, so you can do things like push, replace, etc… Like:

browserHistory.push('/some/path')

Further reading: Histories and Navigation

React-Router 1.x.x Answer

I will not go into upgrading details. You can read about that in the Upgrade Guide

The main change about the question here is the change from Navigation mixin to History. Now it’s using the browser historyAPI to change route so we will use pushState() from now on.

Here’s an exemple using Mixin:

var Example = React.createClass( mixins: [ History ], navigateToHelpPage () this.history.pushState(null, `/help`); )

Note that this History comes from rackt/history project. Not from React-Router itself.

If you don’t want to use Mixin for some reason (maybe because of ES6 class), then you can access the history that you get from the router from this.props.history. It will be only accessible for the components rendered by your Router. So, if you want to use it in any child components it needs to be passed down as an attribute via props.

You can read more about the new release at their 1.0.x documentation

Here is a help page specifically about navigating outside your component

It recommends grabbing a reference history = createHistory() and calling replaceState on that.

React-Router 0.13.x Answer

I got into the same problem and could only find the solution with the Navigation mixin that comes with react-router.

Here’s how I did it

import React from 'react'; import Navigation from 'react-router'; let Authentication = React.createClass( mixins: [Navigation], handleClick(e) e.preventDefault(); this.transitionTo('/'); , render() return (<div onClick=this.handleClick>Click me!</div>); );

I was able to call transitionTo() without the need to access .context

Or you could try the fancy ES6 class

import React from 'react'; export default class Authentication extends React.Component constructor(props) super(props); this.handleClick = this.handleClick.bind(this); handleClick(e) e.preventDefault(); this.context.router.transitionTo('/'); render() return (<div onClick=this.handleClick>Click me!</div>); Authentication.contextTypes = router: React.PropTypes.func.isRequired ;

React-Router-Redux

Note: if you’re using Redux, there is another project called React-Router-Redux that gives you redux bindings for ReactRouter, using somewhat the same approach that React-Redux does

React-Router-Redux has a few methods available that allow for simple navigating from inside action creators. These can be particularly useful for people that have existing architecture in React Native, and they wish to utilize the same patterns in React Web with minimal boilerplate overhead.

Explore the following methods:

push(location)

replace(location)

go(number)

goBack()

goForward()

Here is an example usage, with Redux-Thunk:

./actioncreators.js

import goBack from 'react-router-redux' export const onBackPress = () => (dispatch) => dispatch(goBack())

./viewcomponent.js

<button disabled=submitting className="cancel_button" onClick=(e) => e.preventDefault() this.props.onBackPress() > CANCEL </button>

4. Error Running React Native App From Terminal (iOS)

Answer:

It appears to be a problem with the location of Command line tools.

In Xcode, select Xcode menu, then Preferences, then Locations tab. Select your Xcode version from the dropdown and exit Xcode.

5. React native android failed to load JS bundle

Answer 1:

To bundle JS file into your apk while having your server running (react-native start) download bundle into assets directory of your app:

curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"

With the next release (0.12) we’ll fix react-native bundle command to work with android projects as expected.

Answer 2:

The following made it work for me on Ubuntu 14.04:

cd (App Dir) react-native start > /dev/null 2>&1 & adb reverse tcp:8081 tcp:8081

6. How to add icons to React Native app

Answer 1:

iOS Icons

Set AppIcon in Images.xcassets.

Add 9 different size icons:

29pt

29pt*2

29pt*3

40pt*2

40pt*3

57pt

57pt*2

60pt*2

60pt*3.

Images.xcassets will look like this:

Android Icons

Put ic_launcher.png in folders [PrjDir]/android/app/src/main/res/mipmap-*/.

72*72 ic_launcher.png in mipmap-hdpi.

48*48 ic_launcher.png in mipmap-mdpi.

96*96 ic_launcher.png in mipmap-xhdpi.

144*144 ic_launcher.png in mipmap-xxhdpi.

192*192 ic_launcher.png in mipmap-xxxhdpi.

Answer 2:

I wrote a generator to automatically generate icons for your react native app from a single icon file: https://blog.bam.tech/developper-news/how-to-generate-your-react-native-app-icons-in-a-single-command-line.

It generates your assets and it also adds them correctly to your ios and android project.

Install it

You need node 6 installed and image-magick.

Then install the generator with

npm install -g yo generator-rn-toolbox

Use it

Have a single icon file at the ready somewhere. 200x200px is sufficient.

Then in your React Native project, run:

yo rn-toolbox:assets --icon <path to your icon> # For instance yo rn-toolbox:assets --icon ../icon.png

You will be asked for the name of your react-native project. For instance, if you created your project with react-native init MyAwesomeProject, your project name is MyAwesomeProject.

When you are asked, ? Overwrite ios/MyAwesomeProject/Images.xcassets/AppIcon.appiconset/Contents.json?, reply with Y.

And… that’s it!

7. Unable to load script from assets index.android.bundle on windows

Answer:

I’ve encountered the same issue while following the React Native tutorial (developing on Linux and targeting Android).

This issue helped me resolve the problem in following steps.

(in project directory) mkdir android/app/src/main/assets

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

react-native run-android

You can automate the above steps by placing them in scripts part of package.json like this:

"android-linux": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res && react-native run-android"

Then you can just execute npm run android-linux from your command line every time.

Thanks for reading, I hope it’ll helps you to solve the problem.

Source:

https://stackoverflow.com/q/30115372

https://stackoverflow.com/q/29685421

https://stackoverflow.com/q/39778607

https://stackoverflow.com/q/31079081

https://stackoverflow.com/q/32572399

https://stackoverflow.com/q/34329715

https://stackoverflow.com/q/44446523

Created by Jordan Walke, an engineer at Facebook, it was first deployed in 2011 and later became open source a few years later. React is a “learn once, write anywhere” library that has become go-to for many mobile app developers.

React Native has been gaining in popularity for one obvious reason: it allows developers to write code across different mobile operating systems. This means that you no longer have to build the same app for iOS and for Android from scratch or specialise in one or the other operating system. Now you can code apps for both platforms with the same powerful JavaScript technologies you use for building web apps.

Here 7 React Native app you can use, study apply from.

1. RunX – Running Tracker

Runx is a open source React Native app which help you share your route and analyze your activity.

  2. Golden – Best Wallet Ever

Golden is a cryptocurrency wall open source that build with React Native. You can store Ethereum and its tokens securely on your devices. Bitcoin and Ripple will be added soon.

Key Features of Golden Wallet:

– Securely send and receive cryptocurrencies anytime and anywhere.

– Get notification for incoming and outgoing transactions.

– Create or add as many wallet addresses as you want.

– Save frequent used addresses to your address book for peace of mind.

– No registration required, No Name. No ID. No Bank. No Problem!

3. gikApp

If you need to convert WordPress or Shopify sites into professional and fully functioning mobile apps quickly and easily, the gikApp React Native mobile app template is ideal.

The developers provide step-by-step video instructions, and if you’re not sure the app is right for you, you can take advantage of the free trial on offer and take it for a test run before you buy.

4. TechStore

TechStore is the ultimate React Native template that let you build your shopping cart app for both Android and iOS. With the powerful combination of React Native framework and Shopify integration, your eCommerce app will be up and running in 5 minutes.

With new version, language is will not be a barrier with TechStore. TechStore is full i18n and RTL languages support.

5. FashionStore

Fashion Store is a versatile React Native template that let you build your own mobile app for your fashion, apparel, clothing retail store, on both platforms: Android and iOS. By using React Native framework and Shopify integration, your trending fashion retail app will be up and running in 5 minutes.

Fashion Store saves a lot of time in design, develop and tweaking your cross-platform app for Shopify m-commerce. Animation, UI/UX are optimized for a clothing retail online shop.

6. Qribto

Qribto is the React Native app templates for your WordPress crypto news site. It can convert all your crypto content into a mobile app for iOS and Android within 3 minutes.

Qribto offers the attractive UI/UX with multiple widgets and layouts for your endeavors: be it a crypto content app for crypto investors, an app for a crypto community, or even a native mobile app

7. React Native Showcase

React Native Showcase is a really big list of interesting React Native projects, tutorials, articles and more. These apps do not have to be published to the App Store or anything, they are simply here to showcase work from within the community, and to help React Native developers by seeing how others are building and structuring their applications.

To get your project added, submit this form: https://egany.typeform.com/to/Hvi50y

1. What is the difference between React Native and React?

ReactJS is a JavaScript library, supporting both front end web and being run on the server, for building user interfaces and web applications.

React Native is a mobile framework that compiles to native app components, allowing you to build native mobile applications (iOS, Android, and Windows) in JavaScript that allows you to use ReactJS to build your components, and implements ReactJS under the hood.

Both are open sourced by Facebook.

2. How do you debug React Native?

Debugging React Native Apps

To debug the javascript code of your react app do the following:

Run your application in the iOS simulator.

Press Command + D and a webpage should open up at http://localhost:8081/debugger-ui. (Chrome only for now) or use the Shake Gesture

Enable Pause On Caught Exceptions for a better debugging experience.

Press Command + Option + I to open the Chrome Developer tools, or open it via View -> Developer -> Developer Tools.

You should now be able to debug as you normally would.

Optional

Install the React Developer Tools extension for Google Chrome. This will allow you to navigate the view hierarchy if you select the React tab when the developer tools are open.

Live Reload

To activate Live Reload do the following:

Run your application in the iOS simulator.

Press Control + Command + Z.

You will now see the Enable/Disable Live Reload, Reload and Enable/Disable Debuggingoptions.

3. What is the difference between using constructor vs getInitialState in React / React Native?

The two approaches are not interchangeable. You should initialize state in the constructor when using ES6 classes, and define the getInitialState method when using React.createClass.

See the official React doc on the subject of ES6 classes.

class MyComponent extends React.Component constructor(props) super(props); this.state = /* initial state */ ;

is equivalent to

var MyComponent = React.createClass( getInitialState() return /* initial state */ ; , );

4. Can I build Android apps with react native?

Yes.

React Native for Android was released September 14th, 2015.

Docs: http://facebook.github.io/react-native/

5. React Native fixed footer

Off the top of my head you could do this with a ScrollView. Your top-level container could be a flex container, inside that have a ScrollView at the top and your footer at the bottom. Then inside the ScrollView just put the rest of your app as normal.

6. React-Native, Android, Genymotion: ADB server didn’t ACK

After more research I’ve realized that Genymotion uses by default its own adb.

I switched to my main adb (the same used by react-native) and it solved the issue. I guess that because Genymotion’s adb was launched first I got the Address already in use error message.

7. iOS Launch screen in React Native

I was be able to solve the issue, with the help of this thread: Launch Image not showing up in iOS application (using Images.xcassets)

So I’m gonna explain it deeply in case it can help someone else.

First, you need to create certain images. What I used for that was this template and this webpage with an automatic generator: TiCons

When I downloaded my images, I took the ones inside assets/iphone folder, I only took those ones:

[email protected] (640×960)

[email protected] (640×1136)

[email protected] (750×1334)

[email protected] (1242×2208)

[email protected] (2208×1242)

Also you need this Contents.json file in the same folder, I got it from a friend:

"images": [ "extent": "full-screen", "idiom": "iphone", "filename": "[email protected]", "minimum-system-version": "7.0", "orientation": "portrait", "scale": "2x", "subtype": "retina4" , "extent": "full-screen", "idiom": "iphone", "filename": "[email protected]", "minimum-system-version": "8.0", "orientation": "portrait", "scale": "2x", "subtype": "667h" , "extent": "full-screen", "idiom": "iphone", "filename": "[email protected]", "minimum-system-version": "8.0", "orientation": "landscape", "scale": "3x", "subtype": "736h" , "extent": "full-screen", "idiom": "iphone", "filename": "[email protected]", "minimum-system-version": "8.0", "orientation": "portrait", "scale": "3x", "subtype": "736h" , "extent": "full-screen", "idiom": "iphone", "filename": "[email protected]", "minimum-system-version": "7.0", "orientation": "portrait", "scale": "2x" ], "info": "version": 1, "author": "xcode"

So, at this point I created a folder called LaunchImage.launchimage inside Images.xcassetsfolder in my React Native project and save the images and the Contents.json file inside it:

Second, you have to open your project in Xcode and in “General” settings, below “App icons and Launch Images” we have to leave the option “Launch Screen File” empty (also we can delete the LaunchScreen.xib file inside our project), and click in “Use Asset Catalog” after that. A modal will open, we choose to Migrate the catalog Images

Now, in the “Launch Images Source” selector, we can choose the folder we created before, LaunchImage (the one with our images):

We pick this instead of Brand Assets and we can delete Brand Assets folder.

At this point, we’ll be able to run our React Native application with our custom launch images:

I know it seems a little bit complex for an supposedly easy task, but after reading a lot about it this was the only way I could get my splash images working, so I wanted to share with the community.

Source:

https://stackoverflow.com/a/34641772

https://stackoverflow.com/q/29289304

https://stackoverflow.com/q/30668326

https://stackoverflow.com/q/35959350

https://stackoverflow.com/q/34027270

https://stackoverflow.com/q/29447715

https://stackoverflow.com/q/29287934

Here we have collected 7 Mobile UI Interactions for your Inspiration on Dribbble. Take a look! Make yourself one! Interested in hearing all about our latest News, Tuts, Updates, and Ideas?

Take a peek through our React Sharing website! ► https://www.ReactSharing.com

Follow us today and get daily news! Contact Us!

Twitter ► https://twitter.com/ReactSharing

Facebook ‪► https://www.facebook.com/React.Sharing/

Instagram ► ‪https://www.instagram.com/ReactSharing

Great content and amazing animations to better understand the different attributes for flex. If a picture is worth a thousand words — how many more animation? Flex cannot be efficiently & fully explained by text or static images. To cement your knowledge of flex I created these animated samples.

Via JavaScript Teacher: https://medium.com/@js_tut/flexbox-the-animated-tutorial-8075cbe4c1b2

Here we have collected 5 Suprised Ideas for Alarm Wakeup on Dribbble. Take a look! Make yourself one!

Interested in hearing all about our latest News, Tuts, Updates, and Ideas? Take a peek through our React Sharing website!

► https://www.ReactSharing.com

Follow us today and get daily news!

Contact Us!

Twitter ► https://www.twitter.com/ReactSharing‬ Facebook ‪► https://www.facebook.com/React.Sharing‬ Instagram ► ‪https://www.instagram.com/ReactSharing React Sharing Channel ► ‪ https://www.youtube.com/channel/UCf4k…

Do you have Questions, Comments or Suggestions? Contact us throughout the Facebook page or Tweet us!

References:

1. Alarm Clock Skin by Gleb Kuznetsov✈: https://dribbble.com/shots/2286742-Alarm-Clock-Skin 2. Timer App Prototype by Poltorak: https://dribbble.com/shots/3905149-Timer-App-Prototype 3. Musical Alarm Clock Concept by Iberê Borges: https://dribbble.com/shots/4243973-Musical-Alarm-Clock-Concept 4. Clock Mobile App by Swayam Tech Lab : https://dribbble.com/shots/2804926-Clock-Mobile-App 5. Alarm App by Warren Lebovics: https://dribbble.com/shots/1934644-Alarm-App

Here we have collected 8 Chatbot Ideas on Dribbble (P2). Take a look!

Interested in hearing all about our latest News, Tuts, Updates, and Ideas? Take a peek through our React Sharing website!

► Youtube channel: https://www.youtube.com/channel/UCf4k2klB7PthNous7gk8quQ

Follow us today and get daily news!

Contact Us!

Twitter ► https://www.twitter.com/ReactSharing‬ Facebook ‪► https://www.facebook.com/React.Sharing‬ Instagram ► ‪https://www.instagram.com/ReactSharing React Sharing Channel ► ‪ https://www.youtube.com/channel/UCf4k2klB7PthNous7gk8quQ

Do you have Questions, Comments or Suggestions? Contact us throughout the Facebook page or Tweet us!

Do you have Questions, Comments or Suggestions? Contact us throughout the Facebook page or Tweet us!

References:

1. Chatbot by Mushfiq: https://dribbble.com/shots/3380741-Chatbot

2. Financial Chatbot by Lina Lysenko: https://dribbble.com/shots/3972012-Financial-Chatbot

3. Payment exploration with Chatbot by Aswin: https://dribbble.com/shots/2983983-Payment-exploration-with-Chatbot

4. Chatbot UX Exploration by alex prkhd: https://dribbble.com/shots/2669240-Chatbot-UX-Exploration

5. Sketch bot – AImplify by Julia Laza: https://dribbble.com/shots/4035384-Sketch-bot-AImplify

6. Chatbot Animation by Joshua Klein: https://dribbble.com/shots/4039907-Chatbot-Animation

7. 404 page – WeeklyUI Challenge [2/10] by Mateo Grubišić: https://dribbble.com/shots/3934862-404-page-WeeklyUI-Challenge-2-10

8. Chat Bot – Smart home configurator by Valentin Salmon: https://dribbble.com/shots/3203022-Chat-Bot-Smart-home-configurator

Here we have collected 8 Chatbot Ideas on Dribbble (P2). Take a look!

Interested in hearing all about our latest News, Tuts, Updates, and Ideas? Take a peek through our React Sharing website!

► Youtube channel: https://www.youtube.com/channel/UCf4k2klB7PthNous7gk8quQ

Follow us today and get daily news!

Contact Us!

Twitter ► https://www.twitter.com/ReactSharing‬ Facebook ‪► https://www.facebook.com/React.Sharing‬ Instagram ► ‪https://www.instagram.com/ReactSharing React Sharing Channel ► ‪ https://www.youtube.com/channel/UCf4k2klB7PthNous7gk8quQ

Do you have Questions, Comments or Suggestions? Contact us throughout the Facebook page or Tweet us!

References:

1. Chatbot by Mushfiq: https://dribbble.com/shots/3380741-Chatbot

2. Financial Chatbot by Lina Lysenko: https://dribbble.com/shots/3972012-Financial-Chatbot

3. Payment exploration with Chatbot by Aswin: https://dribbble.com/shots/2983983-Payment-exploration-with-Chatbot

4. Chatbot UX Exploration by alex prkhd: https://dribbble.com/shots/2669240-Chatbot-UX-Exploration

5. Sketch bot – AImplify by Julia Laza: https://dribbble.com/shots/4035384-Sketch-bot-AImplify

6. Chatbot Animation by Joshua Klein: https://dribbble.com/shots/4039907-Chatbot-Animation

7. 404 page – WeeklyUI Challenge [2/10] by Mateo Grubišić: https://dribbble.com/shots/3934862-404-page-WeeklyUI-Challenge-2-10

8. Chat Bot – Smart home configurator by Valentin Salmon: https://dribbble.com/shots/3203022-Chat-Bot-Smart-home-configurator

React is a frontend library, which runs in the browser. Like any other frontend library (jQuery, etc.), it is happy to be served by any kind of backend.

You could be using Python/Flask, Ruby on Rails, Java/Spring, PHP, etc. It doesn’t really matter. If your backend is not JavaScript/node, then your frontend can’t be integrated as tightly with it. This is 100% OK. In fact, it’s great! You’ll never have to wonder what environment your JavaScript is running in – it all runs in the browser.

There are lots of things to consider before everyone gets into back-end first time, but the most important thing is you need to love the language that you’re going to develop. Node.js is a fast language but that doesn’t mean Python isn’t or PHP isn’t.

Performance is up to you as well, in the end, know that. If you need something really fast then pick a language fits your needs. Depends on what it is you want to do, mostly.

Every Back-end languages have their own pros and cons. So choose one comes down to individual’s own preference and coding style.

Here are some languages you can go for depending on the type of application you are building.

PHP

No matter how many people hate PHP, it still is one the most used languages on the internet. Don’t listen to people who say PHP is a terrible language. It works and is tried and true. And if you are just beginning and want to get a project quickly up and running, Go for PHP!

Pros

Widely used for websites

PHP is the quasi-standard for backends for web applications and used by most of all websites. Many popular CMS are built with PHP, e.g. WordPress, Drupal, and Joomla.

A huge community of practice

Whatever challenge you face, you can Google it and find existing code that solves it. Well supported packages, objects, and methods exist for data manipulation, graphics generation, file handling and connecting with diverse APIs.

A lot of good frameworks for it

Like Laravel, Zend, Symfony…

Tight and easy integration with HTML

Unlike some languages, PHP is designed to work as part of an HTML file, and moving in and out of straight HTML and PHP is simple and seamless. If you’re familiar with HTML, adding simple PHP gives you access to creating dynamic pages and sessions very easy. You have easy and logical access to headers, session variables, cookies, GET and PUT information and files.

Thousands of tutorials and courses to get you started quickly

There are thousands of tutorials available and most online course providers offer PHP courses too. Learning the language will not fail because of missing reading.

Cons

Very slow compared to alternatives

Compared to alternatives like Exilir and Go-lang, which provide comparable functionality, even the latest versions of PHP are vastly slower than their competitors. The difference is so significant that it has the potential to bottleneck even modestly sized applications and lead to highly significant increases in hardware costs, even with the well-written code. PHP’s syntax is also highly permissive of non-optimized code which can further exacerbate this issue.

Ugly syntax

The naming of string and numerical functions are awkward, frequently inconsistent and impossible to memorize – you will always need a handy cheat sheet.

Python

If you are planning to build an application that would produce tons of data and you may want to apply further AI Magic on it, go for Python. Best choice.

Pros

Easy to learn 

Python has simple to learn syntax which helps beginners to utilize this programming language and has support guide available.

Lots of tutorials

Python’s popularity and beginner friendliness have led to a wealth of tutorials and example code on the internet. This means that when beginners have questions, they’re very likely to be able to find an answer on their own just by searching. This is an advantage over some languages that are not as popular or covered as in-depth by its users

Cons

Slower than alternative languages

Compared to alternatives such as C++, C#, F#, Elixir/Erlang or Go, Python can be sluggish and is often not a good choice for applications where performance is a significant concern.

Not type-safe

For back-end system development, strong static type checking is extremely important. Without strong static type checking, errors that could have been detected at compile time won’t show up until runtime, which could have disastrous consequences.

Go Language

Go language is the most in-demand new language of 2017. And because of its speed, a lot of companies dealing with heavy data and high information transaction have switched from python to Go. And if you wanna become a trendy developer, Choose Go!

Pros

High-level programming language

It makes it easy to learn and the learning curve is friendly for beginners. One can learn the main concepts and ignore unimportant details. While in low-level programming languages, like C, one should spend a lot of time on low-level details even when developing very basic (web) service.

Great runtime performance

GoLang is compiled language, so it is expected to run faster than interpreted language. GoLang programs may run as fast as ones are written in Java. It is just a matter of time when GoLang compiler will beat Java and will compete with C/C++.

Support of OOP and duck typing

Interface based polymorphism and structural compatibility of interfaces make it easy to extend the system/application, to reuse the code and to refactor. Basically, it allows building less coupled architecture.

The OOP support is very simple compared to other OOP languages like Java/C++. It is relatively easy to understand and it almost does not have surprises. OOP in GoLang is a combination of two clear concepts: structs and interfaces. Structs can be just composed, while interfaces define behavior. It is not only very simple approach but actually very right implementation of polymorphism. In other languages, it will take a lot of time to a beginner not only to learn OOP support but also (what is even more important) to learn how to use it and when not to use it. GoLang encourages to use OOP in more right way.

Having the minimal and clear concept of OOP, it also makes it very powerful tool of creating abstraction, sometimes it is even more powerful than in C++/Java.

Green threads and channels built–in

The system can easily support tens of thousands (user-space) threads, which can communicate and being synchronized using channels. This makes it easy to design a system consuming multiple cores (and being scalable) or making asynchronous I/O. Scalability and asynchronous processing are very important property of systems.

Simplicity of working with threads and channels is very important for beginners.

Large community

The community is large enough at this point that there are plenty of resources on the web for learning, asking questions, and interacting with many other Gophers.

Cons

No user defined generics

This means that you can utilize strong typing only as long as you do not need a generic container like for example list. Only ways to deal with it is either code duplication or using interface which means that you lose strong typing.

Default package manager doesn‘t allow versioning of libraries

This means that when using go get we will always fetch HEAD of remote repo. There are however 3rd party solutions for that problem like repository hacks and managers that tries to mimic lock file.

Default package manager doesn‘t allow multiple versions of the same package to be used at once

Default package manager fetches all packages to $GOPATH and uses them across all projects which mean that 2 projects cannot use different versions of the same package. However 3rd party solutions exist. This has been solved with the dep tool and semver.

Initial setup of working environment is nontrivial

We need to set up some environment variables ($GOPATH and adjust$PATH at least). However, in most cases, it is one-time setup.

Default package manager doesn‘t allow versioning of libraries

This means that when using go get we will always fetch HEAD of remote repo. There are however 3rd party solutions for that problem like repository hacks and managers that tries to mimic lock file.

Node.js

If you are making something more for a portfolio or learning purposes, go for Node.js. It is really popular with some really good advantages and has tons of Job opportunities. And with a huge community on stack overflow, you would not feel stuck anytime.

You won’t take too long to learn in case you already have a good knowledge of Javascript – by learning this you won’t have to learn a new language.

Node.js – Relatively new as compared to veterans like Rails, Spring, Django etc. But written in famous JavaScript. It is considered ideal Backend framework to work with your front end. It’s the fastest framework out there. It is versatile and interacts well with your front end. But it’s kinda incomplete without Expressjs and other tools. But its bright future is still to be witnessed. Want to become a full-stack developer? Node.js. Combining with all the tools, it’s lethal, sexy and powerful.

Pros

Easy to Learn

According to Node.js’s 2016 User Survey Javascript is one of the most popular programming languages for front-end development. Nearly every front-end developer is familiar with this universal language. Therefore, it is much easier for them to switch to using Node.js at the back-end. It requires less effort and less time to learn and work with, even for a junior Javascript programmer.

Freedom in Building Apps

While Ruby on Rails is a framework that imposes rules and guidelines of developing software in a particular way, Node.js gives you much more space and freedom in doing it your own way. Node.js is completely unopinionated, meaning you start building everything from scratch. It can execute basic tasks, but gives you only the bare minimum from a fresh install, making it less restricted.

Fullstack JS

Before Node.js, Javascript was only used for client-side development. It was necessary to use a different server-side programming language. In practice, you had to hire separate devs for backend and for frontend. With a growing popularity of Node.js fullstack JavaScript became a reality. Nowadays it is possible to write both front-end and back-end of web applications in Javascript, making app deployment much easier and more efficient.

Active Community

The Node.js developers’ community is a very active and vibrant group of developers who contribute to the constant improvement of Node.js. Thanks to the cooperation of JavaScript programmers and their input to the community you get access to a ton of ready solutions, codes in Github and many more possibilities. Even though it is still at a relatively early stage of development, the community is dynamically evolving and its members go the extra mile to provide others with best and reliable solutions.

Simultaneous Request Handling

Node.js provides the non-blocking IO system that lets you process numerous requests concurrently. The system makes simultaneous request handling much better than in other languages like Ruby or Python. Incoming requests are queued up and executed sequentially in a fast manner. In effect your app will take up much less system RAM, achieve high scalability levels and in a result will perform faster.

Cons

Unstable API

One of the biggest disadvantages of Node.js is that it lacks consistency. Node.js’ API changes frequently, and the changes are often backward-incompatible. When this happens, programmers are forced to make changes to the existing code base to make it compatible with the latest version of the Node.js API.

More Development Time

The fact that Node.js is unopinionated can also be seen as a drawback by some developers. Ruby on Rails provides you with a lot of directions from a fresh install and guides you into their way of doing things, but with Node.js you basically need to write everything from scratch. It might result in a decrease in productivity, slowing your work down. However, if you cooperate with an experienced team of programmers who have internally developed good processes for developing and maintaining code, you do not have to worry about efficiency.

Not Suitable for Heavy-Computing Apps

Node.js doesn’t support multi-threaded programming yet. It is able to serve way more complicated applications than Ruby, but it’s not suitable for performing long-running calculations. Heavy computations block the incoming requests, which can lead to a decrease in performance.While Node.js is perfect for complex apps, in the case of software which requires some heavy-computing it might perform less effectively.

Immaturity of Tools

Even though, the core Node.js is stable, many packages in the npm registry (pre-installed node package manager that organises the installation and management of third-party Node.js programs) are still of poor quality or have not been properly documented. As it is mostly an open source ecosystem, numerous tools have not been supervised and so they might lack the quality and fail at meeting coding standards. The npm’s structure makes it harder to spot reliable packages. Therefore, you might need more experienced developers who can find tools that can be trusted.

Wrap-up

Node.js is still an immature environment in many aspects and it is likely that many programmers won’t find it useful in their projects yet. However, there are many cases in which Node.js might prove to be much more efficient. Numerous companies have trusted Node.js in production of their applications and they’ve already experienced positive results. It is definitely worth following their example and trying to identify which of the problems you have can be solved with Node.js. Effects might outgrow your expectations.

References:

Why to Use Node.js: Pros and Cons of Choosing Node.js for Back-end Development: https://buff.ly/2FzWeuN

What is the best programming language to learn for backend developers?: https://buff.ly/2Gs2e6i

15 Great Onboarding Designs for Your Inspiration on Dribbble

10 Great Login Screen UI Designs on Dribbble

30 Great UI Kits for Developers on Dribbble

15 Great Landing Page Examples on Dribbble

7 Direct messaging UI will help your ideas to build mobile apps

Weather app ui was designed by goumy 

When it comes to weather apps in particular, that design has to both be visually well-presented, and accurate. Here we have collected 15 Great Weather Application Ideas on Dribbble. Take the ideas from these beautifully designed weather apps for your next project. Take a look!

References:

WhereTO App by Tiberiu Neamu: https://dribbble.com/shots/1081917-WhereTO-App

GIF for the Weather App by Sergey Valiukh: https://dribbble.com/shots/1824088-GIF-for-the-Weather-App

Weather Dashboard / Global Outlook / Likes [GIF] by Studio–JQ: https://dribbble.com/shots/1388285-Weather-Dashboard-Global-Outlook-Likes-GIF

Weather App by Javi Pérez: https://dribbble.com/shots/1718042-Weather-App

Weather App Concept by Ghani Pradita: https://dribbble.com/shots/2117452-Weather-App-Concept

Weather App by Jona Dinges: https://dribbble.com/shots/1920952-Weather-App

Weather App (Washing Machine) iOS7 by KREATIVA Studio: https://dribbble.com/shots/1210363-Weather-App-Washing-Machine-iOS7

Weather app concept by Virgil Pana: https://dribbble.com/shots/2021508-Weather-app-concept

Weather App by Studio–JQ: https://dribbble.com/shots/2261836-Weather-App

Location Detail to Weather by Ben Cline: https://dribbble.com/shots/1933700-Location-Detail-to-Weather

The Weather Channel Watch App by FΛNTΛSY: https://dribbble.com/shots/2665356-The-Weather-Channel-Watch-App

Weather by BeardChicken: https://dribbble.com/shots/1362152-Weather

Just Another Weather App by Webshocker: https://dribbble.com/shots/1160499-Just-Another-Weather-App

Weather app — Gradients example by Krijn Rijshouwer: https://dribbble.com/shots/3663172-Weather-app-Gradients-example

Weather forecast by Alexey Radzhabov: https://dribbble.com/shots/3423432-Weather-forecast

10 Great Login Screen UI Designs on Dribbble

15 Great Landing Page Examples on Dribbble

15 Great Onboarding Designs for Your Inspiration on Dribbble

Web and app development is growing faster than ever. So, the goal of the designers is to create an impressive user interface. Design UI (User interface) is not easy, especially for beginners. UI Kit is a collection of various components needed to create interfaces, helping designers to make faster and more efficient, save time. With this article, ReactSharing has collected 30 Great UI Kits for Developers on Dribbble, which can help you get familiar with and create the first products. Take a look!

References:

Ui Kit by Mike | Creative Mints: https://dribbble.com/shots/864910-Ui-Kit

UI8 Wireframe Kit by UI8: https://dribbble.com/shots/1115596-UI8-Wireframe-Kit

Ui Kit (Metro) by Mike | Creative Mints: https://dribbble.com/shots/890759-Ui-Kit-Metro

Freebie PSD: Flat UI Kit by Riki Tanone: https://dribbble.com/shots/947782-Freebie-PSD-Flat-UI-Kit

Ui Kit Rainy Season by Sunbzy: https://dribbble.com/shots/1233843-Ui-Kit-Rainy-Season

UI Kit by UI8: https://dribbble.com/shots/1298699-UI-Kit

Ui Kit (Hotel) by Mike | Creative Mints: https://dribbble.com/shots/1075480-Ui-Kit-Hotel

iOS UI Kit Actions by Jeremy Paul: https://dribbble.com/shots/1443459-iOS-UI-Kit-Actions

Mobile Blog App UI kit by Ghani Pradita: https://dribbble.com/shots/2400523-Mobile-Blog-App-UI-kit

Ui Kit (Music) by Mike | Creative Mints: https://dribbble.com/shots/1208110-Ui-Kit-Music

White Ui Kit by Mike | Creative Mints: https://dribbble.com/shots/748382-White-Ui-Kit

UI Kit by Mike | Creative Mints: https://dribbble.com/shots/793447-UI-Kit

MNML UI Kit for Figma by UI8: https://dribbble.com/shots/3737395-MNML-UI-Kit-for-Figma

NOW for Photoshop and Sketch by Anton Aheichanka: https://dribbble.com/shots/2179423-NOW-for-Photoshop-and-Sketch-yours-free

Metro style Ui Kit by Nicola Mihaita: https://dribbble.com/shots/1008262-Metro-style-Ui-Kit

Freebie PSD: Flat UI Kit 2 (Blog) by Riki Tanone: https://dribbble.com/shots/968433-Freebie-PSD-Flat-UI-Kit-2-Blog

Chat–a beautifully minimal UI kit by Anton Aheichanka: https://dribbble.com/shots/2519265-Chat-a-beautifully-minimal-UI-kit

UI Kit Dark (gif) by UI8: https://dribbble.com/shots/1378748-UI-Kit-Dark-gif

Get DO UI Kit for Photoshop & Sketch by Anton Aheichanka: https://dribbble.com/shots/2091055-Get-DO-UI-Kit-for-Photoshop-Sketch

Ui Kit by Mike | Creative Mints: https://dribbble.com/shots/804614-Ui-Kit

Sticky Butterscotch UI Kit – Free PSD by Made By Thomas: https://dribbble.com/shots/306239-Sticky-Butterscotch-UI-Kit-Free-PSD

Livo UI Kit by Barthelemy Chalvet: https://dribbble.com/shots/2202500-Livo-UI-Kit

Ui Kit (Free PSD) by Sanadas young: https://dribbble.com/shots/1173032-Ui-Kit-Free-PSD

UI Kit by Mike | Creative Mints: https://dribbble.com/shots/767552-UI-Kit

iOS 7 UI Components by Raul Taciu: https://dribbble.com/shots/1200218-iOS-7-UI-Components

Elegant UI kit – Dashboard by George Vasyagin: https://dribbble.com/shots/3724589-Elegant-UI-kit-Dashboard

UI Kit Dark [Free] by UI8: https://dribbble.com/shots/1416133-UI-Kit-Dark-Free

MNML iOS UI Kit by UI8: https://dribbble.com/shots/3548926-MNML-iOS-UI-Kit

Music App ui kit – Material by Divan Raj: https://dribbble.com/shots/3374439-Music-App-ui-kit-Material

Facebook Design’s iOS 11 GUI by Andrew Aquino: https://dribbble.com/shots/4015776-Facebook-Design-s-iOS-11-GUI

6 Pro Tips from React Developers

Is it possible to develop apps for iOS using a Windows PC? => It’s certainly possible.

This question has been asked many times. Therefore, we collected plenty of options to get around that. Let’s find out in this article!

Rent a Mac in a Cloud

The fastest option to get up and running is to rent a Mac in the Cloud. You’ll remotely access the Mac and Xcode through your PC. It’ll be like having the Mac desktop in a window on your Windows Desktop.

Services like MacinCloud and MacStadium offer affordable rent-a-Mac products, usually paid on a monthly basis. Prices typically range from $50 to $150 per month, and you can choose from several hardware options including Mac Mini and Mac Pro.

You connect to those cloud-based Macs via a Remote Desktop Connection (RDP). Windows includes a stock Remote Desktop Client you can use, and so do most Linux operating systems. Once you’re logged on, you can install Xcode, and start building your app.

Running a Mac in the cloud has one major drawback: you can’t connect your physical iPhone to Xcode. With Xcode, you can run and debug your app directly on your iPhone if you connect it to a USB-to-Lightning cable. Since your Mac is in the cloud, that’s pretty much impossible.

A solution is, of course, to run your app on iPhone Simulator, right from within Xcode. You can then try out your app and debug it. When you want to run the app on your iPhone, you just install it via TestFlight. If you install a tool such as Crittercism of Crashlytics, you can even monitor and debug live crashes.

Build a “Hackintosh”

You can also build a “Hackintosh” which is a PC that has been customized to run MacOS.

A Hackintosh is a PC that runs macOS. Just like you can install OS X in a virtual machine, or in the cloud, you can install OS X as the bootable operating system on your PC. Switch it on, and OS X loads.

You can also create a dual-boot, i.e., a system that both hosts Windows and OS X. When you boot your PC, you can select the operating system that starts.

Building a Hackintosh can be a tricky exercise, especially if you’re not familiar with PC hardware and creating custom installations. Not all hardware is compatible with macOS. Moreover, Apple has, of course, created safeguards against booting OS X on unsupported hardware.

Nevertheless, it’s a good option for running OS X on your custom hardware, and booting OS X on your Windows PC. Check out hackintosh.com for more information, and step-by-step guides.

Virtualize macOS/OS X

The easiest way to develop iOS apps on a Windows PC is by making use of a virtual machine. A virtual machine will create an environment an operating system can run in as if it’s running on the hardware itself.

This is called virtualization, and it allows you to run Windows on Linux, OS X on Windows, and even Windows on OS X.

To run OS X on a virtual machine, you need two things:

A copy of OS X, as an installer or virtual image file

A virtual machine tool, like VirtualBox (free) or VMware (paid)

The recommended system specs are: 4-8 GB of RAM, an Intel i5 or i7 compatible CPU, and at least 10 GB of free disk space.

Develop iOS Apps on Windows with Cross-Platform Tools

Cross-platform tools are fantastic: you code your app once and export it to iOS and Android. That could potentially cut your app development time and cost in half. Several cross-platform tools allow you to develop iOS apps on a Windows PC, or allow you to compile the app if there’s a Mac on your local network.

Well, not so fast…

The cross-platform tool ecosystem is vast. On the one side, you have complete Integrated Development Environments (IDEs) like Xamarin, which allow you to build cross-platform apps with C#.

The middle ground is covered by tools like PhoneGap, Cordova, Ionic, and Appcelerator, that let you build native apps with HTML5 components. The far end includes smaller platforms like React Native that allow you to write native apps with a JavaScript wrapper.

The one thing that stands out for all cross-platform tools is this: they’re not beginner friendly! It’s much easier to get access to a Mac, learn Swift, and build a simple app than it is to get started with Xamarin.

Most of the cross-platform tools require you to have a basic understanding of programming, compilation options, and the iOS and Android ecosystems. That’s something you don’t have as a beginner developer!

Let’s look at a couple of options:

If you’re familiar with Windows-based development tools and IDEs, and if you already know how to code, it’s worthwhile to check out Xamarin. With Xamarin you code apps in C#, for multiple platforms, using the Mono and MonoTouch frameworks.

If you’re familiar with the web-based development, check out PhoneGap or Ionic. You’ll feel right at home with HTML 5, CSS and JavaScript. Don’t forget: a native app works differently than a website.

If you’re familiar with JavaScript, or if you’d rather learn to code JavaScript than Swift, check out React Native. With React Native you can code native apps for iOS and Android using a “wrapper”.

15 Great Onboarding Designs for Your Inspiration on Dribbble

10 Great Login Screen UI Designs on Dribbble

“In online marketing, a landing page, sometimes known as a “lead capture page” or a “lander”, or a “destination page”, is a single web page that appears in response to clicking on a search engine optimized search result or an online advertisement.

Landing pages are often linked to social media, e-mail campaigns or search engine marketing campaigns in order to enhance the effectiveness of the advertisements. The general goal of a landing page is to convert site visitors into sales or leads. If the goal is to obtain a lead, the landing page will include some method for the visitor to get into contact with the company, usually a phone number, or an inquiry form. If a sale is required, the landing page will usually have a link for the visitor to click, which will then send them to a shopping cart or a checkout area. By analyzing activity generated by the linked URL, marketers can use click-through rates and conversion rate to determine the success of an advertisement.” – wikipedia.org

Here we have collected 15 Great Landing Page Examples on Dribbble. Take a look!

References:

1. Potato landing page by Eldin Herić: https://dribbble.com/shots/2042501-Potato-landing-page 2. Economist landing page by ueno.: https://dribbble.com/shots/1104329-Economist-landing-page 3. Close landing page by Eddie Lobanovskiy: https://dribbble.com/shots/968439-Close-landing-page 4. Final Card Landing Page by Eric Hoffman: https://dribbble.com/shots/1757843-Final-Card-Landing-Page 5. magic.co landing page concept by Ludmila Shevchenko: https://dribbble.com/shots/2719343-magic-co-landing-page-concept 6. Data visualization / Statistics / Notification lading page by Julien Renvoye: https://dribbble.com/shots/1390426-Data-visualization-Statistics-Notification-lading-page 7. Analytics Landing Page by Michael Pons: https://dribbble.com/shots/2132642-Analytics-Landing-Page 8. Crugo Landing Page by Ghani Pradita: https://dribbble.com/shots/2999436-Crugo-Landing-Page 9. Paperpillar Studio Landing Page by Ghani Pradita: https://dribbble.com/shots/2478322-Paperpillar-Studio-Landing-Page 10. DDC Landing Page by Mason Yarnell: https://dribbble.com/shots/1602947-DDC-Landing-Page 11. Memoir Landing Page by Eddie Lobanovskiy: https://dribbble.com/shots/1727359-Memoir-Landing-Page 12. Landing Page Animation by Sergey Valiukh: https://dribbble.com/shots/2623261-Landing-Page-Animation 13. Landing Page – Website by Ramotion: https://dribbble.com/shots/3139404-Landing-Page-Website 14. Animated Financial Landing Page by Ramotion: https://dribbble.com/shots/3255223-Animated-Financial-Landing-Page 15. Landing Page by Andrew Baygulov: https://dribbble.com/shots/2087138-Landing-Page

This is Reactive Search – a UI components library for Elasticsearch (v2). These components are more configurable, lighter and performant.

The whole source code can be browsed on GitHub. It’s licensed under Apache version 2.0.

There are over 30 different components such as a range slider, a rating filter, a data search UI, etc. Showing the results in a variety of different ways. These components are styled and offer customizable Elasticsearch queries.

Not only that, you can create your own components: for instance, if you are following a design kit, or if you have an existing UI, you can bring those components into Reactive Search.

Designer templates for sketch are also offered so that you can create accurate mock-ups for Reactive Search UIs.

Moreover, Up to 10x time savings when using Reactive Search.

The resulting code is much smaller resulting in faster iteration cycles and fewer edge cases to solve. You can build a live app in less than 5 minutes.

More information at: https://opensource.appbase.io/reactivesearch

15 Great Onboarding Designs for Your Inspiration on Dribbble

Here we have collected 15 Great Onboarding Designs for Your Inspiration on Dribbble. Take a look!

References:

1. Neo Kids – Onboarding Concept by Minh Pham: https://dribbble.com/shots/3982257-Neo-Kids-Onboarding-Concept 2. Onboarding Animated by Anastasiia Andriichuk: https://dribbble.com/shots/2554311-Onboarding-Animated 3. iOS App Onboarding – Animation by Ramotion: https://dribbble.com/shots/2692142-iOS-App-Onboarding-Animation 4. Onboarding animations by Virgil Pana: https://dribbble.com/shots/2019789-Onboarding-animations 5. Onboarding Screen by Ghani Pradita: https://dribbble.com/shots/2298047-Onboarding-Screen 6. McDonald`s Onboarding by Dmitry Mokhar: https://dribbble.com/shots/2898927-McDonald-s-Onboarding 7. Onboarding iOS – Friendly App by Friendly App: https://dribbble.com/shots/3136445-Onboarding-iOS-Friendly-App 8. Countingup onboarding animation by Divan Raj: https://dribbble.com/shots/4047761-Countingup-onboarding-animation 9. Google docs app onboarding interaction by Divan Raj: https://dribbble.com/shots/3056941-Google-docs-app-onboarding-interaction 10. My Diet App Onboarding by Johny vino™: https://dribbble.com/shots/3519538-My-Diet-App-Onboarding 11. Onboarding to community by Johny vino™: https://dribbble.com/shots/4039727-Onboarding-to-community 12. Animated Onboarding screens by Divan Raj: https://dribbble.com/shots/3233879-Animated-Onboarding-screens 13. My Fitness App – Onboarding by Johny vino™: https://dribbble.com/shots/3453320-My-Fitness-App-Onboarding 14. meeetup onboarding by Wojciech Zieliński: https://dribbble.com/shots/3304633-meeetup-onboarding 15. Education app Onboarding by Johny vino™: https://dribbble.com/shots/3678520-Education-app-Onboarding

React Top 30 Articles of 2017

Here we have collected 30 Awesome Articles of 2017. Give a plenty of time to read all of the articles you have missed. You will find the experience and techniques shared by React leaders particularly useful.

References:

Our Best Practices for Writing React Components by Scott Domes: https://buff.ly/2CQSeVj

Every time you build a to-do list app, a puppy 🐕dies 😢by Hrishi Mittal: https://buff.ly/2AE6TgT

Setup a React Environment Using webpack and Babel by Joy Warugu: https://buff.ly/2CRzFAv

React Native at Instagram by Instagram Engineering: https://buff.ly/2CUhvOo

How I converted my React app to VanillaJS (and whether or not it was a terrible idea) by David Gilbertson: https://buff.ly/2AF56YH

How to build animated microinteractions in React by Christian Sepulveda: https://medium.freecodecamp.org/how-to-build-animated-microinteractions-in-react-aab1cb9fe7c8

Twitter Lite and High Performance React Progressive Web Apps at Scale by Paul Armstrong: https://buff.ly/2AErEsC

Introducing Sizzy —A tool for developing responsive websites crazy-fast by Kitze: https://medium.com/@kitze/introducing-sizzy-a-tool-for-developing-responsive-websites-crazy-fast-39a8c0061992

45% Faster React Functional Components, Now by Philippe Lehoux: https://medium.com/missive-app/45-faster-react-functional-components-now-3509a668e69f

Things nobody will tell you about React.js by Gianluca Guarini: https://medium.com/@gianluca.guarini/things-nobody-will-tell-you-about-react-js-3a373c1b03b4

Build your first progressive web app with React by Scott Domes: https://buff.ly/2AFzTVn

Create React App with an Express Backend by Dave Ceddia: https://daveceddia.com/create-react-app-express-backend/?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more

Rearchitecting Airbnb’s Frontend by Adam Neary: https://buff.ly/2AFGY8o

After building my first React Native app, I’m now convinced it’s the future by Taylor Milliman: https://buff.ly/2AErEJ8

How HBO’s Silicon Valley built “Not Hotdog” with mobile TensorFlow, Keras & React Native by Tim Anglade: https://medium.com/@timanglade/how-hbos-silicon-valley-built-not-hotdog-with-mobile-tensorflow-keras-react-native-ef03260747f3

Creating truly universal React component systems by Max Stoiber: https://buff.ly/2CPXHf6

Understanding Higher Order Components by Tom Coleman: https://medium.freecodecamp.org/understanding-higher-order-components-6ce359d761b

Animating the Virtual DOM by Sarah Drasner at React Europe 2017: https://www.youtube.com/watch?v=W5AdUcJDHo0

Build a Mini Netflix with React in 10 Minutes by Prosper Otemuyiwa: https://scotch.io/tutorials/build-a-mini-netflix-with-react-in-10-minutes?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more

A React And Preact Progressive Web App Performance Case Study: Treebo by Addy Osmani: https://buff.ly/2CU60Xu

7 architectural attributes of a reliable React component by Dmitri Pavlutin: https://dmitripavlutin.com/7-architectural-attributes-of-a-reliable-react-component/?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more

What’s New With Server-Side Rendering in React 16 by Sasha Aickin: https://hackernoon.com/whats-new-with-server-side-rendering-in-react-16-9b0d78585d67

8 Key React Component Decisions by Cory House: https://medium.freecodecamp.org/8-key-react-component-decisions-cc965db11594

The 100% correct way to structure a React app (or why there’s no such thing) by David Gilbertson: https://hackernoon.com/the-100-correct-way-to-structure-a-react-app-or-why-theres-no-such-thing-3ede534ef1ed

How We Built Our React Native App by Siddharth Jain: https://medium.com/engineering-housing/how-we-built-our-react-native-app-3380a33811ac

You might (not) need a Server Side Rendering framework by Adrien Harnay: https://adrienharnay.me/you-might-not-need-a-server-side-rendering-framework/?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more

Setup Continuous Integration with React Native by Spencer Carli: https://medium.com/react-native-training/setup-continuous-integration-with-react-native-50ad2f6145f4

React Native meets iPhoneX by Raúl Gómez Acuña: https://blog.callstack.io/react-native-meets-iphonex-a0f5034f7a41

6 Simple ways to speed up your react native app by Atinder Singh: https://codeburst.io/6-simple-ways-to-speed-up-your-react-native-app-d5b775ab3f16

Network layer in React Native by Kureev Alexey: https://medium.com/dailyjs/network-layer-in-react-native-eec841f11861

Writing unit & end-to-end tests to ship your mobile app with confidence

Pillow Pro app = React Native + Jest + Detox + Bitrise

At Pillow, we release an update to our Pillow Pro app (iOS & Android) every 2 weeks or so. Most releases are over-the-air (OTA) updates that are done using CodePush, and are fully automated with Bitrise. If you would like to know more about our CodePush + Bitrise CI setup, read my previous blog post here.

In this post, I’ll be talking briefly about why we need to test our app and the kinds of tests we can use. Then, I’ll jump straight into how we use Jest (unit tests) and Detox (end-to-end tests) for our Pillow Pro app. And finally, I’ll talk about running these tests on a CI such as Bitrise.

Why test our mobile app?

The most important reason is to ensure high product quality. Testing can help identify bugs introduced during the development phase of the app and addressing these bugs before release means that your users will always get to use a reliable product.

What kind of tests can we use?

Unit tests are used to test small modular pieces of code (aka units) independently.

Integration tests combine related “units” together and test them as a group.

End-to-end tests are comprehensive, user-level tests that ensures that the flow of the app works as intended from start to finish.

Regression tests help to verify that the software that was previously developed and tested still performs the same way after a few changes.

Unit tests: Jest

Jest is a JavaScript Testing framework built by Facebook and it ships with React Native by default (starting v0.38.0).

One of my favorite things about Jest is a feature called Snapshot testing.

Snapshot tests are a very useful tool whenever you want to make sure the UI for a component or the object from an redux action or reducer does not change unexpectedly.

Here’s a good explanation of what a snapshot test is. A snapshot test generates a snapshot of a component and compares it against itself every time the tests are run. This helps us easily identify unintended side-effect changes and update the tests as needed.

Check out the official Jest docs if you are curious to learn more about Snapshot testing: http://ift.tt/2lljMog

Configuration

The official docs for Jest are great. Just follow this guide and you should be up and running in no time.

Usage

We have tests for redux actions, redux reducers and all of our UI components.

In the same directory that a new component, action or reducer is added, we create a __tests__ folder and create a file within it named _new_component.spec.js. Then refer to the below templates for an action, reducer or component respectively and modify the test to fit the specific use case.

1. Redux Actions

http://ift.tt/2xiIvUX

2. Redux Reducers

http://ift.tt/2jcoZCX

3. Components

http://ift.tt/2xjix3z

Finally run npm run test. This will create a new __snapshots__ folder in the same directory and add the generated snapshots in there.

Additionally, you can also add code coverage to figure out how well your codebase is tested as a whole. Here’s a simple example on how to set this up.

Jest tests for Pillow Pro app

E2E tests: Detox

An end-to-end test emulates a user by finding and interacting with pieces of UI in your app in a production/release environment.

Detox is a gray box E2E Tests and Automation Library for Mobile Apps built by Wix

We initially wrote our end-to-end tests using Appium which is an open source test automation framework for mobile apps. But Appium did not provide a pleasant developer experience at all for two main reasons:

The setup was pretty complicated & had too many moving parts.

The tests were really flaky, meaning a lot of tests would fail for no apparent reason and had to be re-run to pass.

We then looked into Detox as an alternative and were pretty impressed by how simple the setup was. So we gave Detox a shot and have not looked back since. The only caveat is that Detox currently works only on iOS and Android support is still WIP.

Recently Detox has been getting a lot of attention from the React Native community as Microsoft, CallStack.io and Wix are all dedicating resources to help improve the framework. Hopefully, it will soon mature into the go-to E2E testing framework for React Native apps.

Getting Started

Setting up Detox is surprisingly simple. Just follow the getting started docs and you should have your first test passing within minutes.

Usage

Permissions A really useful feature in Detox is the ability to set iOS permissions as part of the tests. In our case, we request Push Notification permissions as well as Location permission when the app is in use. Here’s how we handle them in Detox:

http://ift.tt/2xiizsd

Login Here’s a simple example of what a detox test for logging into the app might look like:

http://ift.tt/2jbFTSf

Demo

And finally, here’s a part of our E2E test suite in action. Couple things to note:

We use await device.reloadReactNative(); to make sure the app is reloading after every test. Hence you’ll notice a screen flash after the user logs in for instance.

To give you some context on what you are seeing below: The Pillow Pro app is used by Pillow Pros to complete cleaning activities for Pillow Residential Units.

Detox tests for Pillow Pro app

Continuous Integration: Bitrise

Once you have all the tests working locally, you can configure them to run on a CI service such as Bitrise. We have a tests workflow that runs the unit tests and end-to-end tests on every commit and posts the build status back to our Slack channel.

You can view the entire Bitrise .yml file for the tests workflow here.

Tests workflow on Bitrise

Conclusion

Overall, adding unit & end-to-end tests has given us the freedom to make substantial changes to our app without having to worry about breaking existing functionality and ship new features with confidence. Also, automating the tests on Bitrise CI has helped us streamline our release pipeline by preceding every release with the tests workflow.

Hopefully, this post details how easy it is to test a React Native app and automate the testing process as well. Feel free to ask us any questions you might have regarding our setup and we would be more than happy to answer them.

Lastly, we’re hiring! Check us out: pillow.com/careers 🙌🏽

Additional Reading

Jest

[Docs] Intro to Jest

[Docs] Intro to Snapshot Testing with Jest

[Blog Post] Testing with Jest — Part 1

[Blog Post] Testing with Jest — Part 2

[Blog Post] React-Native — Testing redux apps with Jest/Enzyme

Detox

[Docs] Detox Getting Started Docs

[Repo] AppleSimulatorUtils (for setting permission on iOS apps)

[Blog Post] How to Test your React Native App Like a Real User

[Blog Post] End-to-end testing on React Native with Detox

Testing in React Native — Jest & Detox was originally published in Pillow.codes on Medium, where people are continuing the conversation by highlighting and responding to this story.

via React Native on Medium http://ift.tt/2xWvC2r