Full-stack development by using Symfony and React Native

Nowadays web presence is not enough. More and more people are having their own pocket computers - smartphones. This is providing companies and developers with a new way of serving content to their customers. They must have is a responsive website - it means that it scales automatically to fit user’s device screen and display content in such a manner that will encourage users to stay longer on the website while giving them a good experience on smaller devices. Next step is a dedicated mobile application for Android and iOS devices. Users who downloaded these applications are usually more involved in the company’s life and their products which, in most cases, results in a bigger chance of reaching for the company's goods and services.

What to choose for backend and why PHP?

In web development, there is a number of commonly used programming languages and if it comes to backend one of the most popular are PHP and Python as both of them are reliable and fast. 

Tiobe Index: https://www.tiobe.com/tiobe-index/ 

Regarding your choice, you will be fine with any of them. As my experience goes with PHP I will stick with it (and by the way, who don’t like to have some $dollars :)

At this point, we still have to (or rather supposed to) choose one of the frameworks which helps us with development big, scalable applications which are much easier to maintain than ones written in ‘pure’ PHP. Most common choices here are Symfony and Laravel, both have their pros and cons which you need to be aware of, however, you will be more than fine with either of them. With this in mind, let’s pick Symfony as it’s documentation is really good and nice to work with.

React Native for the new frontend approach 

Frontend with each year (or even day!) becomes more powerful than ever. Today, it not only decide which fonts and colors to load but also contains some business logic, interact with a user by push notifications, give the application access to user’s locations, camera, etc. This provides apps with really smooth performance and usefulness or just ‘simply’ makes people love them and use them daily. I am sure everyone knows about such applications like Facebook, Instagram, Bloomberg, Uber Eats or Soundcloud, which generate really big traffic and makes a lot of money to their owners.

In mobile development, there is also a lot to choose from. First, you need to pick the right approach to - write applications natively (separate code base for Android and iOS) or make it with cross platform technology which saves us a lot of resources - one code base = one development team for both platforms. At this point, there is nothing to fear of the second approach. For most of MVP, startups or smaller projects I strongly recommend going for cross-platform such as React Native. Remember those big apps I mentioned above? All of them use React Native and prove that this technology can be widely used even in big projects! Another advantage of choosing React Native for mobile development is that a lot of front-end developers know React.js which is a good starting point to go into mobile. React Native is written in JavaScript which makes it really easy for your current developers and makes it, even more, cost-effective as you don’t have to extend your dev team. Not to mention that React Native is supported by both open source community and Facebook itself so we can be secure that it won’t vanish from the market soon.

React Native development saves a lot of time due to hot reloading feature which allows us to refresh application without losing its state and going back to the home screen - really useful when playing with styles!

What do you need for Symfony and React Native project?

To start each full-stack application we need to prepare two environments, hopefully, both of them are quite easy to go with but all of them have some requirements to work.

To run current (4.2) Symfony all we need is PHP in version higher than 7.1 and globally installed Composer. That’s it, quick and simple.

The main requirement for React Native development (and iOS in general) is to have a computer running MacOS system. That’s why we will focus on setting a project on this system as it is capable of writing and running applications for both platforms. 

Beside operating system, all you will need is Node (8.3 or newer), Watchman, and the React Native command line interface. Depending on the platform you want to write for you will also need Xcode for iOS and a JDK, and Android Studio for Android. Whole process is described in React Native CLI Quickstart tab.

I need to mention that if you don’t have MacOS computer you can write for iOS using Expo client which lets us develop without Xcode or Android studio configuration. It might be tempting, however, writing in that way results in much bigger application size (Hello World starting from 25mb), Expo itself adapts new features much slower and also limits us so we can’t use native libraries (we can link them while writing in ‘pure’ React Native).

Let’s start!

After we meet all requirements we can start full stack development adventure!

To start new Symfony applications all we need to do is to write in the console:

composer create-project symfony/website-skeleton awesome-application

Next thing is just to go to your project directory and run

symfony server:start

That’s it, done, you are ready to go :)

Starting React Native application is a bit harder as you need to install and configure Xcode and Android Studio however it shouldn’t take more than 15 minutes. Hopefully, there is good documentation about it.

When you go through this configuration creating new applications is really simple:

react-native init AwesomeProject

Like with Symfony you need to go to the project directory and then run one of two commands:

react-native run-android

to run it on Android emulator or:

react-native run-ios

to open iOS simulator.

In case you want to run in on Android emulator you need to create and open AVD in Android Studio first.

All that might sound a bit complicated at start but trust me it is not. And bear in mind that you do it only once and then you can create your application lighting fast.

Practice, practice, practice

Sometimes new developers ask how they can be better at coding and the best and only answer is “through coding”. That’s why in the next parts I will show you real examples of React Native and Symfony full stack development (with links to public repositories) so that we can practice together as well as check application in action :)