if you are not sure whether you need a dynamic application at all, check out this How to Choose a Tech Stack Guide.
Having learned a language and a framework is one thing. Having a running application used by real people and being fun to work with is another. Some people advise to just start hacking on your idea and build everything else around it as it goes.
I advise preparing the fight and making a proper plan to make sure you are working on the right thing. However, having a great idea prepared in your pipeline, why would you just hack away and not start out with a production-ready application right away?
A production-ready application, if done right, gives you all the needed tools and functionality to get your flight started. Such an application is usable and secure. It has a great developer experience. And last but not least, it's easy to set up.
But how do you know how to build a production-ready application from the ground up? Most of us don't. That's why there are endlessly smart people and open source communities who have endless expertise in technology and programming. They worked hard to prepare a tech stack with all core functionality usable out-of-the-box.
I've built applications in different ways: completely from scratch, thrown together from different tutorials and templates, and using a prepared tech stack...
… completely from scratch often ends up as spaghetti code and garbage infrastructure. A crash landing is kind of pre-scheduled...
… using instructions from different sources can get cumbersome, especially when you start to throw together technologies that don't like each other. It could also happen that you won't understand your application in a few months...
… tech stacks will get you flying in no time and you will learn how another well-shaped application can look and behave in practice. They are well thought out and offer a structure that you can discuss with others and build upon.
Hard choice, hard choice, I know...
Essential Criteria of a Good Tech Stack
Let's look at the most important criteria of a good tech stack and then compare a few that I found to excel.
Time & Effort to Deploy
Ideally, the stack is easy to set up and you have your application running and ready to test from your very first line of code. Even more ideal would be if you still have all your power, energy, and motivation to work on your app after.
Freshness
Nothing compares to how quickly technology changes. Having the stack up-to-date when you jump into it is crucial for you to get started on the right foot. Otherwise, you'll get stuck with Boostrap 2 forever and ever.
Also, I wouldn't want to put effort into writing this article if it's outdated tomorrow. On some level, it will be 😅 but I'd like to make sure it's not as bad. Thus, all the stacks here have a community that keeps them alive.
Community Support
If you get stuck setting up the tech stack or extending its functionality it's very probable that you don't want to be left alone with it.
Good community support is important and also fun! Maybe you can even get involved and improve the stack if you like.
Features
In theory, you should be able to add any features at any time to your newly launched stack. In practice, it's incredibly cool to have the most common details available out-of-the-box, for example:
- authentication
- authorization
- payment
Software Engineering Best Practices
Finally, if you set up a stack where the creators, the community, and the stack itself are following engineering best practices, you've made it!
Your developer experience will celebrate a party if you have your stack set up quickly and you are ready to go with your developer environment, CI/CD, usable application architecture, TDD, and even with hot new paradigms like serverless.
Awesome Stacks
I will compare a few stacks for you which I personally have set up and found particularly useful with regard to the above criteria. I usually track the time and effort of my projects, so that the comparison is quite accurate, but keep in mind that those are still just my subjective observations.
As a side note, all of the stacks mentioned are awesome and I admire the creators who have put them up for the public, regardless of the “star ratings”.
Feel free to use this list as an inspiration for your own search for the right stack or just try one.
Bento Starter
It took me about 2 hours to set up the bento starter. I got some errors once or twice, but my "technical sophistication" was enough to solve it on my own. There is nice but maybe sometimes short documentation. All you’ll basically need is Node 12 something and a Google/Firebase account.
Bento is not named like that just for fun. It looks good and consists of delicious components: its focus on developer experience and best practices is heaven for developer taste buds. After your little setup, you'll have everything running, including your IDE (VSCode), linters, and auto-formatters.
No more decisions, just you and Vue. The experience has a little price though: you get tied to the Firebase ecosystem, which can be nice but not as flexible as plain GCP or AWS.
After the setup, you’ll have a basic Vue app with OAuth authentication and basic communication with the Firestore database. CI works great with CircleCI and your code is ready to be tested with the power of Cypress. However, there is not much discussion around tests, application structure, deployment etc.
Bento has a neat Slack channel where you can get in touch with the creator, some of the contributors and other Bento lovers. It’s not vibrant, but from what I’ve seen, there will be someone if you get stuck or want to discuss anything.
In the end, my side project with the bento starter got distracted by another side project as well as by the fact that I don't have much experience in Vue, but in general, I had a few moments of fun to tweak the project's homepage for a little while.
Time & Effort to Deploy: --- ★ ★ ★ ★ ☆
Freshness: --------------------- ★ ★ ★ ★ ☆
Community Support: ------- ★ ★ ★ ☆ ☆
Features: ----------------------- ★ ★ ★ ☆ ☆
SE Best Practices: ----------- ★ ★ ★ ★ ☆
Tech involved: Vue, Cypress, Firebase, Firestore, CircleCI, VSCode
Features: Full developer setup, authentication, PWA
Serverless Stack
The serverless stack is an amazing and very extensive resource. It’s not just a stack to set up. Consider it an e-book, a course, a community.
The "regular path" to set up the stack is to go through its tutorial. I wanted to know every little detail about how this serverless application is built under the hood, so it took me 30 hours to go through it while I built it out for my own use case (numify.co). If you have less experience setting up stuff, it may take you way more than that.
Another possibility would be to fork the 2 repositories: the React frontend and the Node.js backend. From there you could set up everything yourself in a few hours, but you'll definitely need some infrastructure experience here.
The stack is updated frequently by the maintainers, but I couldn't wait for them to upgrade to Bootstrap 4, so I did it myself with more or less pain. But in general, this stack is here to stay, having thousands of GitHub stars in its repositories. New features/updates are rolled out gradually as it is possible for the open-source maintainers and the creators who run their own application with the stack.
If you get stuck at some point, there is a well-organized forum to get support and probably you could use Twitter for that too, in some cases.
In terms of best practices, you'll see how a well-structured serverless API is built with a deployment framework and how a neat React frontend with hooks is set up properly. There is also much to learn how deployment and monitoring works with SEED. Moreover, if you are going serious with the stack, there is tons of additional material to get you started with testing, application structure, security, and much more.
Still not convinced? These applications run with the serverless stack online now. It could be yours ;)
Time & Effort to Deploy: --- ★ ★ ☆ ☆ ☆
Freshness: --------------------- ★ ★ ★ ★ ☆
Community Support: ------- ★ ★ ★ ★ ★
Features: ----------------------- ★ ★ ★ ★ ☆
SE Best Practices: ----------- ★ ★ ★ ★ ★
Tech: React, Node, AWS services backend & Amplify, Stripe, jest, Seed CI, Serverless Framework
Features: Authentication, Payment
Jumpstart (Open Source version)
Jumpstart is rather a Ruby on Rails template than a stack since it lets you deploy wherever you like. There is jumpstart documentation on how to run it on Heroku with a few CLI commands, though, so consider it a Rails/Heroku stack ;)
Jumpstart Pro has many more features and configurations and I will definitely use it for my next business idea, but for now, we will look at the open-source version.
I've never set up and deployed an application with so many features in such a short amount of time: 30 minutes. The drawback of the open-source version is that you don't have everything pre-configured. So while I deployed the application to Heroku, there still is no distinction between development and production environments.
The open-source version seems still fresh in general and tweaked upon by the creators.
If you get in trouble, there is a forum over at jumpstartrails.com/. Since jumpstart is a commercial product as well, I'm sure you'll get your issues solved with the stack! For Ruby/Rails specific questions - there is nothing like the Ruby community out there!
You'll have quite some stuff out of the box! This stack will be especially useful to you if your application is user management heavy. After the initial install, you'll have authentication, global alert notifications, user roles with an admin panel, and much more out-of-the-box!
The open-source version is CI/CD agnostic and also lets the deployment (including configurations) be up to you. So, you'll need to have experience or figure out stuff on your own.
But in other areas, with Rails you are kind of on the best practices route anyway, since project structure, testing and other design elements are already sorts of agreed upon.
The folks from Jumpstart also give way to using a lightweight JS approach with no heavy frontend framework weapons, solely relying on Tailwind CSS in the front 🌪
Time & Effort to Deploy: --- ★ ★ ★ ☆ ☆
Freshness: --------------------- ★ ★ ★ ★ ★
Community Support: ------- ★ ★ ★ ★ ★
Features: ----------------------- ★ ★ ★ ★ ☆
SE Best Practices: ---------- ★ ★ ★ ★ ☆
Tech: Ruby on Rails, Heroku
Features: Authentication, Authorization, Admin Panel
What's Next?
Hope this helps to get an overview over how great of a production-ready foundation your next dynamic app can have. I suggest you don't waste your time anymore with trying to reinvent the wheel.
If you'd like to see how the optimal developer experience looks like, eat some bento.
If you need a learning experience, then @goserverless!
Want an admin panel without JS frameworks overhead? Jumpstart it!
Have a nice flight 🚀
