Basics of building great web applications

2. Basics of Building
Great Web
Applications
Vishnu Gopal

3. Where are you?

4. 1. You’ve Shortlisted an Idea
2. You’ve built a Product Narrative
3. You’ve decided you want
to build a web app/web API.

5. Basic Tips on Building
Web Applications

6. Does not get into too much
domain detail. For that, please
use Faculty Connect & talk to
me.

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

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

9. Concept: Innovation Points. Let
the framework + libraries do the
work for you.

10. Most often, this advice applies
even if you are building
“only” an API.

11. Nobody builds “only” an API.
Sometimes you need an Admin
interface, sometimes you need client-
facing login, et. al.

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

13. Only split into micro-services, et. al.
when you need it. Start off as a
simple “everything in one”
architecture.

14. 3. Only maintain 1 repository.

15. Just like you don’t split running
code into micro-services, you
maintain all code in this one mono-
repo.

16. Just FYI, even Facebook has
a mono-repo.

17. 4. Use the
wireframe/design/build
workflow

18. i.e
Step 1: Wireframes are built.
Step 2: Design is done in HTML/CSS
Step 3: Build in logic.

19. Step 3 can happen in parallel
with Step 1 and 2 if you are
confident of the spec.

20. 5. Developers accept
responsibility for testing.

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

22. 6. Always build every layer of
the cake.

24. Think of a final delivered
product as a “cake”

25. 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.

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

27. 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.

28. Egg & Mayo
Chocolate
Crust
Icing

29. Egg & Mayo
Chocolate
Crust
Icing
When a cook
builds a cake, he
builds it one layer
at a time.

30. Egg & Mayo
Chocolate
Crust
Icing
When a cook
builds a cake, he
builds it one layer
at a time.

31. Egg & Mayo
Chocolate
Crust
Icing
When a cook
builds a cake, he
builds it one layer
at a time.

32. Egg & Mayo
Chocolate
Crust
Icing
When a cook
builds a cake, he
builds it one layer
at a time.

33. Egg & Mayo
Chocolate
Crust
Icing
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.

34. Egg & Mayo
Chocolate
Crust
Icing
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.

35. Egg & Mayo
Chocolate
Crust
Icing
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.

36. Egg & Mayo
Chocolate
Crust
Icing
How does he
decide which layer
to pick?
Depends on what
is important to
the customer.

37. Egg & Mayo
Chocolate
Crust
Icing
The first layer
is the most
important/most
valuable
feature.

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

39. Database & API
Connectivity
Application Logic
Frontend Logic
Presentation
Build & deliver
all layers
together.

40. SQL/API Integration
code.
Ruby/Python/PHP/N
ode
Javascript/jQuery/Re
act/Angular
HTML/CSS
Build & deliver
all layers
together.

41. SQL/API Integration
code.
Ruby/Python/PHP/N
ode
Javascript/jQuery/Re
act/Angular
HTML/CSS
Remember,
most important
feature first.

42. SQL/API Integration
code.
Ruby/Python/PHP/N
ode
Javascript/jQuery/Re
act/Angular
HTML/CSS
So this might
be “The
Search
Screen”

43. SQL/API Integration
code.
Ruby/Python/PHP/N
ode
Javascript/jQuery/Re
act/Angular
HTML/CSS
Avoid building
according the user
flow. For e.g.
Login/Signup
screens are often
the least important
ones.

44. Crux: Always deliver
something the customer can
use.

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