Web Application Boring Stack
Tags: webdev, typescript, python, react
Published: 2019-07-18 08:54:59

<!-- wp:paragraph -->
<p>At <a href="https://jetbridge.com">JetBridge</a> we enjoy developing software applications with our clients that we can take pride in while expanding our areas of knowledge and expertise at the same time. Because we are frequently starting on new projects we have standardized on a harmonious and expressive set of tools and libraries and frameworks to help us rapidly lift off new applications and deliver as much value as we can with minimal repetition.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Our setup isn't perfect or the end-all stack for every project, but it's something we've evolved over years and it works quite well for us. We continue to learn about new tools and techniques and evolve our workflow so consider this more of a snapshot in time. If you aren't reading this in July of 2019 then we have probably modified at least some parts of the stack.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Methodology</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Our theory of software development is: don't overcomplicate things.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Pragmatism and business value are the overriding concerns, not the latest and coolest and hippest frameworks or tech. We love playing with new cool stuff as much as any geek but we don't believe in using something new just for the sake of being new or feeling unhip. Maturity and support should factor into deciding on a library or framework to base your application on, as should maintainability, community, available documentation and support, and of course what actual value it brings for us and our clients.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>There is a tendency a lot of engineers have to make software more complex than it needs to be. To use non-standard tools when widely available and known tools exist that might already do the job. To try to shoehorn some neat piece of tech someone read about on Hacker News into something it isn't really suited for. To depend on extra external services when there are already existing services that can be extended to perform the desired task. Using something too low-level when more abstraction would really simplify things, or using something too fancy and complicated when a simple system-level tool or language would accomplish things more expediently. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Simplicity is a strategy that when used wisely can greatly increase your code readability and maintainability, as well as result in easy to manage operational environments.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Frontend</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>By the time I am writing this all frameworks and libraries we use have likely been superseded by cool new hip JS jams and you will sneer at our unfashionable choices. Nevertheless, this is what is working well for us today:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><strong>React:</strong> Vue may have more stars on GitHub but React is still the industry standard and is used and supported actively by Facebook among others. Writing apps with React hooks really feels like we are getting closer and closer to functional programming, adding a new level of composibility and code reuse that was clumsily achieved with HOCs before.</li><li><a href="https://material-ui.com">Material-UI</a> for React is a toolkit that has almost every sort of widget and utility you might need, powerful theming and styling options, integrates CSS-in-JS very smoothly and looks solid out of the box. It is essentially an implementation of the UI paradigms promulgated by Google so working within its constraints and visual language gives you a good foundation. </li><li><strong>Create-React-App/react-scripts:</strong> This really does everything you need and configures your new React app with sane defaults. You never need to monkey around with Webpack or HMR again. We have <a href="https://github.com/jetbridge/create-react-app">extended</a> CRA/r-s to spit out new frontend projects with extra ESlint and prettier options and Storybook.</li><li><strong><a href="https://storybook.js.org/">Storybook</a>:</strong> We prefer to build a component library of small and larger components implemented in isolation using mock data, rather than always coding and testing the layout and design inside the complete app. This allows UI devs to work without being blocked on completion of backend endpoints, helps to enforce the concept of reusable and self-contained components, and lets us preview the various interface states easily.</li><li><strong>TypeScript:</strong> Everyone uses TypeScript now because it's good and you should too. It does take some getting used to and learning how to use it properly with React and Redux requires some small amount of learning, but it's entirely worth it. Remember: you should never need to use <code>any</code>. And when you think you need to use <code>any</code> - you probably just need to add a type argument (generic).</li><li><strong>ESLint:</strong> ESlint works great with TypeScript now! Don't forget to set <code> extends: ['plugin:@typescript-eslint/recommended', 'plugin:react/recommended', 'react-app']</code></li><li><strong>Prettier:</strong> Set up your editor to run Prettier on your code when you hit save. Not only does it enforce a consistent style, but it also means you can be way way lazier about formatting your code. Less typing but better formatting.</li><li><strong>Redux: </strong>Redux is nice... I guess. You do need some central place to store your user authentication info and stuff like that, and <a href="https://github.com/rt2zz/redux-persist">redux-persist</a> is super handy. In the spirit of keeping things simple though, really ask yourself if you need redux for what you're doing. Maybe you do, or maybe you can just use a hook or state instead. Sure maybe you think at first that you want to cache some API response in redux, but if you start adding server-side filtering or search or sorting, then it really is better off just as a simple API request inside your component.</li><li><strong>Async/await:</strong> Stop using the Promise API! Catch exceptions in your UI components where you can actually present an error to the user rather than in your API layer.</li><li><strong>Axios</strong>: The HTTP client of choice. We use JWT for authentication and recommend our <a href="https://www.npmjs.com/package/axios-jwt">axios-jwt interceptor module</a> for taking care of token storage, authorization headers, and refresh.</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>I don't believe there's anything crazy or unusual here and that's sort of the point. Stick with what's standard unless you have a good reason not to.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Backend</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Our backend services are always designed around the <a href="https://12factor.net">12-factor app principles</a> and always built to be cloud-native and when appropriate, <a href="https://read.acloud.guru/serverless-is-a-state-of-mind-717ef2088b42">serverless</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Most projects involve setting up your typical REST API, talking to other services, and performing CRUD on a PostgreSQL DB. Our go-to stack is:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Python 3.7. Python is clean, readable, has an impressively massive repository of community modules on PyPI, active core development, and a pretty good balance of high-level dynamic features without getting too obtuse or distracting. </li><li>Type annotations and type linting with <code><a href="http://mypy.readthedocs.io/http://mypy-lang.org/">mypy</a></code>. Python does have type annotations, but they are very limited, not well integrated, and not usually very useful for catching mistakes. I hope the situation improves because many errors have to be discovered at runtime in Python when compared with languages like TypeScript or Go. This is the biggest drawback to Python in my opinion, but we do our best with <code>mypy</code>.</li><li><a href="https://palletsprojects.com/p/flask/">Flask</a>, a lightweight web application framework. Flask is very nicely suited to building REST APIs, providing just enough structure to your application for handling WSGI, configuration, database connections, reusable API handlers, tracing/debugging (with <a href="https://aws.amazon.com/xray/">AWS X-Ray</a>), logging, exception handling, authentication, and flexible URL routing. We don't lean on Flask for much besides providing the glue to hold everything together in a coherent application without imposing too much overhead or boilerplate.</li><li><a href="https://docs.sqlalchemy.org">SQLAlchemy</a> for declarative ORM. Has nice features for handling Postgres dialect features such as <code>UPSERT</code> and <code>JSONB</code>. Ability to compose mixins for model and query classes is very powerful and something we are using more and more for features like soft deletion. <a href="https://docs.sqlalchemy.org/en/13/orm/inheritance.html#single-table-inheritance">Polymorphic subtypes</a> are one of the most interesting SQLAlchemy features, allowing you to define a type discriminator column and instantiate appropriate model subclasses based on its value.</li><li>Testing: <a href="https://pypi.org/project/pytest-flask-sqlalchemy/">subtransactions wrapping each test</a>, <a href="https://pytest-factoryboy.readthedocs.io/en/latest/#model-fixture">pytest-factoryboy</a> for generating fixtures from our model classes for pytest and for generating mock data for development environments. CircleCI. <a href="https://docs.pytest.org/en/latest/fixture.html">Pytest fixtures</a>. <a href="https://flask.palletsprojects.com/en/1.1.x/testing/">Flask test client</a>.</li><li><a href="https://flask-rest-api.readthedocs.io/en/stable/">Flask-REST-API</a> with <a href="https://marshmallow.readthedocs.io/en/3.0/">Marshmallow</a> helps succinctly define REST endpoints and serialization and validation with a minimum of boilerplate, making heavy use of decorators for a declarative feel when appropriate. As a bonus it also generates OpenAPI spec documents and comes with Swagger-UI to automatically provide documentation of every API endpoint and its arguments and response shapes without any extra effort required.</li><li>We are currently developing <a href="https://github.com/jetbridge/flask-crud">Flask-CRUD</a> to further reduce boilerplate in the common cases for CRUD APIs and mandating strict data model access control checks.</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>In projects that require it we can use Heroku or just EC2 for hosting but all of our recent projects have been straightforward enough to build as serverless applications. You can read about our setup and the benefits this brings us in more detail <a href="https://spiegelmock.com/2018/11/21/rapid-api-serverless-development/">in this article</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We have built a starter kit that ties together all of our backend pieces together in a powerful template to bootstrap new serverless Flask projects called <a href="https://github.com/jetbridge/sls-flask/">sls-flask</a>. If you're thinking of building a database-backed REST API in Python, give it a try! You get a lot of power and flexibility in a small bundle. There isn't anything particularly special or exotic included in it, but we believe the foundation it provides adds up to an extremely streamlined and modern development toolkit.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>All of our tooling and templates are open source, and we often contribute bug reports and fixes upstream to modules that we make use of. We encourage you to try out our stack or let us know what you're using if you're happy with what you're doing. <a href="https://www.urbandictionary.com/define.php?term=share%20and%20enjoy">Share and enjoy</a>!</p>
<!-- /wp:paragraph -->