Basics of building great web applications
Transcript of Basics of building great web applications
![Page 1: Basics of building great web applications](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/1.jpg)
![Page 2: Basics of building great web applications](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/2.jpg)
Basics of Building Great Web Applications
Vishnu Gopal
![Page 3: Basics of building great web applications](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/3.jpg)
Where are you?
![Page 4: Basics of building great web applications](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/4.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/5.jpg)
Basic Tips on Building Web Applications
![Page 6: Basics of building great web applications](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/6.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/7.jpg)
1. Use a fully-fledged backend (MVC) framework.
![Page 8: Basics of building great web applications](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/8.jpg)
DO: Rails, Django, Laravel, Sailsjs.DON’T: Sinatra, Webpy,
Wordpress, Express.
![Page 9: Basics of building great web applications](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/9.jpg)
Concept: Innovation Points. Let the framework + libraries do the
work for you.
![Page 10: Basics of building great web applications](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/10.jpg)
Most often, this advice applies even if you are building
“only” an API.
![Page 11: Basics of building great web applications](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/11.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/12.jpg)
2. Build a monolithic application. Do NOT build micro-services.
![Page 13: Basics of building great web applications](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/13.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/14.jpg)
3. Only maintain 1 repository.
![Page 15: Basics of building great web applications](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/15.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/16.jpg)
Just FYI, even Facebook has a mono-repo.
![Page 17: Basics of building great web applications](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/17.jpg)
4. Use the wireframe/design/build
workflow
![Page 18: Basics of building great web applications](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/18.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/19.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/20.jpg)
5. Developers accept responsibility for testing.
![Page 21: Basics of building great web applications](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/21.jpg)
There is no separate QA team.Everybody on the team tests.
![Page 22: Basics of building great web applications](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/22.jpg)
6. Always build every layer of the cake.
![Page 23: Basics of building great web applications](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/23.jpg)
![Page 24: Basics of building great web applications](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/24.jpg)
Think of a final delivered product as a “cake”
![Page 25: Basics of building great web applications](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/25.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/26.jpg)
When a cook builds a cake, he builds it one layer at a time.
![Page 27: Basics of building great web applications](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/27.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/28.jpg)
Egg & Mayo
Chocolate
Crust
Icing
![Page 29: Basics of building great web applications](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/29.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/30.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/31.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/32.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/33.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/34.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/35.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/36.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/37.jpg)
Egg & Mayo
Chocolate
Crust
Icing
The first layer is the most
important/most valuable feature.
![Page 38: Basics of building great web applications](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/38.jpg)
Let’s put this actual software development layers in here.
![Page 39: Basics of building great web applications](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/39.jpg)
Database & API Connectivity
Application Logic
Frontend Logic
Presentation
Build & deliver all layers together.
![Page 40: Basics of building great web applications](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/40.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/41.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/42.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/43.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/44.jpg)
Crux: Always deliver something the customer can use.
![Page 45: Basics of building great web applications](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/45.jpg)
That’s it. Looking forward to seeing your Web app Alpha!
![Page 46: Basics of building great web applications](https://reader031.fdocuments.us/reader031/viewer/2022030217/5886f5d81a28ab4e3a8b47a1/html5/thumbnails/46.jpg)