Nếu lập trình đủ lâu, bạn sẽ ít nhiều nghe đến khái niệm mental model, và nếu bạn đã và đang viết React, bạn càng thấy thuật ngữ này xuất hiện rất nhiều. Đây là một khái niệm không chỉ trong hữu dụng trong React, mà nó còn là chìa khóa để bạn tự tin khi làm việc với những thư viện như React.

Mental model là gì

Một chữ rất khó tìm được một từ tiếng việt gói gọn để mô tả nó. Một cách dài dòng thì nó là cách mà chúng ta hình dung một vấn đề trong đầu, một bước mapping một hệ thống ở bên ngoài vào trong đầu trong ta, hình dung nó cách vận hành.

Một ví dụ điển hình của mental model là internet: một hệ thống phức tạp gồm nhiều phần kết nối lại với nhau, nhưng hãy nghĩ đến cái mà bạn hình dung về nó. Tôi sẽ nghĩ nó là một hệ thống các máy tính kết nối lẫn nhau thông qua rất nhiều server, một vài điều hướng viên giúp định hướng đường đi của thông tin.

Nó không phải là một hệ thống mô tả đầy đủ chi tiết về internet, nhưng ít nhất với cái hình dung này, tôi có thể xử lý nhiều thứ liên quan, thí dụ như nếu tôi cần mạng thì tôi cần có máy tính thiết bị đầu cuối và nối vào một đường truyền của nhà mạng.

Tìm việc it react hấp dẫn cho bạn

Tại sao quan trọng?

Nếu chúng ta hình dung được mọi thứ sẽ vận hành ra làm sao, nếu gặp một vấn đề, chúng ta có thể làm việc với nó trơn tru hơn.

Hình dung cách React vận hành như thế nào

React giúp chúng ta xây dựng nhưng hệ thống UI phức tạp, với tùm lum thứ tương tác qua lại với nhau dễ dàng hơn trước đây rất nhiều. Nó cũng định hướng chúng ta viết code theo một cách rất cụ thể, giống như nó thể thơ “lục bát”, khi bạn viết thì phải tuân thủ những nguyên tắc nhất định.

Ý tưởng chính của React: đóng gói những logic và UI giống nhau của ứng dụng thành một khối, React đảm bảo phần đóng gói này luôn cập nhập.

Tất cả đều là function

1. React component: là một function
2. Một component chứa một component khác: một function gọi đến một function khác
3. Prop: tham số của một function

Khi viết bằng JSX, bạn có thể tưởng nhầm component, prop là gì đó cao siêu. Nếu bỏ hết những gì của JSX đi, React là những function gọi qua gọi lại.

Component: một function trả về JSX

React sử dụng JSX – Javascript XML – một cách viết nhét HTML vào trong javascript.

Hãy bỏ qua class component và chỉ tập trung vào functional component đang trở nên phổ biến hơn. Một function component sẽ hoạt động y như một javascript function thông thường. React component luôn trả về JSX -> sau đó sẽ được thực thi và trả về kết quả cuối cùng là HTML

const Li = (props) => <li {...props}>{props.children}</li>;

export const RickRoll = () => (
  <div>
    <div className="wrapper">
      <ul>
        <Li color={"red"}>Never give you up</Li>
      </ul>
    </div>
  </div>
);

const Li = (props) => React.createElement("li", props, props.children);

export const RickRoll = () =>
  React.createElement(
    "div",
    null,
    React.createElement(
      "div",
      {
        className: "wrapper"
      },
      React.createElement(
        "ul",
        null,
        React.createElement(
          Li,
          {
            color: "red"
          },
          "Never give you up"
        )
      )
    )
  );

Prop: tham số của function

Prop (properties) chẳng qua là một cách gọi khác cho tham số truyền vào trong function, còn về mọi thứ còn lại nó hoàn toàn giống nhau, React có nhét thêm một số tham số của riêng nó như children.

Hình dung về một function

Bạn có thể hình dung function/component như những chiếc hộp, thằng này bọc thằng kia

Những chiếc hộp này tương tác với nhau như thế nào?

Bạn có thể hình dung trong đời sống thực ông bà có câu nói tài sản của cha/mẹ là của con, tài sản của con là của con, Javascript người ta đặt tên cho kiểu kế thừa đó gọi là closure.

Đây là cách mà các function cha-con tương tác với nhau, bạn sử dụng function, bạn đã sử dụng closure.

Nghĩa là trong React, là cha mẹ chúng ta có thể truyền prop xuống cho con, nhưng tài sản của con thì chúng ta không đụng vào được

const Parent = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      The count is {count}
      <div>
        <ChildButtons onClick={setCount} count={count} />
      </div>
    </div>
  );
};

const ChildButtons = (props) => (
  <div>
    <button onClick={() => props.onClick(props.count + 1)}>
      Increase count
    </button>
    <button onClick={() => props.onClick(props.count - 1)}>
      Decrease count
    </button>
  </div>
);

Hình dung cách React render

Render có thể xem là phần gây khó dễ nhất của React để mà hình dung. Có những thứ nhìn vào code chúng ta sẽ không thấy được cơ chế khi render chuyện gì xảy ra và không xảy ra.

Tưởng tượng nó như một cái hộp có thể tái chế, lần render đầu tiền là lúc sản xuất ra chiếc hộp này, các lần re-render tiếp theo, hay tái chế, phần lớn mọi thứ sẽ được đập đi làm lại, nhưng những phần như state sẽ được tái sử dụng

const Thumbnail = (props) => (
  <div>
    {props.withIcon && <AmazingIcon />}
    <img src={props.imgUrl} alt={props.alt} />
  </div>
);

Việc của React phải làm với state là đảm bảo nó consistent giữa các lần render.

Khi một chiếc hộp được tái chế, toàn bộ các hộp con bên trong cũng được tái chế – re-render bởi các state và prop lúc này đã thay đổi.

Hy vọng qua bài viết kiểu này các bạn đã có thể làm việc với React Component một cách nhẹ nhàng không cay cú.

TopDev via Vuilaptrinh

<link rel="prefetch" href="/style.css" as="style" />
<link rel="preload" href="/style.css" as="style" />

<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />

<link rel="prerender" href="https://example.com" />

<link rel="preload" href="/style.css" as="style" />

<link rel="stylesheet" href="index.css" />

/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

<link rel="preload" href="comic-sans.woff2" as="font" />

<link rel="prefetch" href="/style.css" as="style" />

<link rel="preconnect" href="https://api.my-app.com" />

<link rel="dns-prefetch" href="https://api.my-app.com" />

<link rel="prerender" href="https://my-app.com/pricing" />

TopDev via Vuilaptrinh

TopDev via Vuilaptrinh

Actions, reducers, action creators, middleware, pure functions, immutability,… những ngoại ngữ làm rối bất kỳ ai nếu chưa biết redux

Nếu chưa biết tại sao lại sinh ra thằng Redux này, có thể xem ở tuts trước của mình.

Chỉ sử dụng State của React

Component sẽ build

import React from 'react';

class Counter extends React.Component {
  state = { count: 0 }

  increment = () => {
    this.setState({
      count: this.state.count + 1
    });
  }

  decrement = () => {
    this.setState({
      count: this.state.count - 1
    });
  }

  render() {
    return (
      <div>
        <h2>Counter</h2>
        <div>
          <button onClick={this.decrement}>-</button>
          <span>{this.state.count}</span>
          <button onClick={this.increment}>+</button>
        </div>
      </div>
    )
  }
}

export default Counter;

Giải thích ngắn gọn cho dễ theo dõi

• Giá trị count được lưu trong state của component Counter
• Khi user click ‘+’, hàm increment sẽ tăng giá trị count lên
• Khi state bị thay đổi, React sẽ render lại Counter và những component bên trong của nó, giá trị mới sẽ hiển thị

Thêm Redux

Như đã đề cập trong tuts trước, Redux lưu state lại trong 1 cái store, tranh lẫn lộn, store là nơi lưu state, và state dữ liệu.

Cài redux và react-redux package

npm install redux react-redux --save

Tại sao phải 2 cái package?, cái redux chỉ cho ta cái store, để lấy được cái state ra, sử dụng hàm connect trong react-redux, vì redux không phải chỉ làm việc chung được với React thôi không, nó có thể chơi với Vue, Angular không chừng.

Bỏ state đi

import React from 'react';

class Counter extends React.Component {
  increment = () => {
  }

  decrement = () => {
  }

  render() {
    return (
      <div>
        <h2>Counter</h2>
        <div>
          <button onClick={this.decrement}>-</button>
          <span>{this.props.count}</span>
          <button onClick={this.increment}>+</button>
        </div>
      </div>
    )
  }
}

export default Counter;

connect nó với store thôi

import { connect } from 'react-redux';
// ...
// Viết thêm hàm này
function mapStateToProps(state) {
  return {
    count: state.count
  };
}

// Thay cái
// export default Counter;

// bằng
export default connect(mapStateToProps)(Counter);

Ok vậy là xong phần connect component với các state ở trong store, chúng ta cần khai báo Store!

Bọc toàn bộ cái App bên trong component Provider của react-redux để tất cả component bên trong App có thể sử dụng hàm connect để gọi đến store

import { Provider } from 'react-redux';

...

const App = () => (
  <Provider>
    <Counter/>
  </Provider>
);

Chưa xong, chúng ta phải setup cái store để đưa vào cho Provider

import { createStore } from 'redux';

const store = createStore();

const App = () => (
  <Provider store={store}>
    <Counter/>
  </Provider>
);

Vẫn chưa đủ, thật sự Redux không được thông minh như chúng ta tưởng tượng, lúc đầu mình đã nghĩ rằng khi create store như vậy nó sẽ cho mình những giá trị default bên trong store. Nhưng không chúng ta phải làm tay tất cả. Chúng ta phải cung cấp cho nó 1 hàm gọi là reducer, cái hàm reducer này phải return về một giá trị cho state, luôn phải return state nhé. Bên trong reducer ta sẽ xào nấu state theo yêu cầu, nó sẽ nhận state hiện tại và trả về state mới.

const initialState = {
  count: 0
};

function reducer(state = initialState, action) {
  return state;
}

const store = createStore(reducer);

const App = () => (
  <Provider store={store}>
    <Counter/>
  </Provider>
);

Action

Action là gì, nó đóng vai trò như thế nào và nó đến từ đâu? Làm thế nào mà ta đổi giá trị counter?

action là 1 JS object nó sẽ cho biết bạn đang muốn order món nào, như tờ giấy ghi order trong nhà hàng ấy mà, nó sẽ chưa thông tin ‘món’ bạn order, đầu bếp reducer sẽ dựa vào đó mà xào nấu ra ‘món’ bạn order

function reducer(state = initialState, action) {
  switch(action.type) {
    case 'INCREMENT':
      return {
        count: state.count + 1
      };
    case 'DECREMENT':
      return {
        count: state.count - 1
      };
    default:
      return state;
  }
}

Reducer sẽ căn cứ vào action.type để thực hiện thay đổi và trả về state mới, nên nhớ chúng ta phải LUÔN LUÔN trả về state trong reducer, nếu có hay không có thay đổi cũng phải trả về state

Không bao giờ được phép thay đổi State trực tiếp

State là một immutable object, tuyệt đối KHÔNG thay đổi state như sau

function brokenReducer(state = initialState, action) {
  switch(action.type) {
    case 'INCREMENT':
      // BẬY: đừng thay giá trị bằng kiểu này
      state.count++;
      return state;

    case 'DECREMENT':
      // BẬY: đừng thay giá trị bằng kiểu này
      state.count--;
      return state;

    default:
      return state;
  }
}

Làm như vậy cũng cấm tuyệt đối nhé:

• state.foo = 7
• state.items.push(newItem)
• delete state.something

Action từ đâu mà có

Action không tự sinh ra, nó được dispatch ra từ hàm dispatch. Hàm dispatch thì đặc biệt là nó không được import, mình có thể gọi store.dispatch(someAction), nhưng cái store này thì nó năm ở trong 1 file thôi, Vậy hàm dispatch này làm sao có đây?

Thật ra lúc chúng ta gọi connect thì hàm connect cũng đã map cái hàm dispatch vào trong props của component luôn.

import React from 'react';
import { connect } from 'react-redux';

class Counter extends React.Component {
  increment = () => {
    this.props.dispatch({ type: 'INCREMENT' });
  }

  decrement = () => {
    this.props.dispatch({ type: 'DECREMENT' });
  }

  render() {
    return (
      <div>
        <h2>Counter</h2>
        <div>
          <button onClick={this.decrement}>-</button>
          <span>{this.props.count}</span>
          <button onClick={this.increment}>+</button>
        </div>
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    count: state.count
  };
}

export default connect(mapStateToProps)(Counter);

Tutorial này sẽ cover những câu điều kiện dùng để render component phổ biến nhất

If/Else

Dễ nhất và căn bản nhất

render() {
    if (this.state.mode === 'view') {
        return (
            <div />
        )
    } else {
        return (
            <div />
        )
    }
}

Ko render với null

Nếu không muốn render một component, trong hàm return trả về giá trị null, lưu ý khi return null nhưng hàm render vẫn được gọi.

render() {
    if (this.state.mode === 'view') {
        return <h1 />;
    } else {
        return (
            null
        )
    }
}

Đặt biến cho element

Giờ nếu không muốn thêm câu else

render() {
    let input;
    
    if (this.state.mode !== 'view') {
      input = <h1/>;
    }
      
    return input;
}

Câu điều kiện rút gọn

Thay gì if/else, có thể dùng câu điều kiện rút gọn để render luôn

điều kiện ? nếu true : nếu false

Sử dụng với ví dụ trên

render() {
    return(
        <div>
            {this.state.mode === 'view' ? <h1> : null}
        </div>
    )
}

Gọn gàng sạch sẽ hơn, tuy nhiên cũng đừng lạm dụng quá, có anh bạn làm chung với mình, lạm dụng cách này quá lố, đến nổi mỗi lần đọc code của anh ấy là cơn ác mộng, mặc dù không sai, nhưng thằng nào code sau mở lên đọc tội nó lắm.

return (
  <div>
    { condition1
      ? <Component1 />
      : ( condition2
        ? <Component2 />
        : ( condition3
          ? <Component3 />
          : <Component 4 />
        )
      )
    }
  </div>
);

Short-circuit operator (&&)

Trong trường hợp trên, rõ ràng việc trả về null cũng hơi dư thừa, có thể sử dụng ngắn-hơn-cả-ngắn với cú pháp &&. Cũng như câu điều kiện rút gọn, tuy nhiên nó sẽ chỉ render nếu true, con false nó sẽ không làm gì cả

render() {
    return(
        <div>
            {this.state.mode === 'view' && <h1>}
        </div>
    )
}

Immediately-invoked function expressions (IIFE)

IIFE như tên gọi nó đã nói lên tất cả, hàm sẽ thực thi ngay khi nó được định nghĩa.

Bình thường

function myFunction() { 
    // ...
}
myFunction();

Để biến nó thành IIFE, convert nó qua thành một expression

(function myFunction(/* tham số*/){
    // ...
}( /* tham số*/ ));

// viêt như vầy cũng được nha
(function myFunction(/* tham số*/){
    // ...
})( /* tham số*/ );

// hoặc bỏ luôn tên
(function(/* tham số*/){
    // ...
})( /* tham số*/ );

// hoặc dùng luôn arrow function cho máu
((/* tham số*/) => {
    // ...
})( /* tham số*/ );

Giờ thì dùng IIFE với component

render() {
    return(
        <div>
            {
              (() => {
                const handler = view 
                    ? this.handleEdit 
                    : this.handleSave;
                const label = view ? 'Edit' : 'Save';
              
                return (
                  <button onClick={handler}>
                    {label}
                  </button>
                );
              })()
            }  
        </div>
    )
}

Subcomponents

Nếu thấy dùng IFEE có vẻ hơi khó chịu, chúng ta đang làm React, tất cả hãy đưa về component, tách phần logic của component và phần render cái view ra luôn là đều được khuyến cáo, declarative vs. imperative programing

Vậy nên chuyển các điều kiện này sang một sub component để render dựa trên props luôn là ý hay.

render(
    const view = this.state.mode === 'view';

    return(
        <div>
            {
              view
                ? <EditComponent handleEdit={this.handleEdit}  />
                : (
                  <SaveComponent 
                   handleChange={this.handleChange}
                   handleSave={this.handleSave}
                   text={this.state.inputText}
                 />
                )
            } 
        </div>
    )
)

Hoặc trong React-Router-4 mỗi route là một If component với cách thức vận hành như sao

<If
    condition={ view }
    then={ editComponent }
    else={ editComponent }
/>

// Component Route trong React-Router
<Route path='/' component={Home} />

Higher-Order Component (HOC)

Sử dụng HOC để truyền xuống một prop dựa trên kiểm tra logic

function higherOrderComponent(Component) {
  return function EnhancedComponent(props) {
    if (condition) {
      return <AnotherComponent { ...props } />;
    }

    return <AnotherComponent { ...props } />;
  };
}

Một ngày nào đó bạn ko muốn dùng create-react-app để khởi tạo project nữa, thì đây chính là bài hướng dẫn bạn cần đọc: setup một project từ a tới z mà không dùng create-react-app

Tạo thư mục mới nào

mkdir react-bolt

npm init -y

Chúng ta tạo thêm một số thư mục cần thiết khác

react-bolt
    |--config
    |--src
    |--tests

npm i --save-dev webpack webpack-cli webpack-dev-server webpack-merge html-webpack-plugin clean-webpack-plugin img-loader url-loader file-loader

paths.js

import path from 'path';

module.exports = {
    root: path.resolve(__dirname, '../', '../'),
    outputPath: path.resolve(__dirname, '../', '../', 'build'),
    entryPath: path.resolve(__dirname, '../', '../', 'src/index.js'),
    templatePath: path.resolve(__dirname, '../', '../', 'src/index.html'),
    imagesFolder: 'images',
    fontsFolder: 'fonts',
    cssFolder: 'css',
    jsFolder: 'js'
};

rules.js

module.exports = [
    {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
            loader: 'babel-loader'
        }
    },
    {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        exclude: /node_modules/,
        loader: 'file-loader'
    },
    {
        test: /\.(woff|woff2)$/,
        exclude: /node_modules/,
        loader: 'url-loader?prefix=font/&limit=5000'
    },
    {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        exclude: /node_modules/,
        loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
    },
    {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: ['url-loader?limit=10000', 'img-loader']
    }
];

webpack.common.babel.js

import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';

import paths from './paths';
import rules from './rules';

module.exports = {
    entry: paths.entryPath,
    module: {
        rules
    },
    resolve: {
        modules: ['src', 'node_modules'],
        extensions: ['*', '.js', '.scss', '.css']
    },
    plugins: [
        new webpack.ProgressPlugin(),
        new HtmlWebpackPlugin({
            template: paths.templatePath,
            minify: {
                collapseInlineTagWhitespace: true,
                collapseWhitespace: true,
                preserveLineBreaks: true,
                minifyURLs: true,
                removeComments: true,
                removeAttributeQuotes: true
            }
        })
    ]
};

webpack.dev.babel.js

import webpack from 'webpack';

import paths from './paths';
import rules from './rules';

module.exports = {
    mode: 'development',
    output: {
        filename: '[name].js',
        path: paths.outputPath,
        chunkFilename: '[name].js'
    },
    module: {
        rules
    },
    performance: {
        hints: 'warning',
        maxAssetSize: 450000,
        maxEntrypointSize: 8500000,
        assetFilter: assetFilename => {
            return (
                assetFilename.endsWith('.css') || assetFilename.endsWith('.js')
            );
        }
    },
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    },
    devServer: {
        contentBase: paths.outputPath,
        compress: true,
        hot: true,
        historyApiFallback: true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
};

webpack.prod.babel.js

import CleanWebpackPlugin from 'clean-webpack-plugin';

import paths from './paths';
import rules from './rules';

module.exports = {
    mode: 'production',
    output: {
        filename: `${paths.jsFolder}/[name].[hash].js`,
        path: paths.outputPath,
        chunkFilename: '[name].[chunkhash].js'
    },
    module: {
        rules
    },
    plugins: [
        new CleanWebpackPlugin([paths.outputPath.split('/').pop()], {
            root: paths.root
        })
    ],
    devtool: 'source-map'
};

Bên trong webpack.common.babel.js chúng ta sẽ setup entry và output và các plugin. Các thiết đặt để chạy môi trường dev sẽ nằm trong webpack.dev.babel.js và môi trường production sẽ nằm trong webpack.prod.babel.js

Tham khảo việc làm React hấp dẫn cho SV

Sau cùng, bên trong thư mục gốc, tạo thêm file webpack.config.js nó sẽ merge 3 file config common, dev, prod lại

require('@babel/register');
const webpackMerge = require('webpack-merge');

const common = require('./config/webpack/webpack.common.babel');

const envs = {
    development: 'dev',
    production: 'prod'
};

/* eslint-disable global-require,import/no-dynamic-require */
const env = envs[process.env.NODE_ENV || 'development'];
const envConfig = require(`./config/webpack/webpack.${env}.babel`);
module.exports = webpackMerge(common, envConfig);

Babel

Cái các plugin cần thiết cho babel

npm install --save-dev @babel/core @babe/cli @babel/node @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread @babel/plugin-syntax-dynamic-import @babel/plugin-syntax-import-meta @babel/plugin-transform-async-to-generator @babel/plugin-transform-runtime @babel/preset-env @babel/preset-react @babel/register @babel/runtime babel-eslint babel-jest babel-loader babel-core@7.0.0-bridge.0

Tạo file .babelrc bên trong thư mục gốc, thiết đặt babel khi chạy

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "useBuiltIns": "entry"
            }
        ],
        "@babel/preset-react"
    ],
    "plugins": [
        "@babel/plugin-proposal-object-rest-spread",
        "@babel/plugin-transform-runtime",
        "@babel/plugin-transform-async-to-generator",
        "@babel/plugin-proposal-class-properties"
    ]
}

Eslint

Cài đặt package

npm install --save-dev eslint eslint-config-airbnb eslint-config-prettier eslint-loader eslint-plugin-babel eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react Bên trong thư mục gốc, tạo file .eslintrc để cấu hình cho eslint

{
    "parser": "babel-eslint",
    "extends": ["airbnb", "prettier", "prettier/react"],
    "plugins": ["prettier"],
    "parserOptions": {
        "ecmaVersion": 6,
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "env": {
        "browser": true,
        "node": true,
        "mocha": true,
        "es6": true,
        "jest": true
    },
    "rules": {
        "indent": ["error", 4],
        "space-before-function-paren": "off",
        "react/prefer-stateless-function": "warn",
        "react/jsx-one-expression-per-line": "off",
        "import/no-extraneous-dependencies": [
            "error",
            { "devDependencies": true }
        ],
        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
        "linebreak-style": "off",
        "global-require": "off",
        "semi": "warn",
        "arrow-body-style": "off",
        "no-multiple-empty-lines": ["warn", { "max": 1 }],
        "no-unused-expressions": [
            "error",
            {
                "allowTaggedTemplates": true
            }
        ],
        "no-underscore-dangle": [
            2,
            { "allow": ["__REDUX_DEVTOOLS_EXTENSION__"] }
        ]
    }
}

Prettier

Cài đặt package

npm install --save-dev prettier

Tạo file .prettierrc với nội dung

{
    "printWidth": 80,
    "tabWidth": 4,
    "semi": true,
    "singleQuote": true,
    "bracketSpacing": true
}

React

Cuối cùng chúng ta chỉ còn cài React nữa là xong

npm install --save react react-dom cross-env

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>React Bolt</title>
    </head>

    <body>
        <div id="root"></div>
    </body>
</html>

File index.js trong thư mục src

import React from 'react';
import ReactDOM from 'react-dom';

import App from './components/App';

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

Mấy cái router, redux thì bạn cứ xem tài liệu của tụi nó nhé.

Jest

Bạn có thể dùng cái khác để test, nhưng Jest thì phổ biến nhất rồi

npm install --save-dev jest jest-dom react-testing-library

"jest": {
    "setupFiles": [
        "<rootDir>/config/tests/jest.config"
    ],
    "transform": {
        "^.+\\.js$": "babel-jest"
    }
 },
"scripts": {
    "start": "cross-env NODE_ENV=development webpack-dev-server --open",
    "build": "cross-env NODE_ENV=production webpack",
    "lint": "eslint ./src/**/**.js",
    "lint:fix": "eslint ./src/**/**.js --fix",
    "test": "jest",
    "test:watch": "npm run test --watch",
    "test:cover": "npm run test --coverage"
}

config/tests/jest.config.js

module.exports = {
    automock: false,
    browser: false,
    bail: false,
    collectCoverageFrom: [
        'src/**/*.{js,jsx}',
        '!**/node_modules/**',
        '!**/vendor/**'
    ],
    coverageDirectory: '<rootDir>/coverage',
    globals: {
        __DEV__: true
    },
    moduleFileExtensions: ['js', 'json', 'jsx', 'node'],
    transform: {
        '^.+\\.js?$': 'babel-jest'
    },
    verbose: true,
    setupTestFrameworkScriptFile: './rtl.setup.js'
};

config/tests/rtl.setup.js

// See https://github.com/kentcdodds/react-testing-library#global-config
import 'jest-dom/extend-expect';
import 'react-testing-library/cleanup-after-each';

TopDev via Vuilaptrinh

Nguyên tắc (principle) được áp dụng khi cần đưa ra một quyết định kỹ thuật trước vô vàng các lựa chọn. Nếu bạn đã biết được mọi thứ vận hành như thế nào, thì đã đến lúc bạn tiến một bước xa hơn, trả lời cho câu hỏi tại sao

Thời điểm hiện có khoảng 1 triệu người đang sử dụng add-on Vue.js devtools của Chrome, đây là con số phản ánh có bao nhiêu lập trình viên đang thực sự sử dụng Vue, một con số không hề nhỏ. Còn trên Github, Vue đã vượt mặt React để trở thành bộ công cụ phổ biến nhất của Frontend, +31.4k lượt thích so với +22.9k của React, riêng bộ Vue Element Admin cũng có tới +22.7k lượt thích.

Nhiều thương hiệu và tên tuổi lớn tin tưởng sử dụng Vue, trong đó có Lois Vuitton (Vue + Nuxt), một phần newsfeed của Facebook, Netflix, Adobe, Grammarly, GitLab, Behance Danh sách 13 công ty sử dụng Vue.js

Biết người, biết ta, trăm trận trăm thắng

Ngày đầu ra đời, Vue là một dự án ngoài công ty, làm buổi tối của tác giả, không hề cần cân nhắc lựa chọn nào mới đúng với yêu cầu thực tế, tất cả được dựa trên những gì tôi muốn, các nhân tôi thích như vậy (tôi ở đây là Evan You). Khi bắt đầu được sự đón nhận từ cộng đồng, càng nhiều người sử dụng, bắt đầu có những nhu cầu khác nhau đến từ những đối tượng người sử dụng khác nhau. Với người thiết kế ra framework như tôi và đội ngũ, trách nhiệm đáp ứng nhu cầu này của người sử dụng là điều rất quan trọng, không như những dự án mà phía sau là các tập đoàn công ty lớn, đầu tiên họ sẽ tìm và giải quyết các vấn đề của công ty trước, sau đó đưa một phần source code ra bên ngoài cho cộng đồng sử dụng (open source), với Vue, mục tiêu cao nhất là hiểu được ai là người dùng Vue, họ dùng nó để làm gì, trong trường hợp nào.

Chúng tôi liệt kê ra những đối tượng người sử dụng Vue bao gồm:

• Người mới bắt đầu, biết căn bản HTML/CSS
• Dân chuyên nghiệp chuyển qua từ jQuery
• Những người đã từng sử dụng một framework khác như React, Angular và muốn chuyển sang dùng Vue, để xem nó là gì, có ngon lành không
• Lập trình viên backend, có chuyên môn ở những ngôn ngữ khác, muốn tìm một framework frontend gọn nhẹ, có thể dễ dàng tiếp cận
• Những người chịu trách nhiệm kỹ thuật ở một công ty (TA, CTO, Lead), tìm kiếm một giải pháp nền tảng frontend cho công ty

Các dự án được cân nhắc khi sử dụng Vue gồm có

• Đưa một vài tương tác vào trong một ứng dụng đã lâu đời nào đó, nếu viết lại từ đầu là điều không thể
• Dự án có vòng đời ngắn, không cần cân nhắc đến vấn đề bảo trì nâng cấp sau này, coi như viết một lần, để đó xài luôn, muốn đưa nó ra thị trường càng sớm càng tốt (landing page)
• Dự án tương đối vừa phải, không quá lớn, không quá nhỏ, độ phức tạp có thể đoán trước được, có thể đâu đó trong dự án sẽ có chút hơi rối rắm, nhưng không ảnh hưởng và bạn có thể chấp nhận nó.
• Dự án lớn, bạn sẽ làm việc trên source code cả năm, với nhiều người cùng làm chung, nhiều người ra vào nhóm.

Bài toán với Vue là làm sao đáp ứng được tất cả những nhu cầu này

Khi thiết kế một framework lớn, đáp ứng được nhiều đối tượng sử dụng khác nhau, nhiều mục đích khác nhau, đương nhiên chúng tôi chấp nhận đánh đổi

Đây là những thứ chúng tôi có thể cho qua, như một phần phải đánh đổi để thỏa mãn được quá nhiều yêu cầu

• API được tối ưu để dễ sử dụng nhất có thể dẫn đến các vấn đề khi bảo trì và mở rộng
• Quá nhiều công cụ được dựng sẵn, đôi khi như một hàng rào giới hạn các tình huống sử dụng
• Càng nhiều yêu cầu bổ sung các tính năng còn thiếu, vô số các tính năng lại không được đụng đến. Những người không có nhu cầu cho các tính năng đó lại chịu chung cục bundle như mọi người khác.

Thử thách

Khả năng tiếp cận và mở rộng

Đơn giản chưa được đánh giá đúng. Không thể làm cho mọi thứ thực sự đơn giản mà không phải hy sinh bất cứ điều gì. Đơn giản sẽ giúp nhiều người dễ tiếp cận Vue hơn, khi bạn trong một tổ chức, bạn có muốn nguồn lực giới hạn về con người, không phải công ty nào cũng có thể bỏ ra nhiều tiền để thuê một đội ngũ kỹ thuật cấp cao, trình độ javascript thượng thừa, không có chi phí đào tạo và hướng dẫn người mới. Chúng tôi không muốn bỏ qua tính đơn giản đang có trong Vue, cũng có thời điểm chúng tôi cũng muốn đưa những tính năng cao cấp, phức tạp, khả năng mở rộng cho các dự án lớn. Theo thời gian nhiều API chúng tôi cung cấp cho thấy những điểm khiếm khuyết, nhưng lại không muốn bỏ đi tính đơn giản.

Làm sao chúng tôi thỏa mãn được cả 2: vừa dễ dùng, vừa tân tiến? Một trong những ví dụ là việc hỗ trợ cả CDN build và Vue CLI

Bạn có thể sử dụng Vue như cách bạn dùng jQuery, dùng trực tiếp từ CDN, không cần cài đặt hay cấu hình. Nếu muốn, React bạn cũng thế làm được nhưng sẽ không thực sự đơn giản như với Vue, bạn vẫn thêm một số thư viện như babel để viết JSX. Nếu bạn cần can thiệp phức tạp hơn, sử dụng Vue CLI

Câu hỏi tiếp theo: Options API vs. Composition API

Khi bắt đầu, chúng tôi nghe rất nhiều phàn nàn, tại sao lại giới thiệu thêm một cách khác để làm cùng một việc? Chúng tôi giới thiệu thêm composition API trong Vue 3 là có lý do của nó.

Vấn đề của Option API

• Rất trực quan, dễ tiếp cận
• Khi bắt đầu có những component thực sự lớn, mọi thứ trở nên khó kiểm soát. Trong lúc viết các ứng dụng lớn, component lớn, bạn buộc phải chia các tính năng của component ra ở nhiều chỗ khác nhau, một component có thể có rất rất nhiều logic bên trong

Với Composition API

• Không cần phải viết lại toàn bộ ứng dụng, bạn có thể tiếp tục sử dụng bộ codebase đang chạy. Nó có thể được sử dụng cùng với option API
• Cung cấp khả năng linh hoạt trong việc quản lý code và tái sử dụng logic, kết hợp các API với nhau
• Hỗ trợ tốt với TypeScript

Typescript vs Javascript

Tại sao TypeScript?

TypeScript có thật sự cần thiết không? Bạn có cần học TypeScript không? Câu trả lời là bạn không cần học TypeScript để có thể viết Vue. Bản thân Vue 3 cũng được viết trên JavaScript. Chúng tôi có hỗ trợ bộ type để thiết đặt làm việc chung với TypeScript

Lợi ích mang lại

• Các IDE hỗ trợ xuất sắc trọng việc tự động nhắc lệnh và cung cấp thông tin về type. Một function cần bạn truyền vào những gì, nó sẽ trả về những gì, tất cả điều minh bạch
• Tự tin khi cần refactor code cũ trong một dự án lớn. Nếu như bạn biết dự án đó sẽ tiếp tục kéo dài quá trình phát triển trong vòng 2, 3 năm tới, bạn sẽ tự tin hơn khi nhìn lại code của chính mình viết cách đây một năm về trước. Bạn sẽ biết được mình đã làm cái khỉ khô gì trước đây vậy.

Đánh đổi

• Tốn thời gian học. Để thực sự trở thành developer thành thạo TypeScript hay bất cứ ngôn ngữ nào khác, bạn cần thời gian học nó một cách bài bản. Ví dụ khi bạn sử dụng các API của Vue, bạn sẽ thấy rất tường minh dễ hiểu, nhưng khi nhìn vào code bên trong của các API này, bạn sẽ không dễ gì hiểu được những gì đang xảy ra.
• Thời gian chạy dự án lâu. Khi viết TypeScript, bạn bắt buộc phải nghĩ bạn sẽ dùng kiểu gì ngay từ đầu, bạn sẽ tốn thời gian để nghĩ những gì mình viết hơi lâu một chút

Bạn đừng đi vào kết luận dùng TypeScript là đúng hay sai, nó là kiểu lựa chọn sao cho phù hợp với dự án đang thực hiện

Template vs JSX

Tại sao chúng tôi lại cung cấp cả 2?

Có nhiều người sẽ sử bảo thích kiểu template, và cũng có người sẽ bảo JSX mới là đỉnh cao.

Lý do chúng tôi cung cấp cả 2 lựa chọn là vì muốn đáp ứng cho nhiều đối tượng người sử dụng khác nhau, những người quen với HTML, CSS sẽ thích template, thay vì phải lập trình lại suy nghĩ theo hướng javascript như JSX. Với template chúng tôi có thể tối ưu hiệu năng ở mức tốt nhất. Trong khi JSX lại cho phép linh động hơn trong lúc viết.

Chúng tôi muốn là một framework với tất cả các lựa chọn khác nhiều điều có, để tiếp cận được những người sử dụng từ nhiều background khác nhau.

Sức mạnh và Kích thước

Vấn đề kinh điển của Vue 2, khi bổ sung một tính năng mới, kích thước bundle tăng lên cho tất cả người sử dụng, dù bạn có dùng nó hay không. Ví dụ nếu chúng tôi muốn bổ sung <Fragment/> cho Vue, nghĩa là kích thước bundle sẽ tăng lên. Không ai thích trả thêm tiền cho thứ mình không dùng đến

Với Vue 3

• Phần lớn các Global APIs và helper được cung cấp dưới dạng ES module export (tree-shakable). Thí dụ như keep-alive, transition, v-model, suspense nếu không sử dụng nó sẽ không được import
• Bộ compiler generate cũng được tích hợp tree-shakable cho template của bạn

Bài viết gốc được đăng tải tại Vuilaptrinh

Tác giả: Đạt Cao Mạnh

Dạo quanh các trang/video nói về định hướng công việc của ngành IT cho các bạn mới ra trường ở Việt Nam. Mình thấy hầu hết con đường mà mọi người nói tới là

1. Đi làm ở một công ty làm product hay outsource. Tích lũy đủ kinh nghiệm để lên các vị trí cao hơn.
2. Tiếp tục học lên cao ở nước ngoài để kiếm các cơ hội làm việc quốc tế.
3. Startup.

Mỗi hướng đi đều có cái thuận lợi và khó khăn nhất định, nhưng mình chưa thấy ai nói về việc làm các project mã nguồn mở như là một con đường để phát triển cả.

Mình hiện tại là commiter của Apache Solr và đã tham gia vào đóng góp cho project này được 5 năm. Hy vọng những thông tin dưới đây sẽ giúp ích được phần nào cho các bạn còn đang băn khoăn phải chọn hướng đi nào.

Cơ hội công việc khi tham gia open-source

Năm 2014 sau khi sử dụng Apache Solr một thời gian mình có mày mò vào page này https://lucene.apache.org/whoweare.html. Đó là danh sách những người đã và đang tham gia vào phát triển Solr (được gọi là các commiter của project đó). Tra cứu tên của họ thì thấy rằng hầu hết mọi người đều đang làm việc ở một số công ty nhất định. Như là Lucidworks, Elastic, Cloudera, Apple. Tương tự với Apache Spark thì hầu hết đều đang làm ở Databricks.

Mình nhận ra rằng các project mã nguồn mở đều có một hoặc một vài công ty đứng sau nó. Giúp định hướng, tuyển dụng lập trình viên để tham gia phát triển các project đó.

Điều đáng lưu ý ở đây là bất cứ ai cũng có thể trở thành commiter mà không cần phải làm việc cho bất kì công ty nào. Miễn là bạn chứng tỏ được khả năng, thái độ và quyết tâm của mình cho project đó. Cần lưu ý commiter thì rất ít so với số người sử dụng. Ví dụ với Apache Spark có tất cả 75 commiters trong 5 năm phát triển của mình nhưng số người, cty sử dụng Spark thì có thể là vài nghìn đến vài chục nghìn. Điều đó khiến commiters sở hữu một giấy thông hành vô hình giúp gõ cửa vào tất cả các cty lớn. Đơn giản vì họ là những người hiểu rõ công nghệ ấy nhất, có khả năng mở source-code ra để tối ưu hay sửa lỗi khi có vấn đề nảy sinh.

Mình đã được nhận vào làm việc ở Lucidworks khi mới đang còn là contributor của Apache Solr (contributor là người có đóng góp cho project, nhưng chưa đủ để trở thành committer).

Có một chiến lược phổ biến là nộp CV cho càng nhiều cty càng tốt giúp làm tăng cơ hội kiếm việc. Nhưng nhược điểm của chiến lược này là khá tốn thời gian và bạn không biết team, project mình tham gia là gì, công việc thực tế có như những gì mình kỳ vọng hay không. Khi đóng góp cho một open-source project và sau đó apply vào cty đứng sau project đó, bạn gần như biết chắc chắn mình sẽ làm gì làm với ai. Điều thú vị ở đây là thay vì nhà tuyển dụng chọn bạn, bạn được chọn nhà tuyển dụng và project mà bạn ưu thích.

Những lợi ích khác khi tham gia làm open-source

Được đào tạo miễn phí

Mỗi khi tạo một PR (pull request) cho một project. Sẽ đều có một người của project đó review PR của bạn trước khi nó được merge. Họ sẽ nói lên những vấn đề trong PR của bạn đôi khi là cách họ sẽ giải quyết vấn đề này. Đa số những commiter đều là những lập trình viên tại các công ty lớn nên bạn sẽ được học hỏi rất nhiều từ họ.

Tất cả những đóng góp của đều là mở

Không giống như làm việc tại các dự án đóng nơi mà tất cả những đóng góp rất khó có thể chia sẻ ra bên ngoài (một số công ty còn bắt phải ký cam kết không chia sẻ). Ở những dự án mã nguồn mở, tất cả đều là mở, từ những trao đổi, tài liệu thiết kế, đến các commits.

Do đó sẽ rất dễ dàng cho nhà tuyển dụng có thể xem và kiểm chứng những gì bạn đã làm. Đây sẽ là những điểm cộng lớn trong CV của bạn.

Cơ hội làm việc remote

Các commiters của một project đa phần sẽ nằm rải rác trên khắp địa cầu. Nên hầu hết các cty đứng đằng sau các open-source project đều có chế độ làm việc từ xa. Đơn giản cty không thể gom tất cả các commiters nằm rải rác về một nơi được.

Sự tự do về nơi làm việc mang đến rất nhiều lợi ích như

• được ở gần gia đình
• không chịu cảnh tắc đường mỗi ngày
• làm việc từ một nơi bạn thích như từ một quán cafe ở Đà Lạt chẳng hạn

Cơ hội được đi nước ngoài

Mình đã đi Mỹ chắc cũng phải khoảng 6,7 lần gì đó, Canada 1 lần để tham gia các cuộc hội thảo công nghệ và gặp mặt mọi người trong công ty.

Công ty mình cũng đã bảo lãnh để cả gia đình mình sang UK, nhưng sau một năm ở đó thì vì nhiều lý do mình lại quyết định về nước.

Trở thành commiter không khó

Mình sẽ viết chi tiết hơn về cách để trở thành commiter. Nhưng phải nhấn mạnh là điều đó không hề khó miễn là bạn phải có tính kỷ luật và tinh thần cầu thị.

Bài viết gốc được đăng tải tại Medium

Trong bài viết này bạn sẽ biết được Frontend là gì? thế nào là một Frontend developer, những kỹ năng và nền tảng công nghệ mà bạn có thể học hỏi được từ việc trở thành một Frontend, cũng như tương lai nào cho bạn khi bạn trở thành một Frontend.

Frontend là gì?

Trước hết hãy tìm câu trả lời Frontend là gì?

Frontend là phần của trang web mà người dùng trực tiếp tương tác. Nó bao gồm thiết kế, thanh điều hướng, text, hình ảnh, video, và cấu trúc tổng thể của trang. Mục tiêu chính của frontend là đảm bảo tính tương thích và hiệu suất của trang web.

Khi vào một website hay một application, những gì bạn thấy, các nút bấm, những hành động click hay scroll trên trang đó là kết quả của lập trình Front End. Bạn có thể coi Front-End là client-side và Back-End là server-side.

Sự khác biệt giữa Front-End và Back-End là Front-End đề cập đến giao diện của trang web, trong khi Back-end đề cập đến cách trang web hoạt động.

Các ngôn ngữ chính dùng trong phát triển frontend bao gồm HTML, CSS và JavaScript. HTML định dạng cấu trúc nội dung, CSS điều chỉnh kiểu dáng và bố cục, còn JavaScript cung cấp tính năng động và tương tác cho trang web.

Frontend Developer là ai, làm công việc gì?

Trách nhiệm chính của Lập trình viên Front-End là tạo ra giao diện người dùng.

Lập trình viên Frontend là người chịu trách nhiệm phát triển giao diện website hoặc ứng dụng dựa vào thiết kế UI/UX, giúp website hoạt động mượt mà, tải nhanh và không gặp sự cố khi người dùng tương tác. Những lập trình viên còn phải đảm bảo rằng website có tính responsive tất cả các thiết bị, từ máy tính để bàn đến điện thoại di động, mà không có phần nào hoạt động bất thường tùy thuộc vào kích thước màn hình.

Nguồn ảnh: The Human Capital Hub

Những lập trình viên nhiều kinh nghiệm hơn thì nghĩ là: có thể lập trình Js như jQuery để làm animation, thực hiện các thao tác đồ hoạ của trên nền canvas của HTML5, hoặc là video.

Ngày nay với sự phát triển vượt bậc về nền tảng công nghệ như Nodejs, lý luận (Virtual DOM, PWA, AMP, Instance Article), sự hỗ trợ của phần cứng (đồ hoạ 3D), và các nền tảng phần mềm (Chrome, Safari), hệ điều hành (iOS, Android), kèm theo các kỹ thuật mới về Testing… dẫn đến Frontend dev không chỉ đơn thuần là làm các công việc nhàm chán, đơn giản mà còn hướng đến nhiều lĩnh vực khác nhau với đòi hỏi về kinh nghiệm, sự hiểu biết chuyên sâu, đa dạng từ hầu hết các lĩnh vực trong ngành phần mềm.

Front-end tuyển dụng lương cao trên TopDev

Kỹ năng cần có của một lập trình viên Frontend

Lập trình viên Frontend cần sở hữu một loạt các kỹ năng để phát triển và duy trì các giao diện người dùng hiệu quả và hấp dẫn. Dưới đây là những kỹ năng quan trọng mà một lập trình viên Frontend nên có:

1. Ngôn Ngữ Lập Trình Cơ Bản

• HTML: Được sử dụng để cấu trúc nội dung trên trang web.
• CSS: Dùng để định dạng và thiết kế giao diện của trang web.
• JavaScript: Cung cấp tính tương tác cho các phần tử trên trang web.

2. Framework và Thư Viện JavaScript và CSS

• Bootstrap: Một framework CSS phổ biến giúp tạo giao diện người dùng responsive.
• W3.CSS: Một framework CSS đơn giản và dễ sử dụng.
• jQuery: Thư viện JavaScript giúp đơn giản hóa việc thao tác với DOM.
• Angular: Một framework JavaScript mạnh mẽ để xây dựng các ứng dụng web động.
• React: Một thư viện JavaScript của Facebook dùng để xây dựng giao diện người dùng.

3. Xử Lý API

• REST: Giao thức API phổ biến dùng để tương tác với các dịch vụ web.
• GraphQL: Một ngôn ngữ truy vấn API giúp lấy dữ liệu hiệu quả hơn.

4. Định Dạng Dữ Liệu

• JSON: Định dạng dữ liệu nhẹ thường được sử dụng để truyền tải dữ liệu giữa client và server.
• XML: Một định dạng dữ liệu khác, thường dùng trong các ứng dụng web truyền thống.

5. Công Cụ Phát Triển

• Git: Hệ thống quản lý phiên bản phân tán, quan trọng để theo dõi và quản lý mã nguồn.

Những kỹ năng này giúp lập trình viên Frontend phát triển các giao diện người dùng hiệu quả, đáp ứng nhu cầu của người dùng và đảm bảo hiệu suất tối ưu cho trang web.

Những nền tảng công nghệ trong lập trình Frontend

Phần tiếp theo của bài viết, chúng ta sẽ lướt qua các nền tảng công nghệ mà khi bạn muốn trở thành frontend developer bạn cần phải biết cũng như có hiểu biết đúng đắn, đầy đủ và thật sâu về nó.

Những nền tảng này không chỉ ảnh hưởng đã từ rất lâu trong quá khứ, mà còn hiện tại cho đến tương lai về sau.

Hệ sinh thái CSS Framework

Ngày nay không khó để điểm mặt chỉ tên các nền tảng về css framework phổ biến như: Bootstrap, Foundation, SemanticUI và hàng loạt các tên tuổi khác có các thế mạnh, triết lý riêng.

Các framework cung cấp hàng loạt các tính năng, đáp ứng gần như là đầy đủ các yêu cầu cơ bản cần có đối với một sản phẩm được thiết kế theo hướng hiện đại: carousel, form, modal, drag/drop, datetime picker… nhằm giúp lập trình viên phát triển nhanh hơn ứng dụng của mình.

Hệ sinh thái jQuery

Sau nhiều năm đứng đầu về sự đóng góp của mình trong lĩnh vực Frontend, JQuery đã tạo cho mình một hệ sinh thái, một vị trí thống lĩnh mà hiếm có thư viện nào có thể sánh kịp. Các plugin của jQuery đã cung cấp hầu hết mọi thứ mà các lập trình viên cần đến, với lại rất dễ dàng để tích hợp vào source code của họ. API jQuery được thiết kế thông minh, dễ sử dụng, hầu hết là tương thích với các trình duyệt phổ biến đã làm giảm đi chi phí phát triển, kiểm lỗi và hạn chế được rất nhiều rủi ro.

Ngay cả khi các nền tảng về frontend lớn hiện tại như Angular, React, Vuejs không còn phụ thuộc vào nó nữa thì tư tưởng và tầm ảnh hưởng của nó sẽ vẫn còn trong rất nhiều năm tới, nếu không muốn nói là khó có thể thay thế được trong tương lai gần.

Và cũng tránh nhầm lẫn trong việc jQuery so sánh với các nền tảng như Angular, Reactjs… thì trong giới hạn của bài viết, bạn đọc có thể hình dung rằng đó là 2 nền tảng tiếp cận theo hai hướng hoàn toàn khác nhau, có thể chúng không phụ thuộc lẫn nhau nhưng không có nghĩa là chúng phủ định lẫn nhau.

Hệ sinh thái Nodejs

Nodejs có một hệ sinh thái đa dạng và rộng lớn, phát triển với tốc độ khủng khiếp chưa từng có, cùng với sự tham gia hỗ trợ của các ông lớn trong ngành bao gồm Microsoft, Google, Facebook v.v…

Với Nodejs bạn có thể tìm thấy mọi thứ mình cần, bao gồm các công cụ để phát triển Frontend, các phương pháp phát triển sản phẩm mới.

Hệ sinh thái Webpack

Webpack là một phần trong hệ sinh thái của Nodejs, nhưng vì tầm vóc và tương lai của nó nên chúng ta cũng nên tách nó ra thành một phần tương xứng. Webpack cung cấp cho chúng ta công cụ quan trọng để hiện thực hoá nhiều thao tác vốn phức tạp nay trở nên dễ dàng.

Các tiện ích mà Webpack cung cấp gần như là bao phủ tất cả, bao gồm giải quyết các vấn đề về tổ chức source code, giải quyết sự phụ thuộc giữa các thư viện, quản lý các resource như image, font, đi kèm với các công cụ để tối ưu source code như tách source nhỏ ra để tăng tốc tải trang…

Tương lai của một Frontend Dev

Ngày nay, với phong trào khởi nghiệp, các sản phẩm mới được phát triển không chỉ nhiều về số lượng, mà đa dạng về lĩch vực, các sản phẩm cũ cũng được nâng cấp lên về chất lượng, performance bên trong cũng như UI/UX bên ngoài tạo ra một nguồn cầu rất lớn từ thị trường.

Các ứng dụng giờ không chỉ được xây dựng cho desktop, mà còn phải chạy tốt trên nền tảng di động tạo ra gần như gấp đôi khối lượng công việc để làm. Ngoài ra nền tảng di động đòi hỏi các yêu cầu khắt khe hơn về các tiêu chí kỹ thuật như về performance, network, optimize việc sử dụng tài nguyên của thiết bị sao cho tối ưu nhất.

Một thị trường đa dạng, rộng lớn chắc chắn sẽ mang lại nhiều cơ hội nghề nghiệp hấp dẫn (số lượng), với mức lương cạnh tranh (chất lượng), điều đó làm nên một tương lai tươi sáng cho nghề nghiệp của chúng ta.

Kết luận

Việc trở thành một senior frontend cần thời gian, sự nghiêm túc và tập trung với một phương pháp học đúng đắn. Bạn cũng cần phải tìm thấy môi trường làm việc tốt để có thể ứng dụng và kiểm chứng các kiến thức của mình.

Vậy nên, hãy cứ khát khao, hãy cứ đam mê, thành công sẽ tìm đến bạn.

TopDev via PhuTran

Xem thêm các công việc tuyển dụng IT chất lượng tại đây!