Our Tech Ecosystem
Technology we love to use
Every development team has its own ecosystem of tools and and practices, which itself is always evolving. This is your guide the high-level pieces of our ecosystem and resources you can explore to learn more about them.
If you find additional or better resources for learning about these technologies from your perspective let us know and we will add them to this article.
In addition to the tech outlined here, we use Slack for most communication, JIRA for tickets and sprint planning, and a shared password management solution for shared secrets.
Git + Github
Distributed source control and code review.
We use CI with Github to build our images and run tests against them. Currently it is Travis CI.
Basic Resources:
- The docs, reference, and book with a thorough overview https://git-scm.com/doc
- An overview for the less patient https://tutorialzine.com/2016/06/learn-git-in-30-minutes
- A visual tutorial https://learngitbranching.js.org/
- Bringing in Github and Github flow https://guides.github.com/introduction/git-handbook/
Intermediate Resources:
- “Advanced Git” talks through cherry-pick, reset, rebase, and squashing https://www.youtube.com/watch?v=4EOZvow1mk4
Docker + docker-compose
Generally we use Docker to work on and deploy our projects.
https://docs.docker.com/docker-for-mac/ uses a native virtualization layer on Mac OS X to provide a relatively high quality docker experience.
The key docker-compose commands are:
docker-compose up -dstarts all your containers for you and runs them in the background so you don’t see the output.docker-compose downstops everything including the virtual networkdocker-compose buildrebuilds your images and should install updated dependencies
Read Daily Django with Docker for some Django specific tips and general information on how to run commands in your containers.
Editor
Each to their own, we have people who use vim, vscode, pycharm, etc. Sublime 3 or Atom is likely a good default option if you don’t have a strong preference already. Pick what feels good and spend time learning how to use it. Make a cheat sheet of shortcuts. Look through popular extensions (syntax highlighting, refactoring, UI) to determine what can help your workflow but be wary of adding distractions.
The key thing is to be able to configure your editor to lint your code either in real time or on save. Doing this will save you a huge amount of time.
Backend
Python
We are using Python 3.7+ with some Python 3.6, not Python 2.7.x.
Initially your laptop will likely have python mapped to Python 2.7. When you create a docker container to run our Python code it will be running the right version.
https://docs.python-guide.org/ — Provides some sound advice on setting up your laptop including making new version available by default. Since we install dependencies into a Docker container, being able to run pip and virtualenv locally isn’t as important but is useful to learn how if you like. Sometimes it is needed to get linting to work in your editor of choice.
https://docs.python-guide.org/writing/style/ — Covers many style choices we would encourage.
Django + Django Rest Framework
We build web services which are both exposed as web based APIs and more traditional web apps in Django. For the API pieces we are using Django Rest Framework which is built on Django.
Resources:
- Django generally has good documentation including a thorough tutorial https://docs.djangoproject.com/en/2.2/intro/
- One day tutorial to go from zero to website running on the internet https://djangogirls.org/resources/
- Django Rest Framework also has a pretty good tutorial, best done after getting to know Django http://www.django-rest-framework.org/tutorial/quickstart/
Frontend
Javascript ES6
VueJS
VueJS
The web frontend is built on VueJS (version 2), using VueX for state management.
Bungalow customised UI components are based on our brand guidelines and built using the Vuetify material design framework.
We use SASS as our CSS pre-processor and Prettier to format our codebase.
Resources
[Vue] Best Practices for VueJS Components
[Vuetify] Spacing Classes for Padding and Margin
[Vuetify] Grid Helper Classes for CSS Grid
[CSS Tricks] Flexbox Overview
[CSS Tricks] CSS Grid Overview
[CSS Tricks] CSS Specificity
Mobile
React Native
Resources:
- Official Docs https://facebook.github.io/react-native
- React Native Tutorial http://www.reactnativeexpress.com/
- Online course (access in password manager) https://www.udemy.com/the-complete-react-native-and-redux-course
Error tracking with Instabug, and Sentry
Sentry
We use Sentry for error tracking across our different services, be it unexpected error or exceptions we have caught and want to report on. We also use slack to track what is happening inside our system and to track deployment.
Data
Our data warehouse is Amazon Redshift, which is a column based fork of Postgres. ETL / Backend is generally in Python. Visuals and analysis use Periscope.
DevOps
We use Amazon Code Pipeline with ECS and Fargate for deployment.
There are many possible directions to head in, this is meant to provide a map so you can find your bearings but not tell you where to go. From here you can choose your own adventure.
Talk to you peers and mentors and don’t forget to ask questions in public channels on slack. We all want to learn from the questions you have.
