Basics of building great web applications

Basics of Building Great Web Applications

Vishnu Gopal

Where are you?

1. You’ve Shortlisted an Idea2. You’ve built a Product Narrative

3. You’ve decided you want to build a web app/web API.

Basic Tips on Building Web Applications

Does not get into too much domain detail. For that, please

use Faculty Connect & talk to me.

1. Use a fully-fledged backend (MVC) framework.

DO: Rails, Django, Laravel, Sailsjs.DON’T: Sinatra, Webpy,

Wordpress, Express.

Concept: Innovation Points. Let the framework + libraries do the

work for you.

Most often, this advice applies even if you are building

“only” an API.

Nobody builds “only” an API. Sometimes you need an Admin interface, sometimes

you need client-facing login, et. al.

2. Build a monolithic application. Do NOT build micro-services.

Only split into micro-services, et. al. when you need it. Start off as a simple

“everything in one” architecture.

3. Only maintain 1 repository.

Just like you don’t split running code into micro-services, you maintain all

code in this one mono-repo.

Just FYI, even Facebook has a mono-repo.

4. Use the wireframe/design/build

workflow

i.e Step 1: Wireframes are built.

Step 2: Design is done in HTML/CSSStep 3: Build in logic.

Step 3 can happen in parallel with Step 1 and 2 if you are

confident of the spec.

5. Developers accept responsibility for testing.

There is no separate QA team.Everybody on the team tests.

6. Always build every layer of the cake.

Think of a final delivered product as a “cake”

The cake has many layers, it has a egg & mayo layer at the bottom, a chocolate layer in

between, a crust at the top, and then finally icing.

When a cook builds a cake, he builds it one layer at a time.

When a software developer builds the cake, he doesn’t build one layer at a time. Instead

he takes a slice of the cake, and builds all layers in it at once.

Egg & Mayo

Chocolate

Crust

Icing

Egg & Mayo

Chocolate

Crust

Icing

When a cook builds a cake, he builds it one layer at a time.

Egg & Mayo

Chocolate

Crust

Icing

When a cook builds a cake, he builds it one layer at a time.

Egg & Mayo

Chocolate

Crust

Icing

When a cook builds a cake, he builds it one layer at a time.

Egg & Mayo

Chocolate

Crust

Icing

When a cook builds a cake, he builds it one layer at a time.

Egg & Mayo

Chocolate

Crust

IcingWhen a software

developer builds the cake, he doesn’t build one layer at a time. Instead he takes

a slice of the cake, and builds all layers in it at

once.

Egg & Mayo

Chocolate

Crust

IcingWhen a software

developer builds the cake, he doesn’t build one layer at a time. Instead he takes

a slice of the cake, and builds all layers in it at

once.

Egg & Mayo

Chocolate

Crust

IcingWhen a software

developer builds the cake, he doesn’t build one layer at a time. Instead he takes

a slice of the cake, and builds all layers in it at

once.

Egg & Mayo

Chocolate

Crust

Icing

How does he decide which layer to pick?Depends on what is

important to the customer.

Egg & Mayo

Chocolate

Crust

Icing

The first layer is the most

important/most valuable feature.

Let’s put this actual software development layers in here.

Database & API Connectivity

Application Logic

Frontend Logic

Presentation

Build & deliver all layers together.

SQL/API Integration code.

Ruby/Python/PHP/Node

Javascript/jQuery/React/

Angular

HTML/CSS

Build & deliver all layers together.

SQL/API Integration code.

Ruby/Python/PHP/Node

Javascript/jQuery/React/

Angular

HTML/CSS

Remember, most important

feature first.

SQL/API Integration code.

Ruby/Python/PHP/Node

Javascript/jQuery/React/

Angular

HTML/CSS

So this might be “The Search

Screen”

SQL/API Integration code.

Ruby/Python/PHP/Node

Javascript/jQuery/React/

Angular

HTML/CSS Avoid building according the user

flow. For e.g. Login/Signup

screens are often the least important

ones.

Crux: Always deliver something the customer can use.

That’s it. Looking forward to seeing your Web app Alpha!