Building a Twitter clone with Vue.js using 0 configuration — Part 1
VueJs was released in 2014. Since then, I have been thinking: ‘Yeah, just another JS framework to reinvent the wheel.’ But since last year it started to get more popular and got my attention. After the initial reading, I thought it was worth trying to see if it has something to offer to solve the downsides of React or Angular.
Also, lately, the discussion became popular that Vue won the stars war on Github ⭐️ for JS projects which is cool. However, that doesn’t reflect the real popularity in the current JS market, although adopting Vue is increasing.
So I wanted to play around with Vue; therefore, I sat a challenge to build a Twitter clone in Vue - with no configuration - to create a timeline for some of the best writers I like. So I started reading about Vue and will share here what I have learned and some ideas.
When you start working with Vue, the first thing you notice is that it’s easy to kick-start and easy to maintain. It has two ways of data-binding which reminded me of Angular 1. Also, React inspired a component-based system which made it a satisfying combination. Regarding that in the documentation:-
On a higher level, we can divide components into two categories: presentational ones and logical ones. We recommend using templates for presentational components and render function / JSX for logical ones. The percentage of these components depends on the type of app you are building, but in general we find presentational ones to be much more common.
In Vue documentation, there is also a comparison between it and other main JS frameworks. You can find it here for more information.
The challenge was possible because Vue doesn’t require any build processes. Just like Jquery old days. Speaking of Jquery, There were some discussions around that Vue is the new jquery. But I don’t see it as a correct comparison since Jquery focused on a specific need to make it easier to manipulate the DOM, but Vue or any other modern JS framework is a different story as it also provides state management and routing, etc. to build entire Frontend application.
In the end, it wasn’t 0 configuration as I aimed for because I needed to add a local HTTP server to make it better for loading components. But I tried to keep the balance between showing Vue features without the need to add extra libraries as much I could resist 😉.
Vue App
To start the Vue app, you need to include a CDN version and initialize a new instance.
Components loading
To make separate components and have a better-structured application, I found a helpful loader http-vue-loader.
Routing
In the last example, we have defined two routes /home and /addTweet views using Vue routing. And routing link will look like this:
State management
You can consider different solutions for state management. Still, in my case, I didn’t need additional solutions. It was enough to define the store variable and append it to the Vue app data property, as mentioned before.
In general, I find it a good idea to separate state management files and only allow modifying throw actions functions to make it clear where to look in the future. That makes state maintainability easier, especially when the app grows — and it will.
Then we can call store action to add a new Tweet:
Component structure
Vue single file component usually includes three tags:-
Vue-HTML <template />
<script />
<style />
By default, you can use Vue-HTML templates. Which I prefer, but if you choose to use JSX syntax, that’s also possible.
Modern JS frameworks, which are built on component-based systems “including Vue,” support the idea of having CSS styles in the same component file. I’m not a big fan of this approach, especially in the case of more complex components. But for the feed view wasn’t a big issue since it’s relatively small.
https://gist.github.com/karimal/fe245740e0f8155e1a5da3347ab3d94b
methods vs. computed
One of the things that weren’t clear to me initially was that Vue has two similar ways to write the app logic. So you can write methods or computed functions.
So what’s the difference? 🤔
As mentioned in css-tricks article:-
Methods: These are exactly what they sound like they might be (yay, naming!). They’re functions that hang off of an object — typically the Vue instance itself or a Vue component.
Computed: These properties may at first look like they’d be used like a method, but are not. In Vue, we use
datato track changes to a particular property that we’d like to be reactive. Computed properties allow us to define a property that is used the same way asdata, but can also have some custom logic that is cached based on its dependencies. You can consider computed properties another view into your data.
If you like to see a live demo of the app, you can find it here.
And for the complete code example, you can find it on GitHub.
In the next episodes
Best practices for building a better Vue app
A real-world data source
More advanced state management using Vuex
So feel free to share your ideas and recommendations to improve or more features you want me to write about 😉
Finally, if you liked the post, share it and spread the word 📡 😉