Karim Aboelela

The Business Of Tech

Simple Twitter clone in Vue

Vue was released in 2014. Since that time I was 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 is worth a try to see if it has something to say to solve the downsides of React or Angular.

Also lately a discussion became popular that Vue won the star war on Github ⭐️ for JS projects which is cool. But at the same time that doesn’t reflect the actual 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.

The first thing you notice when you start working with Vue it’s easy to kick-start, and easy to maintain. It has two ways data binding which reminds me of Angular 1.x and and a component-based system is inspired by React made 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 Jquey, There were some discussions around that Vue is the new jquery. But I don’t see it as a right 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 has also state management and routing, etc. to build entire Frontend application.

In fact, 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 Vue app. you need to include a CDN version and initialize a new instance.


Components loading

To be able to make separate component and having a better-structured application I found a useful loader http-vue-loader.


Routing

In the last example that we have defined two routes /home and /addTweet which is using Vue routing. And routing link will look like:

Router link

State management

You can consider different solutions for state management, but in my case, I didn’t need additional solutions and was enough to define store variable and append it to Vue app data property as mentioned before.

In general, I find it a good idea to separate state management files, and only to allow modifying throw actions functions to make it clear where to look in the future, that makes state maintainability way easier especially when the app grows — and it will.


Then we can call store action to add 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 prefer to use JSX syntax that’s also possible.

Modern JS frameworks which built on components based systems “including Vue” it supports the idea of having CSS styles in the same component file. I’m not a big fan of this approach especially in case of bigger components. But for feed.vue 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 for me, in the beginning, was the fact 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 data to 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 as data, 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 full code example 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 📡 😉

I was talking recently to a friend who is working with the technical support team for a leading software product, he was complaining about an annoying bug for many users, which he reported to the development team several times but for some reason they didn’t fix it for a long time. Which made me think about how companies and software projects handle users feedback and even more important how they ‘prioritize’ them.

Diagram from https://buzz.typo3.org/teams/agile/article/how-kaizen-works-in-software-development/

Apparently, One of the most practical ideas that agile software development methodology brought us is to do first feature programming then collect user feedback about it, then improve and deploy again and so on, the quicker you apply this cycle, the more successful and user satisfying your product/site is. I think we need to focus more on how to improve the feedback process since a satisfied and loyal user is the key factor of your project future, The first step could be easy by integrating simple project to collect user feedback, bugs and features requests.

How to decide which feature or bug to consider first?

The more the project user base grow, the more different opinions you can see in feedback tickets queue, Every user will complain that the issue he has is significant and development team need to fix NOW! or maybe that old version of browser X doesn’t support a particular feature. But that doesn’t mean that this ticket needs to be fixed immediately. The decision should be more about how many users have this issue so that the development time would have a value and real impact for the majority user’s benefit.

Comic from http://dilbert.com/strip/2003-01-10

Looking into feedback tickets could be tricky, one user opinion not necessarily important issue or feature for the project sometimes not even from the development team point of view, but if 50% of users share the same opinion now, it should jump into the high priority queue. But it’s even hard to collect such a percentage.

Maybe user voting for the tickets would be helpful to set feedback priorities to focus on the important ideas, a good example for this could be what StackOverflow do for ranking questions.

StackOverFlow questions ranking

This direction for some projects could lead naturally into different way of management thinking, for example considering feedback driven design, which was described more in an interesting podcast about handling user feedback on Windows 10 using Feedback hub.

How your team collects/prioritize users feedback? Share it in a comment!

Experience beauty usually happens with the most simple things, Reading a good book, watching a good movie, writing a good piece of code, learning a new thing or even laying down on your back the full day at the park watching the sky, Sounds like a rule! Maybe we need to pay those ‘things’ more attention, or stop calling them ‘simple.’

Watching Paterson tonight with the view of a good director Jim Jarmusch.

Paterson

As far as I can remember that the most website I liked and I was attached too is Google Reader (Yes Google, still not appreciated shutting it down!).

For many people out there and me, RSS/Google Reader was the most comfortable websites/blogs/news following way, You can say that RSS ‘almost’ still alive, And there are alternatives to Google Reader everywhere, But let’s face it! Social Media websites are winning huge numbers of web visitors every day and becoming like the only web reading standard in web visitors mindset.

Although, All off this huge success for social media, It is still not a comfortable way to following people/websites updates. So while it does not make sense to go way back to using only RSS feeds, I was thinking about small changes Facebook and Twitter can learn from Google Reader to make their timeline more readable and even better for their business is more ‘followable’!

Google reader UI ‘image from wikipedia’

Now, What we can see here in which was Google Reader UI are:

It’s simple!

I can only see post name with small description and in addition can be an image.. That’s all! But in Facebook for example I’m forced to see a big destructive timeline with comments for every update which try to steal your attention here and there without a real focus on update content itself!

What do I mean with ‘followable’?

That ‘if you want’ to keep following all updates for all your subscriptions, you cannot say like.. OK! I do not have much time now, And I will just read 50 updates then I will back later to continue reading! Because simply you do not have an efficient way to count unread updates like you can see in every RSS feed in Google Reader. Although you can enable notification on Facebook to read every single update from a user or a page, but it makes things noisier and harder to keep following over time.

Show only unread

I really can’t see why Facebook and Twitter do not have a way to hide already seen updates, From user experience wise I do not need to see the same update while scrolling throw timeline over and over again! Only one time is enough, And if I need to see it again, I can check it as unread.

There can be multiple ways to see timeline

If for business concerns social media website wants to keep current timelines, at least users should have the ability to switch between reading ways, without forcing 1 timeline way, Which I see it is not comfortable and may let people think about better alternatives.

Now, if you have more ideas to improve social media experience share it with me! Alternatively, even better, With Facebook and Twitter decision makers!

One of the common concerns I faced in web/frontend development is libraries like “Angularjs, Bootstrap, JQuery… etc..” loading time, and how that affect on website performance when you need to load several libraries to your website/page.. especially with low internet speed connections.

There are many solutions for compressing files and caching from both backend and frontend sides.

However, I found a new promising idea — basket.js- I wanted to share with you, so let’s explore it! Moreover, asking, Why it can be a good solution for loading JavaScript and CSS libraries.

What is basket.js?


basket.js as the development team define it is: A simple (proof-of-concept) script loader that caches scripts with localStorage.

mmm, But why localStorage!

As you may know already that localStorage is API used in modern browsers to store data, Google and Bing told us that: There are performance benefits to caching assets in localStorage (especially on mobile) when compared to simply reading and writing from the standard browser cache.

How it work?

So the mean idea, That it request scripts via XHR — which means if you need to test it locally you will need to run it from localserver — then store them in browser’s localStorage and next time page loads scripts, it loads from localStorage directly!

Show me some code!

As you can know from installation guide:

Basket.js sample

If everything is fine as it should be, you can see script stored in localStorage:

jQuery saved in localStorage!

Now, that was sample script to make basket.js work, but there are more options for other needs I will brief the most important options for my daily work — also you can read more documentation here — :

  • URL: field which I used in the previous demo and that is required.
  • EXPIRE: expire time in hours:
basket.require({ url: ‘jquery.min.js’, expire: 24})
  • EXECUTE: by default it is true, but you can set it to false in some cases.

Now, what do you think about it? Do you have any better ideas about static files caching? Please, share it in comments.

If you find this post useful, share it and spread the word! ☺