46

Basics of building great web applications

  • Upload
    svco

  • View
    150

  • Download
    1

Embed Size (px)

Citation preview

Page 1: Basics of building great web applications
Page 2: Basics of building great web applications

Basics of Building Great Web Applications

Vishnu Gopal

Page 3: Basics of building great web applications

Where are you?

Page 4: Basics of building great web applications

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.

Page 5: Basics of building great web applications

Basic Tips on Building Web Applications

Page 6: Basics of building great web applications

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

use Faculty Connect & talk to me.

Page 7: Basics of building great web applications

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

Page 8: Basics of building great web applications

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

Wordpress, Express.

Page 9: Basics of building great web applications

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

work for you.

Page 10: Basics of building great web applications

Most often, this advice applies even if you are building

“only” an API.

Page 11: Basics of building great web applications

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

you need client-facing login, et. al.

Page 12: Basics of building great web applications

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

Page 13: Basics of building great web applications

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

“everything in one” architecture.

Page 14: Basics of building great web applications

3. Only maintain 1 repository.

Page 15: Basics of building great web applications

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

code in this one mono-repo.

Page 16: Basics of building great web applications

Just FYI, even Facebook has a mono-repo.

Page 17: Basics of building great web applications

4. Use the wireframe/design/build

workflow

Page 18: Basics of building great web applications

i.e Step 1: Wireframes are built.

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

Page 19: Basics of building great web applications

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

confident of the spec.

Page 20: Basics of building great web applications

5. Developers accept responsibility for testing.

Page 21: Basics of building great web applications

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

Page 22: Basics of building great web applications

6. Always build every layer of the cake.

Page 23: Basics of building great web applications
Page 24: Basics of building great web applications

Think of a final delivered product as a “cake”

Page 25: Basics of building great web applications

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.

Page 26: Basics of building great web applications

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

Page 27: Basics of building great web applications

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.

Page 28: Basics of building great web applications

Egg & Mayo

Chocolate

Crust

Icing

Page 29: Basics of building great web applications

Egg & Mayo

Chocolate

Crust

Icing

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

Page 30: Basics of building great web applications

Egg & Mayo

Chocolate

Crust

Icing

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

Page 31: Basics of building great web applications

Egg & Mayo

Chocolate

Crust

Icing

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

Page 32: Basics of building great web applications

Egg & Mayo

Chocolate

Crust

Icing

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

Page 33: Basics of building great web applications

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.

Page 34: Basics of building great web applications

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.

Page 35: Basics of building great web applications

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.

Page 36: Basics of building great web applications

Egg & Mayo

Chocolate

Crust

Icing

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

important to the customer.

Page 37: Basics of building great web applications

Egg & Mayo

Chocolate

Crust

Icing

The first layer is the most

important/most valuable feature.

Page 38: Basics of building great web applications

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

Page 39: Basics of building great web applications

Database & API Connectivity

Application Logic

Frontend Logic

Presentation

Build & deliver all layers together.

Page 40: Basics of building great web applications

SQL/API Integration code.

Ruby/Python/PHP/Node

Javascript/jQuery/React/

Angular

HTML/CSS

Build & deliver all layers together.

Page 41: Basics of building great web applications

SQL/API Integration code.

Ruby/Python/PHP/Node

Javascript/jQuery/React/

Angular

HTML/CSS

Remember, most important

feature first.

Page 42: Basics of building great web applications

SQL/API Integration code.

Ruby/Python/PHP/Node

Javascript/jQuery/React/

Angular

HTML/CSS

So this might be “The Search

Screen”

Page 43: Basics of building great web applications

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.

Page 44: Basics of building great web applications

Crux: Always deliver something the customer can use.

Page 45: Basics of building great web applications

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

Page 46: Basics of building great web applications