Next.js Blog

This is similar to my own experiences.

During the past decade the JavaScript ecosystem had to evolve and adapt to handle increasingly more advanced requirements. Multiple tools and libraries rose up to meet the challenge, and the best ones have slowly floated to the top. It's not like the winning tools are even that recent: I think Webpack was already around before 2012, TypeScript was released in 2012, and, if I remember correctly, React was released around 2013. Fun fact: babel was called 6to5 when it was initially released.

Webpack can sometimes be difficult to configure because the problems which it sets out to solve are also complicated. To be fair, their old docs were quite lackluster, and the creator's coding style was uncommon, which made reading through the source a bit challenging. I know a lot of people are critical of Webpack, but I was overjoyed when I first discovered it, as it enabled me to correctly solve a huge number of issues. Once adopted, it let me drastically simplify our build pipeline, as well as our development and testing environments.

I can sympathize with non-frontend developers because I also feel overwhelmed sometimes when I look at all the tooling related to backend / devops / infrastructure stuff. But I understand people build and use these tools because they're usually solving fairly complex real-world problems. I suspect that many people that complain about JavaScript don't care much about the frontend and they just want to get it out of…

These days you shouldn't use a monolithic architecture IMHO, you should consider creating services or microservices with Node.js to provide API's to a "headless" frontend.

Depending on your "workloads" you can start simple with just API's to support your frontends, and then expand your architecture to include services for other services. You would need to consider whether you need caches (redis) or databases (postgresql, mongodb, etc). All these can be containerised as well.

There are also frameworks such as next.js and nuxt.js which can ease the server side rendering side of things, depending on your choice of frontend view library (React/Vue).

In terms of orchestration and deployment, consider building your services with a Dockerfile.

I've had some success for personal projects using something like Rancher (1.x) for easier orchestration and scaling of containers. But at some stage you might want to learn how to use Kubernetes, since it seems to be the in thing now for container orchestration, scheduling, etc. Rancher allowed me to manage hosts and clusters on multiple cloud providers once I had the Rancher manager node setup.

So it can vary from case to case, depending on what your app actually does, you could still use koa+sequelize + passport for your API's. The above are just my own suggestions.

If you choose to go down the serverless road I would recommend checking out the Serverless framework, which can help you with deving as well as deploying to your cloud…

If you already know Python don’t go with something like JavaScript: The Definitive Guide and just go for some basic tutorials. JavaScript is a tiny language with nearly any base library at all. You should be able to get learn the basic syntax quickly. Stay away from TypeScript unless you come from Java when learning. You can look at it later once you’ve got your own bearing.

I would also recommend Next.js as frontend framework. It is React and WebPack based, you can get started quickly and what you learn from it can be applied to other projects.

For the backend just install Node.js (you will need it anyway) maybe look for NVM if you are on mac or linux or nvm-windows if you are on windows.

Once you feel somewhat comfortable with with the syntax you can take a look at eloquent javascript. The book is online, if you like it you can support the author by buying the book but you don’t have to.

Small tip, if you know programming already books like “The Definitive Guide” are not good for learning something new. Giant tombs like that are interesting when you are a total noob, at any other time they will just slow you down when you are trying to get into a new language. Some of those tombs can be interesting once you get well acquainted with a language and might need to look up edge cases but you are not there yet.

Hope this helps and have fun.

https://nextjs.org/

https://developer.mozilla.org/en-US/docs/Web/JavaScript

https://eloquentjavascript.net/

Vue/React is moving heavily into SSR which is the future of web development IMO (37signals called it long ago). It's the best of both worlds of old staticy HTML + interactive components.

I used to look down on something like Next.js/Nuxt.js [1] for simple (and advanced) websites until I used it and I'm 100% convinced it's the future of web development. Where most of the content is built with components but pre-rendered server-side and the JS loads to 'hydrate' the interface with interactive elements. I've stopped using heavy frameworks like Phoenix as a result and switching to simpler backends APIs written in Rust/Ruby/etc with Vue SRR handling the full frontend.

Combined with treeshaking, chunked JS via webpack (which automatically only renders tiny .js files on-demand based on what components the page/route needs), purgeCSS which removes all unused CSS, PWA/critical inlined CSS tools, and other easy-to-use optimizations you can have a fully feature-rich JS site with SEO-friendly HTML pages and very fast page loads.

We're just seeing the beginning of Vue/React and it's going to improve the web from the ills of the past, not make it worse. Better performance and more importantly high-quality well composed codebases, plus TypeScript which helps JS applications scale in size while keeping them sane.

[1] https://nextjs.org / http://nuxtjs.org/

Elixir + Phoenix sound like a great stack. I've been building a side-project with that stack and it has been a joy.

With that being said, I believe it might be quite a learning curve for you. Not because it will be difficult, but just because there might be many topics at once to learn. Like you said, GraphQL, Postgres, Elixir (and a little bit about the BEAM ecosystem), Phoenix and CouchDB. If you are doing anything for the Web, you will inevitably touch JavaScript as well.

Not sure if you are open for suggestions, but one thing you could consider would be using JavaScript or TypeScript with NodeJS. I'm not the biggest fan, but you would be able to use the same programming language in the frontend for our Web app and also the backend with NodeJS and a full-stack framework like Remix[1] or NextJS[2]

This could reduce the overhead to start your side-project and will give you fewer puzzle parts to learn and put together.

[1] Remix: https://remix.run/
[2] NextJS: https://nextjs.org/

Not exactly correct or incorrect. Some projects built as a single page app (SPA), using a fancy framework like React or Angular with little configuration, end up loading all DOM content client side via javascript which has a number of drawbacks on performance and SEO.

It doesn't have to be that way though. If you want to use React, there are tools to help you easily make something like a static site generator (SSG) which will transform your React code down into pre-rendered HTML pages. Two popular ones are Gatsby (https://gatsby.dev/) and Next.js (https://nextjs.org/) which also supports Server Side Rendering (SSR).

So out of the box plain HTML / CSS might be more optimized than a fresh create-react-app repo, but if you prefer to use the toolset provided by React to build your site (or Vue or Angular, etc), there are plenty of options to make that equally performant.