A team of four Labbers is attending the BBC Digital Taster Event in Middlesbrough this week, where we’ll be running a workshop on building web applications for students ages 13-19. Here is Rob Cochran’s introduction to the technologies we use for rapid prototyping.
Before you begin building your million-dollar app, you need to decide what platform you want it to be used on: web browser, Android or iOS.
Web Apps with React
Want to build a web application? You’ll probably want to get familiar with React.
React is used for creating a presentation layer for your application, known as the front-end. The checkboxes users select, the news feeds they scroll through, and the faces they swipe left or right on? Those can all be built with React. It was developed by Facebook and it’s taken the market by storm because it’s flexible, powerful, adaptable and — once you learn it — easy to apply to many situations.
Find out more: “Tutorial: Intro to React”, Facebook
iOS and Android Apps with React Native
If you want to build an app for mobile / tablet (iOS / Android), then React Native is a good front-end tool for you. It’s similar to React, but it taps into the native functionality of your phone or tablet. This allows it to make use of GPS, cameras, microphones, accelerometers etc.
Find out more: “Tutorial”, React Native
Hyper-Text Markup Language (HTML) has been around for ages. It’s the workhorse of the internet, and it’s still very much in use today. It’s the easiest type of code in this tutorial and integral in any browser-based application. React will take care of some of your HTML, but it’s still really important to know how it all fits together.
Find out more: “HTML5 and CSS3 Tutorial”, html5andcss3.org
Make it SASSy
You have an endless range of possibilities available when deciding how you want your app to look. You may want to consider things like the accessibility of your app, e.g.: if a user doesn’t see very well, they might need the text colour to contrast with the background, so they can read the words more easily. Be aware that complex styling can take a while for a user to get their head around, so try to keep your design intuitive!
All of an app’s colours and shapes are controlled by Cascading Style Sheets (CSS3), which these days are more commonly put together using Syntactically Awesome Style Sheets, or SASS for short.
Find out more: “Getting Started with SASS”, scotch.io
Find out more: “ECMAScript 6 Tutorial”, Christophe Coenraets
Environment, the back-end
In many cases, your front-end application will need to talk to another application that lives on a server and can handle things like databases, which can store things like user login details. Front-end is often called client-side, which means that it works on the client, or platform — your laptop or tablet. Back-end is often called server-side which means that it works on a server somewhere else. It’s made available by requesting content over the internet.
APIs: Application Programming Inter-what-nows?
Many applications use third-party services to provide them with information. For example, you may want to ask Google for restaurants near a user’s current location. To do this, you’d use what’s known as an Application Programming Interface (API), which allows your application to talk to another service. APIs are everywhere, and to use them you need to familiarise yourself with HTTP requests.
If your application needs user accounts or needs to permanently ‘remember’ other things for your users, you’ll need to store the information somewhere. This is where databases kick in. Like languages and environments, there are different options for database systems, but MongoDB is a popular storage system that connects well with Node and React.
Find out more: “A Basic Introduction to Mongo DB”, Mongo DB
When developing code, you will need a way to deploy it, share it, have other people work on it and track changes. The BBC and most organisations use (Git)[http://github.com].
Find out more: “Got 15 Minutes and Want to Learn Git?”, Code School
Ready to start building? Take a look at our Million-Pound App tutorial. You’ll modify an app that uses the Open News API to present a live feed of recent news stories to users.