Building your startup with Python, React, React Native and AWS
It all begins with an idea.
Ideas are exciting. You want to get started right away and make your idea come to life. It might be that you are thinking of doing a side project, trying out new technologies at work, or preparing to launch a startup.
In January I launched my first startup, Proximistyle. For any outfit, Proximistyle lets you see which shops have it in stock, in your size, nearby. Proximistyle is built on a React, React Native, Python and AWS stack. I chose this stack both because I had previous experience working with it from my old job as a quant developer in a stystematic hedge fund, and because it is an easy stack to hire for.
The Proximistyle website was made in React and the iPhone app was made using React Native. They both use the same API to talk to the a shared AWS hosted Python backend.
React
React is an easy to learn JavaScript library that makes it painless to make interactive UIs. The power of React is that it lets you build your UI from a modular mixture of library and custom components. The power of components is that you can write a piece of your website once, and then reuse it multiple times.
Take this TODO list as an example. A task on your TODO list is one component (orange). This means that if you wanted to change all your tasks to begin with a star emoji, you would only need to update your task component. All the places using your task component would immediately get updated. The TODO list itself (purple) is also a component. This follows the programming principle of Don’t Repeat Yourself (DRY).
Notable React Features
React code is structured into a series of components, and assembled as a hierarchy tree. You have a root component at the top, and the rest of the page is connected to this.
#1 One-Way Data Flow
Data flow in React is one-directional from parent to child. Data passed into a child is considered immutable.
#2 Virtual DOM
React uses a virtual DOM, which is an in-memory data cache of the entire website. Whenever the data for a component changes, a diff is computed and only the affected components are updated. This means that your website updates very quickly when changes happen.
#3 JSX
React uses a language called JSX, which stands for JavaScript XML which essentially allows you to write HTML in your JavaScript.
#4 Conditional Statements in Your JSX
Conditional expressions in your JSX give you the ability to dynamically change content depending on variables. You can for instance show content when a button is clicked.
#5 Libraries
One of the biggest benefits of react is the vast availability of libraries. There are available libraries for pretty much any component you would like your webpage to have. Sliders, carousels, maps, etc. This makes it very quick to get a website up and running. Two common package managers for libraries are NPM and Yarn.
Key Benefits of Using React
#1 Speed, Simplicity, Scalability
The component based architecture of React lets you quickly and easily create a website on a hobby or unicorn scale.
#2 Don’t Repeat Yourself
Using components mean creating once, and reusing everywhere.
#3 Easy to Learn
If you know HTML and JavaScript, React is very easy to get started with.
#4 Wide Industry Adoption
React is widely used in industry, by amongst others Facebook, Instagram and Airbnb. This means that it’s easy to hire for, and easy to find online documentation and tutorials.
React Native
React Native is very similar to React, except it compiles to Android and iOS instead of a website. It enables you to write your mobile app in React, which means you can compose your UI from rich, declarative components. Using React Native does not mean that you’re writing a mobile web app however. It compiles to a native app.
If you already know React, learning React Native is pretty easy, as the syntax is the same. The main differences are the libraries available, and different built-in components.
React Native does not use HTML tags that React uses, as it compiles to mobile and not web. In React you would use <div> and <p> tags to display a paragraph, whereas in React Native you would instead use <View> and <Text> tags.
There is a library called React Primitives that lets you reuse many components across your React and React Native projects, to avoid code duplication. The aim of this project is to one day be able to write once, and deploy 3 times — to web, Android and iOS. Leland Richardson from Airbnb has a great talk about the code duplication they are hoping to get rid of by combining web, iOS and Android into one code base.
Key Benefits of Using React Native
#1 Write Once, Deploy Twice. A Leaner Engineering Team.
The key benefits of using React Native is that you can reuse some of your code, and you will only have to write your app once instead of twice. This makes hiring easier as you can keep a leaner engineering team. This make a big difference on your bottom line when you are an eary stage startup.
#2 Wide Industry Adoption
React Native is very widely used in industry, by amongst others Airbnb, Facebook and Instagram. This makes it easy to hire for, as it is a widely adopted skill. It also means that there are a lot of online resources available. You will find plenty of up-to-date libraries solving your most common needs, and answers to your issues on StackOverflow and in blog posts.
#3 Rapid Development using Hot Reloading
One of the best things about developing an app in React Native is the development speed. Using Hot Reloading, you can reload your app instantly without recompiling. It’s literally as fast as refreshing a website. Hot Reloading even lets you retain application state whilst running new code.
#4 Support for Natively Written Components
React Native supports both JavaScript and native code (Swift, Objective-C or Java). This means that if you can’t find a library that solves your problem, you can write your own component in either React or Native code. Your app can use the native code directly, and imports it as if it was any other component.
#5 Easy to Learn, Quickly Go from Idea to the App Store
I decided to make the Proximistyle iPhone app in February, after our users kept continuously asking for an app. Having never made an app before, but knowing React, I managed to get the app onto the Apple app store by mid-March.
The differences between making Proximistyle as a React website and as an app were bigger than I first expected (it takes longer than a weekend), but the main part of the learning curve is figuring out how to run your app on your phone and getting used to xcode and all its peculiarities.
One of the main differences in designing your UI is that React Native uses flexbox instead of the CSS grid. This takes a little bit of time to get used to, if you are very used to working with grids. React Native also has animation libraries, native swiping and neat built-in data structures for scrolling components.
Once I got used to it, I very much enjoyed the flow, and saw that the user experience of using Proximistyle as an app instead of in a mobile browser was decidedly 10x.
Getting started with React
It is incredibly easy to get started with React if you use Facebook’s create-react-app script. It is literally a script you download from GitHub and run in your terminal to initialise your repository.
npx create-react-app my-app
cd my-app
npm startCreate-react-app takes care of all the finicky setup steps with Webpack and Babel, so you can get right to work. If you do need to configure these manually, you can see how to do that in my blog post or talk from EuroPython last year.
React Enables Rapid Iterations
When you are building the MVP for your startup, you would normally start by sketching out what you think your UI should look like. The quickest way to test a prototype would be to use something like Sketch and InVision to mock it up, put it on your phone and show it to people. That is what I did with Proximistyle. Once you’re past that stage, you will want to build an interactive UI pretty quickly.
When you are building a website in React, it is trivial to put dummy data into your system where your API calls would normally return it. Because the data flow is one-directional, you can add the data high up in the tree and check that your application behaves as expected very easily. You can then user test your early interactive prototype to check that it is what your users want. This will save you precious development time.
Making API Calls
Once you are happy with your front-end, you can connect it to your backend API. I would normally use jQuery, fetch or Promises to make API calls from React code.
fetch('api.example.com')
.then(response => response.json())
.catch(error => console.log(error));Because I would want to get my backend up and running quickly, I would code it in Python and host it on AWS.
Python
Python is one of the most versatile languages out there. You can use it for everything from tiny scripts, to data science and entreprise systems. Multiple systematic hedge funds, including the one I used to work for, are Python houses. That means that the research happens in Python, with SciPy and Numpy. The trading systems are written in Python, probably with a Docker wrapper, and the random scripts people write to automate bits and bobs will also be written in Python. You can even scrape websites using Python.
Python comes installed on Mac and Linux by default, and is effortless to get started with. Simply use the terminal or open up your favourite editor and start typing.
def hello_world():
print('Hello World!')if __name__ == '__main__':
hello_world()
Hosting our Backend
When it comes to writing the backend for our website or app, we have a lot of options depending on what we are trying to build. One option is to use Flask, Django or Pyramid to create a server that we host somewhere. The other option is to use a serverless architecture.
The benefit of using a serverless compute architecture is that you only pay for exactly the amount of server resources and time you use. This can significantly reduce your startup’s operational costs and complexity, especially when your backend is not called very often. The most popular serverless compute solution is AWS Lambda.
Amazon Web Services (AWS)
Amazon Web Services is arguably the world’s most popular cloud hosting solution. It is used by hobbyists, startups, unicorns and enterprises alike. Some startups you’ve probably heard of who use AWS are Spotify, Airbnb, Slack and Lyft. As with the rest of this technology stack, the wide industry adoption makes it easy to hire someone who knows this, and you can find a lot of answers to common issues online.
AWS offers every service you can imagine. Storage, compute, monitoring, networking, analytics and machine learning. There are hundreds of options to pick from, which can be quite daunting if it’s your first foray into hosting something. I ended up asking friends in the space to recommend particular AWS services, as it was quite hard to see the forest for the trees. I also did some research online. Eventually I discovered that you mainly need to be aware of the most popular services, which will cover 90% of your needs. They are:
- Route 53 (DNS. Needed for SSL)
- Cloud Front (Worldwide Edge Caching for your website)
- S3 (Website Hosting)
- API Gateway (Your public API end-point)
- AWS Lambda (Serverless compute)
- EC2 (Compute)
- DynamoDb (NoSQL database)
A Basic AWS Architecture
AWS offers several helpful getting started wizards and tutorials that I highly recommend you use to begin with. It makes setup a lot easier, and ensures you do not misconfigure anything. It is also a nice way to get familiar with how AWS works.
S3 Buckets
S3, which stands for Simple Storage Service, is pretty much what it says on the tin. It is a bucket you upload your documents to. You can then decide if the bucket is private or public. If you upload your react code and make it public, you have a static website. Easy as that.
// create an S3 bucket
$ aws s3 mb s3://bucketName// build and deploy your React app
$ npm run build && aws s3 sync build/ s3://bucketName
Costs for S3 are ~ $1–3/month if all you want is to host a static website.
API Gateway
API Gateway is used to communicate between your website and your backend. It is fairly straightforward to configure, and allows you to easily push out API changes in self-defined stages like beta and prod. You can also add access or usage restrictions for your API Gateway APIs. The default timeout for an API call is 30 seconds.
AWS Lambda
Amazon’s serverless compute is called AWS Lambda. A lambda function is essentially a function that only exists for the time it takes to run it. When you call a lambda function, it spends a fraction of a moment starting up, it goes and does the thing you asked it to do, and then returns the result. You are only charged for every 100ms it took to execute the the function, compared to paying per minute or hour for a normal server. You are not charged anything when your code is not running.
It is worth noting that you can set your own custom timeout for a lambda function, but keep in mind that if you’re calling it from the API Gateway, the API call might time out before the lambda function finishes, which means it might look like you call failed when it didn’t.
Another benefit of using lambdas is the scalability. Because all your lambas run in parallel, your application scales perfectly, as long as what it communicates with can also handle the scale.
One of my main reasons for chosing to use lambdas was that it meant I didn’t have to maintain my own servers. Having used servers for other hobby projects, and having been a Linux user some years ago, I know how time consuming server maintainance can be even just on a personal scale. This was also one of the reasons I moved from Linux to Mac not long ago. It’s not worth the hassle.
AWS Free Tier
If you are creating an AWS account for the very first time you are elegible for the AWS Free Tier. It lets you try out AWS essentially for free for a year, as long as you don’t use too many resources. This is a huge help if you are launching a new startup, as you will most likely have no money when you start building out your brilliant new idea. If you can prove to AWS that you are a new startup, you might even be approved for the Bulders grant, which gives you $1,000 in free AWS credits. It might not sound like much, but it goes a long way.
Pitfalls and Gotchas
There are many pitfalls an gotchas to using AWS, especially in the beginning. It is very easy to waste a lot of time trying to figure out why one component is not communicating with another one, only to figure out you haven’t configured networking or permissions correctly. I have written about this in a previous blogpost, which I recommend having a look at to avoid some headaches.
Final Thoughts
You should now have a better idea of why picking your startup’s technology stack based on how easy it is to get started with, hire for and Google the issues is a good idea. Hopefully this post is a helpful push in the right direction to take you from idea to MVP.
If you do read this and then end up building something, let me know. I’d love to hear what you’re working on. Email me on angela@proximistyle.com to tell me all about it!
Angela Branaes is the founder of Proximistyle, a RetailTech startup that helps you find what you’re looking for nearby. She has a Computing degree from Imperial College London and has previously worked at a systematic hedge fund, a tier one bank and a silicon valley company before she bravely quit her job to start her own startup.
