Easy prototype like it is 2004
I have used PHP so much to create websites since 2004, it was so easy and you could upload your files with FTP to many free hosting websites, then javascript became better and easier to use in the browsers and Node.js came after, but it have has been as easy as PHP. We could have kept using PHP but everyone expects prototypes to be snappy and interactive with animations and CSS & JavaScript is the language of the browser.
Then I discovered Harp.js in 2013 (danish blog post!) by Brock Whitten and was immediately hooked, it was so easy to get something started that in contrast to Jekyll was not compiled. The idea with Harp was to keep it simple, but everybody is different and the project suffered from the many different things people wanted myself included (livereloading, more templates, etc.), and it did not really fit stuffing it all in Harp.
In 2014 for me it became a lot easier to publish front-end apps, a lot of apps and developer tools allowed you to publish html files, so you might ask, what more do you want? We still needed tools to do livereloading and bundling, because once we got those tools you miss them in every project there are not in. It meant a lot of configuration to start a project and a lot of these “scaffold” tools and boilerplates, which is just .. daunting.
But in 2015 came React and took the community by storm because now you could keep the template and your functions like onClick together in small components instead of spread out. I stopped using Harp.js because I started doing more advanced things (docker), but I think about it each time when I start a new prototype, could there be something simple like before but with React that we all really like? The power of React is no doubt that it is pure javascript which means in theory that it can be used both in the back-end with Node.js and in the front-end, but doing that is no easy feat. I have even given talks about how difficult it is to do!
I wanted to built and easy tool to do universal apps, but I did not know how a good API would look like! The success of Node.js is no doubt its flexibility, if you don’t like the way it works you can easily change it without throwing it all out and starting over and I did not want to miss that!
I think we found a good compromise
Next.js is a project from Zeit and they seem to have found a good balance between simplicity without locking yourself in! It is like Meteor.js without the lock-in.
You have a folder called pages and all those will be routes, so as their example, index.js will be root “/” and about.js will be “/about”.
Livereloading it built in and it is even hot reloading which means the browser does not even have to refresh and you can work even faster. Setting that up normally yourself is not easy, create-react-app has no doubt helped but normally would you hear words like webpack & react-hot & webpack-dev-server.
Lifecycle hooks are run both on the server and on the client and there is an easy way to know which platform your own, server or client, and there is a way to navigate between pages client-side once your app is loaded, something normally super complicated that involves fetching the right component and rendering that.
Once you want to publish your prototype you can “compile it” with “next compile” and it is ready to be pushed to a server you like where you can run it with “next start”. That is super easy!
And the cool thing is that when you outgrow “next” and want to control the server yourself, you just copy your nearly pure React components into your next project, no messy untangling or rewrite as most of it is your application code!
Check it out at https://github.com/zeit/next.js and give it a try! I will definitely use it in my next prototypes 👍
