career options

frontend vs backend vs fullstack developers

Computer science students often get asked, what will you become after graduation. To those who commit to the life of programmer, there are a lot of different paths that you can take. Today we will discuss about the buzz words that everyone knows about: Frontend developers, Backend developers and Fullstack developers.

Why do we need to know about the above job roles? It’s because different roles require different skill sets to focus on, and to be good at one of them, we need to switch our mind toward it. To keep it simple, we will discuss about web development only. However, the same concept can be used in other fields, such as software and mobile development.

 

Tl; dr;

Frontend developers: mostly working on the client side interface of an application, which includes html, css and javascript for web development, user interface (UI), user experience (UX). Basically they are responsible for anything that users can interact with.

Backend developers: working on the server side of an application, which includes any logical structures that form a server, an infrastructure for an application, including server configuration, database management, and backend logic.

Fullstack developers: fluent in frontend and backend responsibilities, and some extra knowledge about deployment operations (DevOps).

 

Frontend developer

frontend developer skills

Frontend development includes a deep knowledge of HTML, CSS and Javascript. Nowadays, we have various third-party libraries and frameworks that help with our development process. Some well-known third-party modules are:

– Javascript Frameworks/libraries: Bootstrap, jQuery, Angular, React.js, Vue.js, Ember.js, etc.

– CSS preprocessors: LESS, SASS, etc.

– Optimization/packaging: webpack, browserify, grunt, etc.

However, knowing those frameworks does not mean you have what it takes to be a good frontend developer. You also need to have a good knowledge about multimedia design, UI/UX design. Some of the aspects to acquaint are choosing a suitable color palette, typography, website layouts, etc. Experiences with the above fields can be what separate you and the rest.

For a student who decided to pursue a frontend developer career, I would start with the basics like HTML, CSS and pure Javascript, then move up with popular libraries like jQuery and Bootstrap. After that, you can open yourselves to more advanced fields like color rules or typography.

Backend developer

backend developer skills

Backend developers need to know almost everything about the server side code and how the server is configured. Several programming languages and technologies that are useful are:

– Languages: PHP, Javascript(Node.js), C#, Java, etc.

– Database: MySQL, PostgreSQL, MongoDB, etc.

– Understanding of popular CMS and web builders like WordPress, Wix, Drupal, etc.

– Knowledge about operating systems, e.g. Linux, Windows server.

Similar to frontend developers, backend developers also need to know about advanced topics like design patterns, knowledge about web infrastructure. These aspects are very important in optimizing and scaling a website/application. Developers who are fluent can be paid very high, estimated at $120,000 – $140,000 per annum (which I haven’t gotten to that level yet 🙁 ).

For students who want to become backend developers, I would say that you can start with a simple programming language like Python or C, to learn about the fundamental of computing. By learning about algorithms and design pattern logics, you will improve your knowledge of how to optimize your code, how to manage memory and therefore improve the scaleability of your programs. After that, you can continue with database interactions, and play around with various CMS platforms. Once you get to that level, then open yourselves to advanced web infrastructures and server configurations.

Fullstack developer

fullstack developer skill

As mentioned above, a fullstack developer is meant to have knowledge and experience about frontend and backend operations. Moreover, they need to understands how to deploy code into different environments, maybe less than a DevOps engineer, but to some extent they can understand the principle of continuous integration/continuous deployment.

Fullstack developers have to train themselves a lot harder than the above roles. They need to have a lot of experience regarding the mentioned fields. Some people that I know started out with a frontend role in a company, then move on and be a backend developer in another company. After that, they trained themselves with DevOps technologies and dabble with the fullstack developer role. Recruiters often think that fullstack = frontend + backend. However, it goes deeper than that and you will need to tackle the advanced topics very soon once you take the role.

Summary

“Success is no accident. It is hard work, perseverance, learning, studying, sacrifice and most of all, love of what you are doing or learning to do.” – Pele

Each role may deal with different technology stacks. But underneath, they all share the same computing principles. We all need to optimize our code, using the least resources possible to produce the biggest outcome possible. Technologies move incredibly fast these days, and as developers, we will need to continue learning while we’re working.

By Tuan Nguyen

React logo

React 16.8 – Captain Hook is here

React 16.8 was shipped on Feb 06, 2019, bringing with it the Hook feature that everyone was waiting for. It was a version behind schedule, as React 16.7 was going to be the one.

Captain Hook with binocular

Ok maybe not that Hook!!!

After over 6 months from its introduction in React Conf 2018, Facebook development team finally released Hook feature into a stable version release. This feature helps our functional components having most class components features, including having internal state, context, and even lifecycle methods!!!

Tl; dr;

React 16.8 shipped with the stable Hook feature, allowing us to use state, context and lifecycles inside functional components. Hooks resolves 3 problems that React had: Wrapper hell, Huge components, and Confusing classes. Facebook team advises that we should start using Hooks in our new React features for a consistent code style as well as reducing duplication.

Hooks overview

Hook is released without any breaking changes. It is a brand new feature and does not interfere with existing features.

Class components are hard to test, especially lifecycle methods. Using hooks can decouple the lifecycle functions and make them easy to test.

There are multiple kind of hooks: State Hook, Context Hook, Effect Hook, or build your own Custom Hooks.

Facebook has released a good documentation to Hooks here. In this post, we will just discuss about what I think is important to mention outside their documentation.

 

State Hook

More details here.

// what you see in their documents can be confusing
const [count, setCount] = useState(0);
// what it is actually is
const [state, setState] = useState(initialState);

Best thing about `useState` is that you can have multiple state control in your component. Traditionally, we only have 1 state object in a class component. But with this approach, we can have as many state objects as we need.

Context Hook

More details here.

// returns the value of the context
const value = useContext(SomeContext);

Nothing special here, calling `useContext` will return the value of that context, and instead of having to consume the context, we just need to use that value.

// traditional way of using context
render() {
  return (
    <Context.Consumer>
      {(value) => (<MyComponent value={value} />)}
    </ContextConsumer>
  );
}
// with useContext
const OtherComponent = () => {
  const value = useContext(Context);
  return (<MyComponent value={value} />);
};

 

Effect Hook

More details here.

Basically just an implementation of lifecycle methods. Every extra tasks that a component does besides rendering DOM elements are side effects, and should use effect Hook to execute them. I’ll use the same example in the documentation.

import React, { useState, useEffect } from 'react';
// class example
class Example extends React.Component {
  state = {
    count: 0,
  };
  componentDidMount() {
    // set title on mount
    document.title = `You clicked ${this.state.count} times`;
  }
  componentDidUpdate() {
    // set title on update
    document.title = `You clicked ${this.state.count} times`;
  }
  setCount = (count) => {
    this.setState({ coount });
  };
  render() {
    const { count } = this.state;
    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={() => this.setCount(count + 1)}>
          Click me
        </button>
      </div>
    );
  }
}
// functional example
function Example() {
  const [count, setCount] = useState(0);
  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

We can clearly see that the code is duplicated on `componentDidMount()` and `componentDidUpdate()` lifecycle functions. Effect Hook helps us removing that duplication.

Custom Hooks

More details here.

Something to remember here, React will consider a function to be a custom Hook if it starts with use.

useTitleUpdate = (count) => {
  document.title = `You clicked ${count} times`;
};
// usage
const MyComponent = () => {
  const [count, setCount] = useState(0);
  useTitleUpdate(count);
  return (...);
};

Important thing to remember

– Hooks are only declared at top level, meaning we CANNOT declare Hooks in the following examples.

// loops
for (let i = 0; i < 10; i++) {
  const [value, setState] = useState(1);
  ...
}
// conditions
if (x === 1) {
  const [value, setState] = useState(1);
  ...
}
// nested functions
const MyComponent = () => {
  const handleSave = () => {
    const [value, setState] = useState(1);
    ...
  };
};

There is a linter plugin to prevent developers doing this.

Other releases

Along with Hooks, React 16.8 also releases bug fixes and test utilities to test Hooks feature.

 

Quick recap

Hooks feature certainly offers a way to make React code more readable and efficient. However, we do not need to change the existing class components to use Hooks, as suggested in their talk at React Conference 2018. Both of them are doing the same thing under the hood, it’s just the implementation that is different.

React logo

React 16.7 feature preview – What is new?

React 16.7 ships in December 19, 2018. Let us look into the changelog and see what has been changed.

No new feature 🙁

This post is going to be short indeed.

Version 16.7 does not bring us any new features, but rather fixing various bugs and performance boost. One main performance improvement is for React.lazy for large number of lazy components.

Facebook team promised to release Hooks feature along with React 16.7, however, they did not release the API in this version, and now we have no idea when it will be released. If you want to read more about Hooks, I will have another post discussing in details about this feature. For now, the proposal is available at https://reactjs.org/docs/hooks-overview.html

EDIT: You can read all about Hooks here.

Backwards compatibility

Since this version ships with only bug fixes. There should not be any difficulty in upgrading react version in your project.

 

Future version prediction

According to this comment, Hooks feature will be released very soon, the proposal has been accepted and the implementation is merged into master. We just need to wait for them to test thoroughly.

Facebook team will likely release Concurrent mode after Hooks feature is out. More details will be revealed at the end of Q1 2019, since the roadmap states that it will be released in Q2 2019.

 

Tl; dr;

React 16.7 release does not include any breaking changes. Upgrade from 16.6 to 16.7 should not break your projects.

React logo

React 16.6 new features: contextType, lazy, memo

In Oct 24, 2018, React 16.6.0 was published to npm. It brings a lot of exciting new features, including contextType, React.lazy() and React.memo(). We will discuss in depths of what they are and how will they change your React ecosystem.

In this blog post, I am going to assume that you already have certain experience with React, and have been working with React for a little while (mainly for understanding the tremendous advantages that the new features will bring us.

contextType

In React 16.3, Facebook released context API officially, shaking the foundation of state management systems like redux, mobx. In React 16.6, context API is further improved by introducing static contextType.

const SampleContext = React.createContext();

class WithContextAPIComponent extends React.Component {
  render() {
    return (
      <SampleContext.Consumer>
        {(value) => (<div>value.name</div>)}
      </SampleContext.Consumer>
    );
  }
}

class WithContextTypeComponent extends React.Component {
  static contextType = SampleContext;
  
  render() {
    const value = this.context;
    
    return (<div>value.name</div>);
  }
}

// usage
<SampleContext.Provider value={{ name: 'Tuan Nguyen' }}>
  <WithContextAPIComponent />
  <WithContextTypeComponent />
</SampleContext.Provider>

With the sample above, we can see that with contextType, we bound the context value to the component itself, which simplifies one layer of nested component to be rendered. This suddenly looks like it is so much similar to how we use redux store!!!

 

React.memo()

This is very simple. It enables the same functionality of React.PureComponent for functional components.

const MyComponent = React.memo(function MyComponent(props) {
  /* only rerenders if props change */
});

Previously functional components will re-render every time its props change, regardless of value.

With React.memo(), now functional components will shallowly check whether props values have changed, and decide to re-render.

React.lazy()

In my opinion, this is the most outstanding feature that React 16.6 offers.

Short description: it allows React components to only be downloaded from server on demand.

import React, {lazy, Suspense} from 'react';
const OtherComponent = lazy(() => import('./OtherComponent'));
function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </Suspense>
  );
}

In the example, MyComponent will download OtherComponent only when it is needed.

This is very useful in tabular structure, where most users do not browse every tab content.

 

For more information, let’s check out the changelog at https://reactjs.org/blog/2018/10/23/react-v-16-6.html

Write automated script with Tampermonkey and Webpack

Recently I was pulled into an old web-based game called Ghost Trapper. The gist of it is, after a period of time, I can click on a button to trap a ghost, then a count down appears and I have to wait for the count down to stop until I can hunt ghosts again.

Then it hit me, why don’t I automate the process so that I don’t have to spend so much time to play anymore.

Here’s a screenshot of the game.

Ghost trapper screen image

Note the top left count down. Once it reaches 0, I can click that button again and continue hunting ghosts.

I look around for a solution for automating the process. There are quite a few options:

  • Python’s scrapy
  • Phantom.js or Casper.js
  • Puppeteer
  • Tampermonkey (Google Chrome only)

I have some experience in Scrapy, Phantom.js; so I was thinking, why not utilize what I have already known?

… Or I can jump into new things and learn how to do it.

 

I decided to go with the second option, and I chose Tampermonkey to do the work.

 

So I quickly wrote a small script to check if the button is active, and if so, click on it.

setTimeout(() => {
  if (!$('#huntBtn').hasClass('disabled')) {
    $('#huntBtn').trigger('click');
  }
}, 3000);

Simple, isn’t it?!

The problem is, I would like to have the script runs on multiple machines, and I want to synchonize the code in all machines, so if I update the code I’ll just need to do it once.

I ended up with the following structure:

  • A github project to host the code
  • Tampermonkey’s ability to refer to external javascript resources.

My Tampermonkey script

// ==UserScript==
// @name         ghost-trapper
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Ghost Trapper auto
// @author       lightbringer
// @noframes
// @require      https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
// @require      file:///Z:/nodejs/ghost-trapper/ghost-trapper.js
// @match        http://www.ghost-trappers.com/fb/*
// @grant        GM_setValue
// @grant        GM_getValue
// ==/UserScript==

My ghost-trapper.js

class GhostTrapper {
  constructor() {
    // do stuff
  }
  
  hunt() {
    if (!$('#huntBtn').hasClass('disabled')) { 
      $('#huntBtn').trigger('click'); 
    }
  }
  
  run() {
    setTimeout(this.hunt, 3000);
  }
}

var gt = new GhostTrapper();
gt.run();

 

Looking good, however, the script requires 2 files, one from jquery CDN. one from my local machine. And the speed is not very nice (took me a noticeable time before the hunt click happened).

I thought, why can’t I combine them into 1 file? I have experience in Webpack, so let’s try it out.

 

First I installed necessary packages

npm i --save jquery
npm i --save-dev webpack webpack-cli babel-core babel-loader babel-preset-env

Then I created webpack config file

// webpack.config.js
const path = require('path');
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'ghost-trapper.bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
};

Then I create a main file for webpack to point to.

// src/main.js 
import $ from 'jquery'; 
import GhostTrapper from './GhostTrapper'; 
const gt = new GhostTrapper(); 
gt.run();

 

After all this, I compile webpack config. And voilà, the bundle is ready for me to include into tampermonkey, and it runs exactly what I wanted.

From then on, I added multiple features to my automation tool. The ease of webpack’s watch mode really helps me during development, as I just need to refresh the page and the new code is already deployed.