Posts

Increase Your App Adoption

At Oak City Labs we develop using a particular stack of technologies we are not only comfortable with, but believe to be the most effective tools in solving whatever challenges come our way. Too often when a developer says “We use X framework or Y library”, it sounds like utter gibberish and has no real meaning to non-technical people. This disconnect is the inspiration for my blog series: Non Technical Overviews of Technical Things.

In this post, I will cover Flask, the web framework we use. You can think of a web framework as a set of building blocks that developers use to write a web application. It’s important to note that in this article when I say “web framework,” I’m talking about a web server framework. In other words, Flask lives on a server in the cloud rather than running on a user’s computer. Flask is an “unopinionated micro web framework” written in Python.

Let’s break that down:

Micro

Why “micro”? Because instead of being an all-in-one swiss army knife style solution, Flask is an add-as-you-go barebones solution from the start. This low barrier to entry allows developers who want to build a small program or a quick prototype to just download and get going with a few simple lines of code. According to the Flask docs, “The ‘micro’ in microframework means Flask aims to keep the core simple but extensible.”

Unopinionated

Why “unopinionated”? Again, the Flask docs explain it best, “Flask won’t make many decisions for you, such as what database to use. Those decisions that it does make … are easy to change. Everything else is up to you, so that Flask can be everything you need and nothing you don’t.”

Web Framework

A web application could be anything from a website to a mobile app to an online document editor to an email program. In programming, a framework is a tool that aims to prevent developers from having to rewrite code each time they want to accomplish a task. Thus, web frameworks fill the role of facilitator and middleman by allowing developers to quickly create web services, resources and APIs that people can interact with through user-facing programs like web browsers and mobile apps.

Okay, that’s cool and all, but what does a web framework mean to me, an average user?

A lot of tasks in web development are very repetitive. One example is as simple as a user visiting a webpage. Let’s use Google as our example. Let’s say you open up your favorite web browser, type “Google.com” and hit enter. You see something like this:

In this scenario, the web browser is in charge of:

  • Displaying what you see, from the search box to the Google logo
  • Allowing you to interact with the page

And the web framework is in charge of:

  • Providing your web browser the code for the page, the images, and any scripts that run on the page.
  • Performing any searches you enter
  • Logging you into your Google account and ensuring you stay logged in

Why do we use Flask?

As a services company, we often begin working with clients by building small prototypes to test the viability of certain ideas for them. As such, we have found that choosing tools that allow us to easily and quickly build prototypes for potential long-term projects is essential to success.

Extensibility

In the software world, prototypes are often scrapped once a project is given the green light. With Flask, we can quickly build up a prototype and just as easily build on top of it as we go. Think of Flask as a kit of legos where the main building block has nodes on every side to be built on top of. You can customize it any way you want, work with other technologies any way you want, and it doesn’t tell you that you should do anything a certain way.

Durability

While Flask is small in size, it is developed in a way that allows it to scale incredibly well. The Flask docs have an entire chapter on “becoming big.” Even Pinterest uses Flask for their API! For CurEat, we built the original prototype using Flask, and now in release, with thousands of users and about a dozen pieces of technology all working together, Flask is still working like a well-oiled machine, showing no signs of slowing down.

Additionally, the small overall size of Flask means there are less places for security vulnerabilities to occur. If there ever were to be a vulnerability in the code discovered, Flask’s large, active open source community would handle it swiftly and promptly release an update.

Here’s a Quora post showing some large web applications that use Flask.

Python

We really like Python. It is a well-documented and incredibly popular programming language being used increasingly for web server development due to its modularity and ease of use. The other popular web server programming languages are PHP, Ruby, and Java. PHP and Java show their age and are well known for not being quick prototyping languages. Sinatra is the Ruby equivalent to Flask. We find Python to be an easier programming language to work with overall, and more developers are familiar with it, so there is typically more out there in terms of 3rd party libraries and documentation.

Flexibility

This is perhaps the most important point of all. As an app development shop, we have to always be ready to adapt to rapidly changing requirements. Flask allows us to easily change direction without having to backtrack and lose valuable time. Flask also allows us to change the type of tools we use alongside it without having to change the logic itself. For instance, we could go from using a simple file for data storage during prototyping to a fully redundant PostgresSQL database in production without any change in logic. This ability to change at a moment’s notice is very helpful when we are deciding how we want to structure a project.

Recap

  • Flask is a web server framework, which is a crucial piece of any app or website that uses the internet.
  • Flask helps us manage all the different pieces that go into creating our mobile and web apps.
  • We like Flask because it is small, flexible, durable, and allows for easy prototyping.

This was the first part of a series of non-technical overviews of technical things. Stay tuned for more!

Since joining the team at Oak City Labs last year, I have had many conversations with friends, family and prospective clients about mobile app development. When I show them an app we’ve built, like CurEat, they often tell me that it looks great, and then ask me to show them which parts of the app I made. While seemingly an innocuous comment intended to allow me to showcase my hard work and reap some easy praise, this particular request typically leads me to release one of my patented <heavy sighs>.

But Cory, why do you heavy sigh at such a polite, ego-boosting request, you ask? Well, fellow human, I release the air from my lungs at a much faster rate than usual in an exasperated manner because users of our apps don’t actually see anything I have made. They see the work of the design team in the visuals of the app. They see the buttons, lists, login screens and settings menus that Jay (iOS) and Taylor (Android) have coded in. They even see the legalese a lawyer somewhere put together. So when I tell people that I spent over a year working on an app after explaining that there is no visual evidence of my work at all, they get this sort of half-confused, half-amused look on their face.

Of course, I could simply tell people that I am a backend developer who helped make the Python Flask server, PostgreSQL database structure, RESTful API and Angular webapp that allow the mobile app to be more than a sad, functionless, empty shell. This jargon only helps those with a technical background, and usually leads most others to say something along the lines of “Oh, OK…” when in reality, they’re thinking “Was he even speaking English?”

And so, through a long, arduous process of trial, error, confused looks and copious amounts of feedback, I have concocted what I believe to be the ultimate formula in explaining what my actual role is in the app development process.

To aid in understanding my role as a behind-the-scenes magician, I will refer to the Snapchat app as an example.

For those who aren’t familiar with Snapchat, let’s run through a typical Snapchat use case. This is assuming you already have an account and are logged in.

Step 2: Snap a super artsy picture of your keyboard and wrist rest

Step 3: Send it to your friends (Some names below may or may not be based on the many nicknames of Burton Guster)

Aaand we’re done! I have now sent a poignant photo of my keyboard to two of my closest imaginary friends. Soon, they will receive a notification of the photo and will be able to open and view it for themselves.

This is the process for using the app, but to understand how we are able to get to this point and do such a thing, we need to step back to the very beginning.

Here is the terminology I will use in the following examples:

  • Mobile Developer – Somebody who builds the actual app that a user sees on their mobile device
  • Backend Developer – Someone (like myself) who works on the behind-the-scenes details such as the server, API and web framework. If this doesn’t make sense, that’s OK – we’ll get there!
  • Snap – A snap is an image that you exchange with friends on Snapchat

When the app loads, you have the option to log in or sign up. So far, this is all the work of the mobile developer. They created this screen, pulled in images from the designer, added some text onto buttons, and bam. This screen is born:

Now let’s say you click Log In. You are then taken to this screen:

This screen lets you log in with your account information and takes you into the part of the app where you can actually send and receive snaps. Every “usable” thing on this screen was added by a mobile developer: the input areas for username and password, the “Forgot your password?” link and the “Log In” button. So far, the backend developer hasn’t played a role in either of the previous screens.

Now, what happens when you press the “Log In” button? Does the phone magically know whether your account info is valid or not? If that information were only stored on your phone, how would you be able to log into Snapchat on a new phone with the same account?

The answer: You wouldn’t. Your account information is not even touched by the mobile developers!

*My Time to Shine!*

There are a lot of behind the scenes details happening here that the backend developer is responsible for, so let’s break down the differences between the work of the mobile and backend developers in the above scenario.

Technical Breakdown:

  • Mobile Developer:

    • Create app screen with inputs
    • Send username/password to server
    • Receive output from server telling the app if the login was successful
    • Continue on to the next app screen if the user logged in successfully
  • Backend Developer:

    • Tell server how to handle a request to log in a user
    • Tell server how to check with the database to confirm/deny a login request
    • Tell server how to send a request back to the app if the user logged in

Non-Technical Breakdown:

The mobile developer creates the code for the login screen, the backend developer creates the code for all of the actual “logging in” and checking of whether you are a valid user or not.

Let’s go back to the scenario of sending a snap to your friends.

Starting with my super duper artsy photo again, we can examine this screen. All the interactions on this screen are completely up to the mobile developer. A few examples are the ability to save this image or add text to it. Now, let’s say the user clicks the button in the bottom right to choose which of their friends to send the snap to.

We’re taken to this screen. The app displays a list of names which are all of the potential friends you could send your snap to. You select the ones you want, then click the send arrow in the bottom right to send your snap to these friends. Everything visible is presented with code from the mobile developer still. Except…

Let’s back it up.

Where did your friends list come from? Does your phone just magically know which of your friends have snapchat and also have you as a friend? How would you add or remove a friend? And what are those numbers and emojis next to the stars on the right side of each name row?

That’s a lot of questions, so let’s do a breakdown like we did before.

Technical Breakdown:

  • Mobile Developer:

    • Request list of friends and friend information from server
    • Display list of friends
    • Display information about each friend (such as the numbers and emojis)
    • Allow the user to select which friends will receive their snap
    • Tell the server who the user wanted to receive their snap
  • Backend Developer:

    • Build a list of friends and friend information for the given user and return the information to the app
    • Perform the actual sending of the snap to all of the selected friends.
    • Notify all the friends that they have a new snap

Non-Technical Breakdown:

The mobile developer creates the code that displays all the friends and let’s the user choose who to send the snap to, but the backend developer creates the code that tells the app who the user’s friends are and the code that actually sends the snap to those friends.

At the end of the day, there’s a lot of communication that needs to happen between mobile and backend developers, because as you can see, they depend on each other very much. Without a mobile developer, all the backend logic and data and snap sending would be pointless. Similarly, without a backend developer, Snapchat wouldn’t actually be able to do anything. It might sit there looking pretty but you wouldn’t be able to send your snaps to anybody, which would be quite sad.

I hope my examples helped, but if not, here are a few analogies to provide more clarity:

Non-Technical Analogies:

  • A mobile developer is like a news anchor. Without the backend developer (teleprompter), the news anchor would just sit there looking pretty without knowing what news to tell viewers about.
  • Alternatively, think of a mobile developer like a grocery store, choosing how to display all of the food that the backend developer delivers. Without the shelves and organization from the mobile developer, all of the food from the backend developer would be too chaotic and unstructured to give to the shoppers. But, without the backend developer, there would be no food at all to give to the shoppers.

Technical Analogies:

  • A mobile developer creates your Gmail app, but without the backend developer, your email would never show up in the app.
  • A mobile (or web, in this case) developer would create the Netflix app or website, but without the backend developer, no shows would show up or be watchable.