In which I realize that premature optimization is premature, settle some architectural questions and figure out my Docker images
Hey strangers and friends!
Here’s the weekly breakdown for what’s gone down most recently in my web dev journey.
What’s that? You don’t know what I’m talking about and would like to? Well, for context, here are the previous posts in this amazing blog series:
- Let’s Build a Web App! A blog series by someone starting their web dev journey
- Let’s Build a Web App! Week 2 out of 30
- Let’s Build a Web App! Week 3 out of 30
- Let’s Build a Web App! Lo-fi Edition / Week 4 out of 30
- Let’s Build a Web App! Week 5 out of 30
- Let’s Build a Web App! Week 6 out of 30
- Let’s Build a Web App! Week 7 out of 30
What did I set out to do?
My goal for the week was to “finish setting up the stack for moshi-moji and start planning architecture for moshi-moji; send architecture-related questions.”
For this week I assigned myself the following tasks related to setting up my stack:
- finish setting up React frontend stack for moshi-moji on EC2 instances
- finish setting up Django web service stack on EC2 instances
Because I was supposed to research and firm up how to deploy my stack last week, but chose to look into other matters instead, I had the spillover task of figuring out how to even make my deployments:
- research deploying Django web service via docker
- research using Docker with EC2
I also gave myself these items (marked as ‘stretch’ items since I didn’t expect to get them done, but I would like to have started on them):
- start wireframes for UI, and write React pseudocode
- start mapping routes for api
- start mapping out data models
+the outreach to mentors on architectural decisions I had in mind
- find a good mentor for Docker deployment / stack setup and broadly mention current question items
- ask about using Apollo on client side and Relay on server side for GraphQL queries
- ask about using Python social auth in Django backend in relation to React frontend
What did I end up getting done?
Research items
- research deploying Django web service via Docker
🙆
First I looked into whether I should couple my web server with my wsgi server, then, after making my decision, I found a nice tutorial to to deploy nginx, uwsgi, and my code base in one container
Not-quite-anticipated steps: figuring out whether to use nginx or apache; figuring out whether to couple my web server with my wsgi server; looking into how to minimize network latency between containers
Time: 4 hrs - research using Docker with EC2
🙆
I mostly deliberated over what to use for container orchestration with EC2 (EC2’s native orchestration features, Kubernetes, or good old Docker swarm/Docker for AWS)
Time: 2.25 hrs
Stack setup
- finish setting up React frontend stack for moshi-moji on EC2 instances; finish setting up Django web service stack on EC2 instances
🐢
Close to done imo, but not completely. I’m combining these two items under one bullet because the task ended up being similar/combined for both deployments. See the steps listed below: - EC2-wise: I spinned up my first EC2 instance, then set up my ‘Docker stack’ using the Docker for AWS Cloud Formation template. This means that my EC2 instances are up and running in a swarm.
Time: 1.5 hrs - Docker image-wise: Next I set things up to deploy my frontend and backend in Docker containers. For the React frontend, it was as simple as building an image from the Dockerfile provided by my ReactQL starter kit and starting a container from the image to confirm that everything ran as intended. I had to iron out a few wrinkles for the Django backend deployment, but ultimately that was also a simple task of following the aforementioned tutorial.
Time: 2.625 hrs - Docker service wise: I still have to write my compose.yml to define my service(s) and use that to run my Docker images in my EC2 Docker swarm.
Planning items
- start wireframes for UI, and write React pseudocode
🙆
I drew a few casual sketches to help me think things through, but I haven’t done any formal wireframing or pseudocoding yet. That’ll be for next week.
Time: negligible - start mapping routes and data models for api
🙆
Now that I’m using GraphQL, it’s not so much routes that I have to map out so much as data queries. Which is pretty closely coupled to data models. I started listing out what I could think of for the homepage view and the login flow.
Time: .75 hrs
Outreach
- find a good mentor for Docker deployment / stack setup and broadly mention current question items
🐢
I got to this one kind of last minute (especially since I really meant to do this last week, ahead of trying to set up my stack), but I looked into Docker’s community platform and got in touch with an excellent Docker geek from the Holberton network. (Sorry Nathan LeClaire, will get back to you soon!)
Time: .5 hrs - ask about using Apollo on client side and Relay on server side for GraphQL queries
🙆
Ended being one of several questions I cleared up with the help of the awfully nice Martin Brocchaus from theartling.com (mbrochh on Twitter and Github).
Time: negligible - ask about using Python social auth in Django backend in relation to React frontend
🙆
Also touched on this while asking Martin about his stack!
Time: ~.5 hrs
Some unanticipated tasks that I also ended up doing this week:
- planning: diagramming flow of architecture/request-response traffic
Time: 1.375 hrs - psyducking (research and mentor outreach) over how to manage auth & whether to couple or decouple my frontend and backend
Time: 5.375 hrs - research about how Apollo manages caching
Time: .5 hrs
What went well / What was difficult / What I would do differently next time
What went well:
Reaching out to someone who has used the exact stack that I’m looking to use before me (Martin, who I mentioned above!). I had so many questions lingering in my mind and when he took the time to explain his insights to me, it really paid off.
Also, whiteboarding: I was nervous about whether I’d be able to end up with anything that looked meaningful to me, but diagramming the flow of requests and response in my intended architecture really helped me identify where I was fuzzy about how things would work and clarify those areas.
What was difficult:
Balancing my social calendar with this project, and committing to devoting most of my time to moshi-moji. (I went way above and beyond 2 social engagements this week). This week I managed 19 hours of focused work, which is not up from last week.
I also realized (with the help of a few warnings from Papa Guillaume et. al.) that I spend a lot of time worrying about what is the ‘correct’ or ‘best’ practice for what I’m trying to do without the background to intuit that by myself (for instance, I wasn’t aware that the Django isn’t spectacular for performance, and I had trouble gauging how much network latency I’d incur with different architectural patterns). Google searching doesn’t always yield a definitive answer, and to my (I suppose naive) surprise, I’d find some people saying one pattern was better for one reason, and other people saying the opposite pattern was better for another.
Anyway, I realized that the real task lies in finding the simple solution, i.e. the solution you can optimize from with ease in the future. But even that isn’t always as obvious as I’d like it to be.
Finally, I love that this industry is rife with resources and examples of how to do things by others, but those moments when I’d find that people haven’t quite outlined how to do the exact combination of things I’m trying to do, or made an argument about what pattern is best, makes me realize how much I rely on example. When consensus isn’t obvious and examples aren’t complete is when I spend a lot of time doing my signature Psyduck mimicry.
What I would do differently next time:
Spread out social engagements a little bit more, & get to bed earlier (meaning, stop watching TV at night, lol) so as to get to school earlier to make up for social commitments.
Avoid worrying too much about high availability, high performance since that tends to land squarely in the no-man’s-land of premature optimization!
One cool thing I learned about
Docker for AWS and built-in DNS resolution in Docker.
Sorry I wrote so much! And now,
Misc links for your browsing pleasure:
- Martin’s Github demo for building a website with Django, GraphQL, Apollo, and React:
https://github.com/mbrochh/django-graphql-apollo-react-demo - My twitter: https://twitter.com/ronachng
- My Github repo for kusamochi: https://github.com/ronachong/kusamochi/commits/master
- My Github repo for moshi-moji:
https://github.com/ronachong/moshi-moji - My Paper doc for brainstorming/planning my web projects:
https://paper.dropbox.com/doc/different-ideas-mnesHVM2GY2Fwb05iN2fW - My Paper doc for logging my Google queries (obsessive, I know):
https://paper.dropbox.com/doc/resource-log-rOGTRd8hygvwJ4NCGglpm
