Angular vs React vs Vue.js

We are in a time when there are many JavaScript frameworks/libraries for frontend programming, among the most we have the following: Angular, React and Vue.js, this are the first three frameworks/libraries most used by developers, behind them are Ember, Meteor and Node.js

A few years ago we were in the era where many developers did not know what to use, Angular or React, since these were the most popular and more complete in the frontend environment, but in the year 2018 we saw a new member called Vue.js. This new member is a mix between Angular and React, and because of this it has taken a lot of power in the current market by it’s speed and sturdiness. That’s why Vue.js is amazing and we can see it in the top 3 places of the best frameworks/libraries for the frontend development.

In this blog, let’s explain a little bit about each one of them, so we can know important aspects and which one is better for our projects.

Angular is the oldest framework, when you compare it with React and Vue.js, since it was released in the year 2010 by Google. This framework remains among the top 3 positions, due its speed and performance, also that has been improving each of one of its versions to continue competing in the actual marketing of the JavaScript Frameworks. In the year 2018 Angular launched its stable version that is Angular 7.

React is one of the most popular libraries of the moment and every time more developments use it. Also React was created and maintained by Facebook and more communities support it. This library is focus in the creation of user interfaces. For this, React has many modules and components that already have many integrated functions that helps the development of the application in and easy way and faster.

Vue.js is another framework/library, this was created by a former Google employee. This framework it’s becoming popular even when it does not have the support of a big company, its stable version was release in 2018. This framework is progressive, its functionality is to build user interfaces, every day Vue.js is growing thanks to new versions and communities, and all the advantages that it has.

Vue.js has plugins like Vue-Router which manage all our project routes, it also contains plugins to connect to external services such as Vue-axios or Vue-Fire. We also have Vuex that is inspired a bit in Redux, this is a very important part since it helps us to manage our project’s data.

The History between React, Angular and Vue.js and some differences among them


Licenses

Before using an open source framework we must verify the licenses, these three frameworks/libraries use the same license called MIT, which provides limited restrictions for reuse, we must know very well the restrictions that these licenses have before using any framework or software.I have attached the link so you can know more about this MIT license: MIT License.

Community

This three frameworks/libraries has many documentation, also they have big communities in which they provide many benefits as new functions and also repair or report errors that are found. Next we can see the statistics of the repositories of these frameworks/libraries

Components

The components are an important part of these frameworks. The components receive inputs and change the behavior within it. These changes are always seen in the user interface somewhere on the page. By using these it facilitates the reuse of code and this makes the development more efficient. Now let’s explain how it works in each of these frameworks.

  • Angular: Here the components are known as directives. These directives are only bookmarks in DOM elements. Angular separates the UI part of the components as well from the attributes of the HTML tags, and their behaviors in the form of JavaScript code.
  • React: This framework combines the user interface and the behavior of the components
  • Vue.js: In this framework, the user interface and behavior is also part of the components, which makes things more intuitive. Vue is also highly customization, this allows us to combine the user interface and the behavior of the components with a script. You can also use preprocessors instead of CSS, and Vue is great at integrating other libraries, such as Bootstrap.

Learning Curve

We always ask ourselves how difficult it is to learn in each of these frameworks / libraries, for that we will know how long it takes for us to learn a little about these Frameworks / libraries.

  • Angular: Angular has a rather complex learning curve, since to master Angular we must know concepts such as TypeScript and MVC, so Angular takes time to learn it.
  • React: On the main page of React, this offers a guide to configure it that can last approximately one hour. The documentation is exhaustive and very complete; These guides contain how to solve common errors and other features that require third-party libraries. This means that React does not have a big learning curve.
  • Vue: As we mentioned before, Vue provides a greater capacity for personalization, therefore it makes it easier to learn than previous Frameworks. But simplicity and flexibility can be a double-edged sword, since it makes debugging difficult and allows poor code.

Related image

Installation

Angular
To install Angular do the following:

  • git clone https://github.com/angular/quickstart.git quickstart
  • cd quickstart
  • npm install
  • npm start

To install the Angular CLI (Command Line Interface) use the command below:

  • npm install -g @angular/cli

React
React can be installed using the NPM command below:

  • npm install react –save

To install the React CLI, you can use the Create-React-App as seen below:

  • npm install -g create-react-app

Vue
Vue can be installed using the NPM command below:

  • npm install vue

The Vue CLI can be installed with the command below:

  • npm install -g @vue/cli
Related image

¿Which one will be the winner between Angular, React and Vue?

Now that we know a little more about the history of these three Frameworks / libraries and all their characteristics that makes them be among the top three of the best Frameworks / libraries for Frontend.

Angular is the oldest of the frameworks, it also contains many and big contributors and is a complete package, but its learning curve is quite complex. This framework is a good option for companies with large teams that use TypeScript.

React already has several years in the market and also has a large number of libraries, this makes it gain acceptance quite quickly. React has a large labor market and its future looks bright.

This framework is a good idea to start using frontend JavaScript frameworks because its learning curve is not so complex.

Vue is one of the new competitors in the arena of the Frameworks world and without the backing of an important company, it has performed very well, fighting against its opponents, Angular and React, that has big companies under. Vue, given its simplicity and flexibility, makes it a quite easy to learn framework and that its development is quite effective.

The big question is: Which one is the winner in the world of JavaScript frameworks? The truth is that you can’t pick a winner. Because each of them has its own benefits and disadvantages,  so this makes none better than the other. When we want to use any of these libraries we must know very well what we want to do in our project, so we must first investigate which one is the right framework for our project.

Best 4 Marketplaces to Find the Right Software Engineer in 2019

Hi 4Geeks Nation! Probably some of you have been getting issues to find software developers or software engineers for your company. You’re not alone. We have experienced this feeling at the past. And let me tell you, in business SPEED IS THE KEY.

You know, hiring is hard, frustrating and it consumes much time. Agree? A typical process includes pre-screening, technical interviews (3 in average), negotiation, etc.

Today I want to share with you some websites (or marketplaces) to find software developers on your budget in this 2019. Some of this marketplaces are assisted by AI, others are based completely by humans experts.

Option #1 – 4Geeks Teams:

4Geeks Teams is the first platform to find and hire top in-house software developers in Latin America, launched early 2017. Most North America-based startups and companies prefer worker in their same timezone, and Latin America is pretty near for them, compared with Asia or Europe.

You could rent part-time or full-time developers.

4Geeks Teams is completely assisted by humans on every step to find out your next software engineer skilled in Python, Java, Ruby on Rails, Microsoft .NET, PHP, React.js, React Native, Salesforce or Data Analysis, in 72 hours. So you just need to focus on building and growth… on your vision. Check out full covered technologies.

Some US-based companies like SmarterSelect are currently boosting their product development by leveraging on 4Geeks Teams. Watch what Robert Davis, SmarterSelect CEO says.

Hourly prices start in $40 USD.

Option #2 – Turing:

Turing is a AI-backed marketplace to find remote software developers around de world. Platform will show you some posible options to your approval.

In their website they don’t show any great information about skills, capabilities or technologies. Pricing is no clear at this time. If you need more information about terms, hiring process, agreements or even pricing you need to fill out the contact form on their website.

They offer 2 weeks trial.

Option #3 – Toptal:

TopTal is a popular marketplace where companies or individuals could rent software developers according to their needs, globally. Developers will work remote, so they could be at any place in the world. This is good or bad, depending your business life, because of different timezones.

They offer 2 weeks trial.

Hourly prices start in $70 USD.

Option #4 – UpWork:

UpWork is a global freelancing platform where businesses and independent professionals connect and collaborate remotely.  According to their website: a client puts up a job posting and deposits some money in Escrow. Freelancers then apply for the job for the client to hire the best.

You can also look at freelancer’s rating, comments and past work, in order to decide if they are a good fit for your team.

So, pricing terms depends on how much a freelancer charge.

Analyzing videos with Python

The analysis of videos is an important part of the current society, and the uses go further and further everyday, from security in the airports, to sports, cinema, transport, health, home automation, etc. Look closely at your environment, and maybe you can find a camera, and probably there is a system running on the background, that is analyzing all the content.

To analyze videos, the first question you should ask yourself is not ‘How’ but ‘What’. What I want to do? What do I want to analyze? What are my scopes or limits? For example, maybe you want to analyze balls? Perfect. What kind of analysis do you want to perform? An example is to detect balls, but you can also track balls. But this does not stop here, there are a number of other options that you should consider before starting. For example, how many balls do you want to analyze, do you have a maximum, a minimum, what happens if those limits are ignored? What happens if a ball enters in the middle of the video, should you detect it or ignore it? These and many other are questions to consider when you try to analyze videos, and each one has a better solution that works perfectly for that situation, but maybe not for the rest. That’s why we need to know what to track before start.

Once you defined your scope and limits, you can begin to investigate how to carry it out. We will start with a simple example, and from there we will add more things to analyze. And the simplest is to detect movement, a ball as in the previous example. At the moment we are not interested in anything other than finding our ball inside our video.

First, we create a virtual environment to separate the packages globally, and only install them locally on the environment.

> python3 -m venv env

> source env/bin/activate

Now we are going to install the packages that we need, make sure you have updated pip to its latest version.

> pip install opencv-python

> pip install opencv-contrib-python

This will install OpenCV in its latest versión( 4.1). With opencv-contrib you have access to many more features within the same cv2. Also, installing OpenCV also install Numpy by default.

First we will make the general structure, which is open a video and play it, nothing else. I’m going to use this video, which is just an orange ball rolling on a white background.

import cv2

import numpy as np

from time import sleep

class Detector:

    def __init__(self):

       self.height = 0

       self.width = 0

    def detect_movement(self):

        cap = cv2.VideoCapture(‘assets/vid_test.mp4’)

        if not cap.isOpened():

            raise ValueError(‘The path specified is not valid.’)

        while cap.isOpened():

            success, frame = cap.read()

            if not success:

                break

 

            # Your video analyzer goes here!

 

            cv2.imshow(“Display the result”, frame)

            cv2.waitKey(0)

    cap.release()  # Don’t forget to release your video!

if __name__ == “__main__”:

    detector = Detector()

    detector.detect_movement()

    cv2.destroyAllWindows()  # Close all the opened windows

Here’s the result!

 

 

 

Apply a Mask

Now let’s start with the analysis. First, we are going to apply a mask to our frame, so we can only see the ball.

          lower_red = np.array([0, 130, 75])

          upper_red = np.array([255, 255, 255])

          hsv = cv2.cvtColor(frame, cv2.COLOR_BGR2HSV)

          mask = cv2.inRange(hsv, lower_red, upper_red)

          contours, _ = cv2.findContours(

              mask, cv2.RETR_TREE, cv2.CHAIN_APPROX_SIMPLE

          )

          red = cv2.bitwise_and(frame, frame, mask=mask)

 

I created a red mask, so I can ignore the rest. If you put another object on the video, as long is not red, is going to be ignored! Since our ball is orange/red, is displayed. Check it out!

 

Difference between two frames

Now, we are going to see the difference between two frames. We need one frame to compare with the rest, I’m going to take the first frame.

Make sure you put this piece of code before the while.

_, first_frame = cap.read()

After that, we are going to add this line inside the while.

diff = cv2.absdiff(first_frame, frame)
Our first frame is the white background RGB(255, 255, 255), and our ball is orange, let’s say RGB(255, 127, 0). If we take the difference between these two colors, the result is light blue RGB(0, 128, 255).  Our background is still white on the rest of the frames, so when we take the difference between RGB(255, 255, 255) and RGB(255, 255, 255) the result is RGB(0, 0, 0), black! Here is the result.

Using a Detector

Now we are going to add a real detector. OpenCV has several options to detect objects. For example Haar cascades if you want to detect faces or pedestrians. Our example is far simpler, so we are going to use one that fit our needs, for example SimpleBlobDetector. This one allow us to detect simple objects like balls.
def getBlobParams(self):
    params = cv2.SimpleBlobDetector_Params()
    params.filterByColor = True
    params.blobColor = 255  # 0 is white, 255 is black, on the grayscale
    return params
detector = cv2.SimpleBlobDetector_create(self.getBlobParams())
keypoints = detector.detect(frame)
im_with_keypoints = frame.copy()
if keypoints:
    x_pt, y_pt = int(keypoints[0].pt[0]), int(keypoints[0].pt[1])
    ball_diameter = round(keypoints[0].size)
    cv2.circle(
      im_with_keypoints,   # Image output
      (x_pt, y_pt),   # X, Y coordiantes
      int(ball_diameter/2),   # Radius of the ball.
      (255, 0, 0),   # Color, BGR.
      3   # Thickness of the line.
    )
The blue circle around our ball means that our detector is working. If you check the original video, you will see a black border around the ball. I’m actually detecting this perfect circle instead of the ball, just by saying to my detector that I want to track something black, SimpleBlobDetector tracks circles by default. This will give you the exact coordinates of the ball, which can be used on many things, like tracking
As you can see, OpenCV is a really powerful tool that works for you, you just need to have a clear idea of what you want, and OpenCV does it for you!

An Internet weakness: BGP hijacking

As we were talking before BGP is the protocol that reings the Internet (if you didn’t read the last post, check it out here: https://4geeks.io/blog/have-you-ever-thought-about-how-internet-works/). BGP was created with an idea in mind: connect Autonomous Systems (AS) around the world, but security was not taken into account.

    A simple action as change (as AS) my information about the best route that I know for another AS, it could redirect all the traffic to a “blackhole”. Also it could increase the response time for a site or region in a considerable quantity. These actions are known as: BGP hijacking.

    The BGP hijacking (or IP hijacking) could be generated in an accidentally way or on purpose. In 2008, Pakistan wanted to restrict the access from inside the country to the video site www.youtube.com. There was a misleading configuration that derived in all traffic to Youtube went to Pakistan. For sure, the site was unavailable for a few time until the BGP tables were updated with the correct routes.

    Another similar case, this time from Iran in 2017, was looking for censor some websites to its citizens. The politics were applied and effectively those sites were banned in the country , however this rules were propagated to other AS provoking that users from other countries like China or India couldn’t access to them. Zach Julian made a good analysis about the incident and how the rules were propagated. If want to read it, here’s the link: https://know.bishopfox.com/blog/2017/01/in-the-news-a-bgp-hijacking-technical-post-mortem.

Even all the IP addresses from an entire city could got redirected to a blackhole. Image obtained from: https://www.freepik.com/free-photo/keyboard-social-business-young-person_1088171.htm

    An attack generated on purpose, categorized as a Phishing attack, was detected last year: Amazon’s Route 53 service were hijacked and affected all the traffic that went to this service. The attackers redirected the traffic from MyEtherWallet.com, a cryptocurrency website, to an identical fake side and they stole a small amount of currency. With the attack, the users were entered to the correct address, but they were redirected to a fake server located in Russia.

BGP hijacking as a censorship tool

    As we can see, it’s totally possible to restrict content to a province, state or even a country. In a fictional context of a “cyber war”, a group of attackers could make that sides from a whole country cannot be accessed from other places. This could provoke considerable economic losses while the hijacking is active.

    Also a group of institutions could agree to ban another institution or country from their AS and groups that does not have relation with the agreement could be affected by this. For example: AS1 and AS2 want create a “blackhole” effect in all the traffic that is for AS4, so they will not redirect to that AS. Exists another AS (AS3) that depends on AS1 and AS2 to connect to AS4, but the agreement will not allow the traffic to AS4. It does not matter if  AS3 and AS4 has excellent relation, they will not could connect with each other.

It has happened more than 25 years since BGP creation and the protocol still vulnerable to this kind of attacks. Of course, there are strategies to avoid a possible attack, but the BGP hijacking still active and all the internet structures remains on it. It is necessary to move to another protocol more secure than the actual and one that does not allow the censorship to another AS.

Server Side Rendering in React with no configuration

Creating a React application is simple, but especially those who are beginners (included me) in this world of programming, sometimes we let slip certain terms, for example, Server Side Rendering (SSR).

There are many articles dedicated to this topic and certain professions dedicated to this area, for example SEO. But quickly, to place ourselves in this context; our pages/applications have labels with information that allows browsers such as Google to define the theme, category, type of content, among other parameters, which is our focus on the web or where we want to go (target market).

With good practices in the SEO trade, the “crawlers” will give the information to Google, and after a certain analysis the search engine will define the position of our website among the search results.

But React, by default, does not perform this type of task or at least does not offer us the possibility of doing it.

A few months ago we shared with you a blog dedicated to the creation of a React application but with the SSR feature (here). In the small demonstration application we use a small framework called Next JS, who makes SSR work accurate in Javascript applications.

We’ve been working with Next JS, and we can say that it is very good, however it has some characteristics unrelated to React (because Next JS can be added to any JS application) that makes us configure some files in a slightly more complex way; as technology lovers we know that every resource is being improved with the passage of time, and with that comes practicality and ease of use.

Now, we met a new tool called Razzle. It is simply the same work that is done with Next, but Razzle tries to deviate as little as possible from React, as well as configuring as little as possible and therefore brings some of the libraries by default.

For example and perhaps the most valuable thing for those of us who have dealt with the use, is the navigation and Razzle allows you to use react-router-dom already integrated.

Also Razzle is useful with Reason, Vue, Elm and Angular according to their own documentation.

To create the Razzle project just type in your terminal:

npx create-razzle-app app-name

The above command will create the necessary files to start working, start by modifying your App.js in the same way you do with a React project. You can see the configuration of server.js and check the use of express, as well as react-router-dom and react-dom for your backend and frontend work.

yarn start

In conclusion, I am really fascinated by Razzle, the use has been little, we are still in full investigation of the tool, we write this according to the experience we have obtained, therefore if you have something to share about this tool we thank you participate in the comments section to help the community.

It can be simply your appreciation to Razzle or some problem or error that you are getting, so we can help you or someone could also contribute to that solution you need.

We are willing to learn with each contribution assuring us of the benefit of all of us who are in this beautiful and great world of programming.

Meet María Rosales

Marí José is our community manager, she takes care of having our social media activity, but more importantly with quality content. She is from the most south part of San Jose. She really loves what she is doing and help the team by creating activities where we can all be involved, which is really nice actually.

If you see some content or watch our lives streaming transmissions, well, Maria Jose is behind that 🙂

How will you describe yourself?

Honest, responsible, creative, cooperative, good sense of humor, I like to learn from others, work in groups.

What do you do in your free time?

Watch Netflix, read some news, spend time with the fam, meet new places, I love to sleep a LOT, so the most part of the time I prefer to sleep.

Best series you have ever watched?

  1. La Casa de Papel
  2. Jane The Virgin
  3. The Sinner.

Mountain or Beach ?

I prefer the beach, for me, the beach is the happiest place to stay, I love watching the sunsets, hear the waves. With these simple things, I feel so alive, so grateful. But sometimes I prefer the mountain, the calm when you stay it is great.

Do you do sports (adventure, extreme, endurance)?

No, I don’t like so much to do sports. 🙁

Which type of music do you like?

Pop music, reggaeton, urban and sometimes I like to hear Vallenatos, salsa and “baladas”.

What are your top 5 books of all the time?

  1. Diario de Ana Frank
  2. Siddhartha
  3. Cien años de Soledad
  4. Noticia de un Secuestro
  5. I love all the Elvira Sastre books.

What are your top 5 movies of all the time ?

I love all the Marvel movies, and I’m a real fan of Disney movies. So Marvel movies I love the Avengers Saga, and Disney movies, Beauty and Beast, Cinderella, and Sleepy Beauty.

What is the most exciting part of being a community manager?

Interact with the people and create all the content that will be displayed for too many people.

Which is the best part of being part of 4Geeks team?

I think the best part is the diary learning.

What are your goals for this year?

Do my best work here, learn more about marketing digital and finish my degree in Communication and Marketing.

Whenever you need help on how to start making ideas into reality through technology, 4Geeks team is up and ready, just reach out to us at hello@4geeks.io.

3 Most Popular Transactional Email Services for Products

One of the most basic product tasks is sending emails. No matter the interface or device; it can be a web product, a mobile product, TV product, wearable, API, etc.

So your product will send an email to register new users, to restore passwords, shipping notifications, or any message that you need to send to users triggered by internal or external events. It’s very very common for a product send emails. In the market exists some alternatives to send emails that maybe your development team want to know.

In the following 2-3 minutes I will mention the 3 main transactional email services to keep in mind. All of them are handled by their API and several software libraries to integrate with specific software languages.

Ok, here we go:

#1: Mailgun

Mailgun is my favorite transactional email service because of their simplicity to setup and integrate.

In Mailgun you can create sub-accounts, so  you can use each sub-account for each domain with separate lists of email. There’s batch sending features to personalize emails, detailed analytics, and logs, and a powerful parsing engine to turn incoming emails into JSON and route it where you want.

Mailgun is very easy to use,

 

#2: Amazon AWS SES

Amazon Simple Email Service (Amazon SES) is a cloud-based email sending service designed to help digital marketers and application developers send marketing, notification, and transactional emails. You can use the SMTP interface or one of the AWS SDKs to integrate Amazon SES directly into your existing applications.

With Amazon’s email offering, you’ll handle everything on your own. And it’s priced accordingly. There’s no plans to pick from, no tiered feature levels: just a flat fee of $0.10 per thousand emails you send, plus another $0.12 per GB of email attachments sent (up to a max of 10Mb per email message).

If you send from an application hosted in Amazon EC2, the first 62,000 emails you send every month are free.

Read more about this service in their website and learn how to integrate it with your product, examples codes and so.

 

#3: Sendgrid

Sendgrid is one of the most popular email service that recently has been acquired by Twilio.

Similar to Mailgun and AWS SES, you can use Sendgrid to send transactional email via SMTP or via API. Their API documentation is very complete.

Sendgrid includes an user interface to let user compose, send and track marketing emails (and all in between). It includes to add contacts, create segments, create and send campaigns, and view your stats.

 

Want to learn more? Check it out here.

 

Ok. Hope you can find pure value on this post and you can keep in mind these email transactional services to use into your product… it’s useful to send shipping notifications, password recovery, and almost every stage you want to communicate to your users.

Migrate from Google Cloud Messaging to Firebase Cloud Messaging, Step by Step.

Hi 4Geeks Nation!! If you are behind a product development, specifically a mobile app, you want to know this new tool built by Google to send messages (notifications) to your users on your product.

Google launched Firebase Cloud Messaging (FCM) as a new and more powerful tool to manage messaging to mobile devices.

Using FCM, you can notify a client app that new email or other data is available to sync. You can send notification messages to drive user re-engagement and retention. For use cases such as instant messaging, a message can transfer a payload of up to 4KB to a client app.

Look at the FCM schema… it’s beautiful and useful.

So, if you are using the old Google Cloud Messaging and planing to migrate to the new Firebase Cloud Messaging, this video can help you to put all factors on the table.

 

If you need help with this, our software engineers can help you. So, contact us!

Here’s a Demo to Implement Google Cloud Video Intelligence API

Some months ago Google showed to the world how to use their most recent video intelligence product, Google Cloud Video Intelligence API.

Ok, to get context, Cloud Video Intelligence is basically an API that makes videos searchable, and discoverable, by extracting metadata with an easy to use REST API.

You can now search every moment of every video file in your catalog. It quickly annotates videos stored in Google Cloud Storage, and helps you identify key entities (nouns) within your video; and when they occur within the video. Separate signals from noise, by retrieving relevant information within the entire video, shot-by-shot, -or per frame.

Take a look at the following video to understand the power of this tool.

If you working with videos, take your time to learn more about this API. If you are not working directly with videos, feel free to share this post with your boss… maybe it can be useful for next business strategies.

A Neural Network Playground In The Browser

Well, maybe Neural Network can be a fancy or very new term. The thing is that Neural Network is the “base of” Machine Learning, and other applications like Artificial Intelligence.

A Neural Network it’s a technique for building a computer program that learns from data. It is based very loosely on how we think the human brain works.

First, a collection of software “neurons” are created and connected together, allowing them to send messages to each other.

Next, the network is asked to solve a problem, which it attempts to do over and over, each time strengthening the connections that lead to success and diminishing those that lead to failure.

Web TensorFlow Playground

So, this web tool is an interactive visualization of neural networks, written in TypeScript using d3.js. Go to http://playground.tensorflow.org to start playing just in the browser. I tested it on Google Chrome.

BTW, you can find the source here in TensorFlow’s GitHub.

Neural Network Playground, TensorFlow

I would like to know if you are working on some Neural Network project. Maybe you can get the exposure needed 🙂 Use the comments section below.

Search

Join the community!

Name:

Email:

Listen to The 4Geeks Podcast

the 4geeks podcast logo

Lease Your Own IT Team in Latin AmericaGet Quote