Station D Logo

Hướng dẫn Webpack cơ bản

Công Nghệ
Hướng dẫn Webpack cơ bản
Bài viết được sự cho phép của tác giả Kien Dang Chung Cùng với sự phát triển của các Framework Javascript và CSS, các website ngày càng sử dụng nhiều hơn mã Javascript, CSS giúp nâng cao trải nghiệm người dùng. Với các Framework Javascript mạnh mẽ như Vue.js, React, Angular… việc xây dựng website có tính tương tác cao, tải nhanh chóng, sử dụng mô hình ứng dụng đơn trang trở lên đơn giản. Cũng chính vì lẽ đó, số lượng các thư viện, các module sử dụng trong ứng dụng trở lên không kiểm soát nổi khi hệ thống website phình ra. Khi đó, mã nguồn cần được thiết kế sao cho quản lý được tốt là một vấn đề. Có rất nhiều các hệ thống quản lý module nổi tiếng như Browserify, RequireJS… tuy nhiên Webpack làm tốt hơn cả với nhiều tính năng nổi trội. Khi tìm hiểu Laravel 5.4, có phần Laravel Mix là công cụ để tập hợp và biên dịch mã javascript và css chúng ta thấy rằng Laravel Mix dựa trên Webpack để bundle (đóng gói các thư viện khác nhau lại) các module. Hỏi nhanh đáp gọn về webpack Tìm hiểu về Webpack và Create React App Bắt đầu với Webpack Mục tiêu của Webpack Về ý tưởng Webpack là một công cụ đóng gói các module và các thư viện phụ thuộc thành các file tĩnh, mục tiêu Webpack muốn đạt được là: Chia nhỏ toàn bộ tài nguyên các thư viện và các tài nguyên phụ thuộc thành các “chunk” và chỉ tải các thành phần nhỏ này khi cần thiết. Giúp quá trình tải các tài nguyên nhanh. Mọi file tĩnh sau quá trình đóng gói sẽ ở dạng module. Cho phép tích hợp các thư viên bên...

Bài viết được sự cho phép của tác giả Kien Dang Chung

Cùng với sự phát triển của các Framework Javascript và CSS, các website ngày càng sử dụng nhiều hơn mã Javascript, CSS giúp nâng cao trải nghiệm người dùng. Với các Framework Javascript mạnh mẽ như Vue.js, React, Angular… việc xây dựng website có tính tương tác cao, tải nhanh chóng, sử dụng mô hình ứng dụng đơn trang trở lên đơn giản. Cũng chính vì lẽ đó, số lượng các thư viện, các module sử dụng trong ứng dụng trở lên không kiểm soát nổi khi hệ thống website phình ra. Khi đó, mã nguồn cần được thiết kế sao cho quản lý được tốt là một vấn đề. Có rất nhiều các hệ thống quản lý module nổi tiếng như Browserify, RequireJS… tuy nhiên Webpack làm tốt hơn cả với nhiều tính năng nổi trội. Khi tìm hiểu Laravel 5.4, có phần Laravel Mix là công cụ để tập hợp và biên dịch mã javascript và css chúng ta thấy rằng Laravel Mix dựa trên Webpack để bundle (đóng gói các thư viện khác nhau lại) các module.

Bắt đầu với Webpack

Webpack module bundlerWebpack module bundler

Mục tiêu của Webpack

Về ý tưởng Webpack là một công cụ đóng gói các module và các thư viện phụ thuộc thành các file tĩnh, mục tiêu Webpack muốn đạt được là:

  • Chia nhỏ toàn bộ tài nguyên các thư viện và các tài nguyên phụ thuộc thành các “chunk” và chỉ tải các thành phần nhỏ này khi cần thiết.
  • Giúp quá trình tải các tài nguyên nhanh.
  • Mọi file tĩnh sau quá trình đóng gói sẽ ở dạng module.
  • Cho phép tích hợp các thư viên bên thứ ba ở dạng module.
  • Cho phép cá nhân hóa mọi thành phần của công cụ đóng gói module.
  • Thích hợp cho cả những dự án cực lớn.

Cài đặt Webpack

Webpack có thể cài đặt thông qua các công cụ quản lý thư viện lập trình Javascript như npm hoặc yarn, chúng ta cần cài đặt gói webpack toàn cục để có thể dùng được với CLI (Command Line Interface).

npm install webpack -g
yarn global add webpack

Sau khi cài đặt xong chúng ta có thể kiểm tra xem webpack được cài đặt ok chưa bằng câu lệnh webpack -v:

c:xampphtdocs>yarn global add webpack
yarn global v0.23.4
warning No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
warning fsevents@1.1.1: The platform "win32" is incompatible with this module.
info "fsevents@1.1.1" is an optional dependency and failed compatibility check.
Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "webpack@2.5.0" with binaries:
      - webpack
warning No license field
Done in 5.42s.

c:xampphtdocs>webpack -v
2.5.0

Ok, như vậy chúng ta đã cài đặt xong Webpack. Tiếp theo chúng ta cùng nhau bắt đầu một ví dụ trước khi đi vào tìm hiểu các khái niệm trong Webpack.

Ví dụ đầu tiên sử dụng Webpack

Trong ví dụ đầu tiên về Webpack chúng ta sẽ tạo ra một thư mục webpack-demo bằng câu lệnh:

C:>mkdir webpack-demo && cd webpack-demo

C:webpack-demo>

Tiếp đó, thực hiện tạo ra file package.json mẫu bằng lệnh npm init –yes hoặc npm init -y.

C:webpack-demo>npm init -y
Wrote to C:webpack-demopackage.json:

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Bước tiếp theo, chúng ta thực hiện cài đặt webpack cục bộ thông qua npm và chèn một entry vào devDependencies với câu lệnh:

C:webpack-demo>npm install --save-dev webpack
[    ..............] | fetchMetadata: sill mapToRegistry uri https://registry.n
...

Mở package.json ra trong thuộc tính devDependencies chúng ta đã thấy có webpack:

  "devDependencies": {
    "webpack": "^2.5.1"
  }

Với cách cài đặt cục bộ này, webpack không thể sử dụng trong các CLI (Xem thêm cách cài đặt cục bộ và cài đặt toàn cục gói phần mềm thông qua Npm). Tiếp theo, tạo một thư mục app trong thư mục webpack_demo với một file index.js nằm trong đó. Nội dung file index.js như sau:

function component () {
  var element = document.createElement('div');

  /* lodash is required for the next line to work */
  element.innerHTML = _.join(['Hello','webpack'], ' ');

  return element;
}

document.body.appendChild(component());

Để chạy đoạn code này, chúng ta tiếp tục tạo ra file index.html nằm trong thư mục gốc dự án là thư mục webpack_demo với nội dung:

<html>
  <head>
    <title>webpack 2 demo</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="app/index.js"></script>
  </body>
</html>

Ok, khi chạy index.html chúng ta thấy dòng chữ Hello webpack, để ý rằng trong index.js đã sử dụng gói lodash với hàm join để gắn kết hai từ Hello và webpack. Do đó, trong file HTML chúng ta cần chèn mã nguồn gói lodash vào. Các file HTML và Javascript này hết sức bình thường với cách làm thông thường trước đây, tuy nhiên chúng ta thấy trong file HTML có tới hai thẻ <script> để chèn vào mã nguồn hai file Javascript, tiếp theo chúng ta sẽ sử dụng Webpack để bundle (đóng gói) chúng lại thành một file duy nhất. Để đóng gói, đầu tiên chúng ta cần cài đặt cục bộ gói lodash và tạo một entry vào dependencies trong package.json với câu lệnh npm install –save lodash

C:webpack-demo>npm install --save lodash
webpack-demo@1.0.0 C:webpack-demo
+-- lodash@4.17.4
`-- webpack@2.5.1
  `-- async@2.4.0
    `-- lodash@4.17.4  deduped

Khi đó file package.json chúng ta thấy đã có entry lodash nằm trong dependencies:

  "devDependencies": {
    "webpack": "^2.5.1"
  },
  "dependencies": {
    "lodash": "^4.17.4"
  }

Sau đó, chúng ta điều chỉnh nội dung file app/index.js:

import _ from 'lodash';

function component () {
  var element = document.createElement('div');

  /* lodash is required for the next line to work */
  element.innerHTML = _.join(['Hello','webpack'], ' ');

  return element;
}

document.body.appendChild(component());

Thêm dòng import _ from ‘lodash’; để tải lodash và sử dụng. Trong file HTML index.html thay vì hai thẻ <script> chúng ta thay bằng một thẻ và trỏ đến file bundle.js là file Webpack đóng gói từ hai nguồn index.js và gói lodash được cài đặt ở trên.

<html>
   <head>
     <title>webpack 2 demo</title>
   </head>
   <body>
     <script src="dist/bundle.js"></script>
   </body>
</html>

Tiếp theo chúng ta sẽ thực hiện lệnh webpack <source_file> <bundle_file> để đóng gói:

C:webpack-demonode_modules.bin>webpack ../../app/index.js ../../dist/bundle.js
Hash: 3d99a4d7ef6cf1bc5cc1
Version: webpack 2.5.1
Time: 929ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  544 kB       0  [emitted]  [big]  main
   [0] ../lodash/lodash.js 540 kB {0} [built]
   [1] C:/webpack-demo/app/index.js 278 bytes {0} [built]
   [2] ../webpack/buildin/global.js 509 bytes {0} [built]
   [3] ../webpack/buildin/module.js 517 bytes {0} [built]

Ở đây, chúng ta sử dụng gói webpack được cài đặt cục bộ trong dự án webpack_demo để thực hiện đóng gói tài nguyên. Mở file dist/bundle.js chúng ta thấy sẽ có mã nguồn gói lodash, mã wrapper của webpack và mã nguồn file index.js đã được chuyển dạng. Thực hiện chạy file index.html chúng ta thấy kết quả vẫn như cũ nhưng việc chèn file Javasript chỉ còn lại một file dist/bundle.js. Thử tưởng tượng nếu dự án của bạn sử dụng hàng trăm các gói phần mềm Javascript khác nhau, chưa kể các file Javascript do bạn tự phát triển, khi đó webpack sẽ đóng gói tất cả chúng vào một file duy nhất và bạn chỉ cần insert file này vào file HTML là chạy được. File bundle.js ở trên ở dạng đọc được, tuy nhiên khi triển khai lên máy chủ web, chúng ta cần “minify” chúng đi nhằm giảm dung lượng file bundle.js giúp SEO tốt hơn. Để thực hiện minify các file đầu ra chỉ cần thêm cờ -p (ngắn gọn của –optimize-minimize) trong khi thực hiện lệnh webpack.

C:webpack-demonode_modules.bin>webpack ../../app/index.js ../../dist/bundle.js -p
Hash: 3d99a4d7ef6cf1bc5cc1
Version: webpack 2.5.1
Time: 3629ms
    Asset     Size  Chunks             Chunk Names
bundle.js  72.5 kB       0  [emitted]  main
   [0] ../lodash/lodash.js 540 kB {0} [built]
   [1] C:/webpack-demo/app/index.js 278 bytes {0} [built]
   [2] ../webpack/buildin/global.js 509 bytes {0} [built]
   [3] ../webpack/buildin/module.js 517 bytes {0} [built]

OK, giờ mở file bundle.js bạn sẽ thấy code trong file này đã được minify.

Các khái niệm cơ bản trong Webpack

Ví dụ trên đây giúp bạn hiểu webpack dùng để làm gì một cách dễ dàng. File bundle.js được tạo ra thông qua việc sử dụng các câu lệnh, tuy nhiên khi việc đóng gói trở lên phức tạp với nhiều đầu vào và các thiết lập chúng ta cần định nghĩa file cấu hình cho Webpack. Chúng ta tạo ra một file webpack.config.js nằm trong thư mục gốc của dự án webpack_demo với nội dung:

var path = require('path');

module.exports = {
  entry: './app/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

Khi đó bạn chỉ cần thực hiện lệnh webpack là cho ra kết quả tương tự mà không cần đưa các tham số vào cho lệnh webpack.

Watch mode – đóng gói ngay khi thay đổi

Để ý là trong quá trình viết code, mỗi lần khi thực hiện thay đổi code các file Javascript, CSS chúng ta lại phải chạy lại lệnh webpack để thực hiện đóng gói, như vậy quả là phiền phức trong quá trình phát triển ứng dụng khi mà việc thay đổi code xảy ra thường xuyên. Watch mode sẽ giải quyết vấn đề này, khi bạn thực hiện lệnh webpack với cờ -w (ngắn gọn của –watch) thì mỗi khi code thay đổi webpack sẽ tự động đóng gói mà chúng ta không cần làm gì khác. Chú ý, bạn không được tắt màn hình console bởi watch mode sẽ chạy liên tục để kiểm tra xem mã nguồn của bạn có thay đổi không thông qua các mã băm.

C:webpack-demo>webpack -w

Webpack is watching the files.

Hash: 3d99a4d7ef6cf1bc5cc1
Version: webpack 2.5.1
Time: 890ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  544 kB       0  [emitted]  [big]  main
   [0] ./~/lodash/lodash.js 540 kB {0} [built]
   [1] ./app/index.js 278 bytes {0} [built]
   [2] (webpack)/buildin/global.js 509 bytes {0} [built]
   [3] (webpack)/buildin/module.js 517 bytes {0} [built]

Ok, tiếp theo bạn thử thay đổi file index.js thêm dòng alert(‘Webpack watch mode’); vào cuối file index.js như sau:

import _ from 'lodash';

function component () {
  var element = document.createElement('div');

  /* lodash is required for the next line to work */
  element.innerHTML = _.join(['Hello','webpack'], ' ');

  return element;
}

document.body.appendChild(component());
alert('Webpack Watch mode');

Ngay lập tức, trên màn hình console bạn sẽ thấy Webpack phản ứng ngay:

Hash: 28853a2b79cc9f32ae37
Version: webpack 2.5.1
Time: 116ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  544 kB       0  [emitted]  [big]  main
   [1] ./app/index.js 308 bytes {0} [built]
    + 3 hidden modules

Bạn mở thử file index.html thì thấy kết quả là đoạn code vừa thêm vào đã có tác dụng ngay. Chúng ta cũng có thể cấu hình watch mode trong file webpack.config.js với thuộc tính watch như sau:

var path = require('path');

module.exports = {
  entry: './app/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  <strong>watch: true</strong>
};

Tiếp theo chúng ta cùng tìm hiểu các khái niệm cơ bản khác của Webpack như Entry, Ouput, Loader, Plugin

Entry

Trong file webpack.config.js chúng ta thấy có thuộc tính entry, đây chính là điểm bắt đầu khi ứng dụng chạy và cũng chính là điểm bắt đầu để Webpack đọc và phân tích các gói thư viện liên quan, các file liên quan cho việc đóng gói.

module.exports = {
  entry: './path/to/my/entry/file.js'
};

Output

Khi webpack đóng gói tất cả các module liên quan, bạn cần thiết lập cho webpack nơi file kết quả được tạo ra sau khi đóng gói. Webpack sử dụng thuộc tính output trong đối tượng cấu hình:

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

Trong ví dụ trên, chúng ta sử dụng các thuộc tính output.filename và output.path để nói cho webpack là tên file đầu ra và đường dẫn nơi đặt file đầu ra này.

Loader

Loader cho phép bạn tiền xử lý một file khi bạn sử dụng câu lệnh require() để tải nó, các loader chuyển đổi file từ các ngôn ngữ khác nhau như TypeScript, CoffeeScript… sang Javascript, nó thậm chí cho phép bạn require() file CSS trong Javascript. Webpack xử lý các file (.css, .html, .scss, .jpg…) như những module, tuy nhiên webpack chỉ hiểu Javascript do đó nó cần các loader. Hiện nay, đã có rất nhiều các thư viện mã nguồn Javascript được viết ở chuẩn ES6 (ECMAScript 2015), tuy nhiên các trình duyệt vẫn chưa hỗ trợ cho tiêu chuẩn này, do đó khi sử dụng các đoạn mã ES6 sẽ không thể chạy được trên trình duyệt, tuy nhiên với loader babel nó sẽ giúp tiền xử lý ES6 thành ES5 và từ đó Webpack có thể tiếp tục công việc của mình. Để sử dụng các gói phần mềm loader này chúng ta cần cài đặt thông qua npm hoặc yarn:

npm install --save-dev babel-loader babel-core babel-preset-es2015

Chú ý, do babel-loader phụ thuộc gói babel-core và chúng ta cũng muốn chuyển đổi mã nguồn từ ES2015 hay ES6 về dạng ES5 để trình duyệt có thể xử lý được nên chúng ta cần cấu hình cho babel-loader sử dụng preset do đó gói babel-preset-es2015 là cần thiết. Do đó chúng ta cần cài đặt cả ba gói phần mềm trên để cấu hình cho loader.

const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'y
  },
  module: { 
    loaders: [ { 
      test: /.js$/, 
      exclude: /node_modules/, 
      loader: 'babel', 
      query: { 
        presets: ['es2015'] 
      } 
    } ], 
  }
};

module.exports = config;

Plugin

Loader chỉ được sử dụng để thực hiện các chuyển dạng cho các file cần xử lý, plugin thì khác, nó thực hiện các hành động hoặc các chức năng của người dùng trên các compilation hoặc chunk. Để sử dụng các plugin, bạn cần sử dụng require() và sau đó đưa chúng vào mảng plugins của đối tượng cấu hình.

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      {test: /.(js|jsx)$/, use: 'babel-loader'}
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

Lời kết

Webpack là một công cụ module bundler xuất sắc, đặc biệt khi bạn require cả mã HTML và CSS trong Javascript, Webpack thực hiện nó rất tốt, nó hữu dụng trong những tình huống như bạn muốn tải file CSS trong mã Javascript. Chúng tôi sẽ còn quay lại với công cụ Webpack trong các bài viết tiếp theo.

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

Có thể bạn quan tâm:

Xem thêm Việc làm Developer hấp dẫn trên Station D

Bạn có thể quan tâm

Đọc thêm

Thị trường EdTech Vietnam- Nhiều tiềm năng nhưng còn bị bỏ ngỏ tại Việt Nam
Bộ cài đặt Laravel Installer đã hỗ trợ tích hợp Jetstream
Principle thiết kế của các sản phẩm nổi tiếng
Applicant Tracking System là gì? ATS hoạt động ra sao
Lập TrìnhCông nghệ

Bài viết liên quan

Bộ cài đặt Laravel Installer đã hỗ trợ tích hợp Jetstream
Công Nghệ

Bộ cài đặt Laravel Installer đã hỗ trợ tích hợp Jetstream

Bài viết được sự cho phép của tác giả Chung Nguyễn Hôm nay, nhóm Laravel đã phát hành một phiên bản chính mới của “ laravel/installer ” bao gồm hỗ trợ khởi động nhanh các dự án Jetstream. Với phiên bản mới này khi bạn chạy laravel new project-name , bạn sẽ nhận được các tùy chọn Jetstream. Ví dụ: API Authentication trong Laravel-Vue SPA sử dụng Jwt-auth Cách sử dụng Laravel với Socket.IO laravel new foo --jet --dev Sau đó, nó sẽ hỏi bạn thích stack Jetstream nào hơn: Which Jetstream stack do you prefer? [0] Livewire [1] inertia > livewire Will your application use teams? (yes/no) [no]: ... Nếu bạn đã cài bộ Laravel Installer, để nâng cấp lên phiên bản mới bạn chạy lệnh: composer global update Một số trường hợp cập nhật bị thất bại, bạn hãy thử, gỡ đi và cài đặt lại nha composer global remove laravel/installer composer global require laravel/installer Bài viết gốc được đăng tải tại chungnguyen.xyz Có thể bạn quan tâm: Cài đặt Laravel Làm thế nào để chạy Sql Server Installation Center sau khi đã cài đặt xong Sql Server? Quản lý các Laravel route gọn hơn và dễ dàng hơn Xem thêm Tuyển dụng lập trình Laravel hấp dẫn trên Station D

By stationd
Principle thiết kế của các sản phẩm nổi tiếng
Công Nghệ

Principle thiết kế của các sản phẩm nổi tiếng

Tác giả: Lưu Bình An Phù hợp cho các bạn thiết kế nào ko muốn làm code dạo, design dạo nữa, bạn muốn cái gì đó cao hơn ở tầng khái niệm Nếu lập trình chúng ta có các nguyên tắc chung khi viết code như KISS , DRY , thì trong thiết kế cũng có những nguyên tắc chính khi làm việc. Những nguyên tắc này sẽ là kim chỉ nam, nếu có tranh cãi giữa các member trong team, thì cứ đè nguyên tắc này ra mà giải quyết (nghe hơi có mùi cứng nhắc, mình thì thích tùy cơ ứng biến hơn) Tìm các vị trí tuyển dụng designer lương cao cho bạn Nguyên tắc thiết kế của GOV.UK Đây là danh sách của trang GOV.UK Bắt đầu với thứ user cần Làm ít hơn Thiết kế với dữ liệu Làm mọi thứ thật dễ dàng Lặp. Rồi lặp lại lần nữa Dành cho tất cả mọi người Hiểu ngữ cảnh hiện tại Làm dịch vụ digital, không phải làm website Nhất quán, nhưng không hòa tan (phải có chất riêng với thằng khác) Cởi mở, mọi thứ tốt hơn Bao trừu tượng luôn các bạn, trang Gov.uk này cũng có câu tổng quát rất hay Thiết kế tốt là thiết kế có thể sử dụng. Phục vụ cho nhiều đối tượng sử dụng, dễ đọc nhất nhất có thể. Nếu phải từ bỏ đẹp tinh tế – thì cứ bỏ luôn . Chúng ta tạo sản phẩm cho nhu cầu sử dụng, không phải cho người hâm mộ . Chúng ta thiết kế để cả nước sử dụng, không phải những người đã từng sử dụng web. Những người cần dịch vụ của chúng ta nhất là những người đang cảm thấy khó sử dụng dịch...

By stationd
Hiểu về trình duyệt – How browsers work
Công Nghệ

Hiểu về trình duyệt – How browsers work

Bài viết được sự cho phép của vntesters.com Khi nhìn từ bên ngoài, trình duyệt web giống như một ứng dụng hiển thị những thông tin và tài nguyên từ server lên màn hình người sử dụng, nhưng để làm được công việc hiển thị đó đòi hỏi trình duyệt phải xử lý rất nhiều thông tin và nhiều tầng phía bên dưới. Việc chúng ta (Developers, Testers) tìm hiểu càng sâu tầng bên dưới để nắm được nguyên tắc hoạt động và xử lý của trình duyệt sẽ rất hữu ích trong công việc viết code, sử dụng các tài nguyên cũng như kiểm thử ứng dụng của mình. Cách để npm packages chạy trong browser Câu hỏi phỏng vấn mẹo về React: Component hay element được render trong browser? Khi hiểu được cách thức hoạt động của trình duyệt chúng ta có thể trả lời được rất nhiều câu hỏi như: Tại sao cùng một trang web lại hiển thị khác nhau trên hai trình duyệt? Tại sao chức năng này đang chạy tốt trên trình duyệt Firefox nhưng qua trình duyệt khác lại bị lỗi? Làm sao để trang web hiển thị nội dung nhanh và tối ưu hơn một chút?… Hy vọng sau bài này sẽ giúp các bạn có một cái nhìn rõ hơn cũng như giúp ích được trong công việc hiện tại. 1. Cấu trúc của một trình duyệt Trước tiên chúng ta đi qua cấu trúc, thành phần chung và cơ bản nhất của một trình duyệt web hiện đại, nó sẽ gồm các thành phần (tầng) như sau: Thành phần nằm phía trên là những thành phần gần với tương tác của người dùng, càng phía dưới thì càng sâu và nặng về xử lý dữ liệu hơn tương tác. Nhiệm...

By stationd
Thị trường EdTech Vietnam- Nhiều tiềm năng nhưng còn bị bỏ ngỏ tại Việt Nam
Chuyện IT

Thị trường EdTech Vietnam- Nhiều tiềm năng nhưng còn bị bỏ ngỏ tại Việt Nam

Lĩnh vực EdTech (ứng dụng công nghệ vào các sản phẩm giáo dục) trên toàn cầu hiện nay đã tương đối phong phú với nhiều tên tuổi lớn phân phối đều trên các hạng mục như Broad Online Learning Platforms (nền tảng cung cấp khóa học online đại chúng – tiêu biểu như Coursera, Udemy, KhanAcademy,…) Learning Management Systems (hệ thống quản lý lớp học – tiêu biểu như Schoology, Edmodo, ClassDojo,…) Next-Gen Study Tools (công cụ hỗ trợ học tập – tiểu biểu như Kahoot!, Lumosity, Curriculet,…) Tech Learning (đào tạo công nghệ – tiêu biểu như Udacity, Codecademy, PluralSight,…), Enterprise Learning (đào tạo trong doanh nghiệp – tiêu biểu như Edcast, ExecOnline, Grovo,..),… Hiện nay thị trường EdTech tại Việt Nam đã đón nhận khoảng đầu tư khoảng 55 triệu đô cho lĩnh vực này nhiều đơn vị nước ngoài đang quan tâm mạnh đến thị trường này ngày càng nhiều hơn. Là một trong những xu hướng phát triển tốt, và có doanh nghiệp đã hoạt động khá lâu trong ngành nêu tại infographic như Topica, nhưng EdTech vẫn chỉ đang trong giai đoạn sơ khai tại Việt Nam. Tại Việt Nam, hệ sinh thái EdTech trong nước vẫn còn rất non trẻ và thiếu vắng nhiều tên tuổi trong các hạng mục như Enterprise Learning (mới chỉ có MANA), School Administration (hệ thống quản lý trường học) hay Search (tìm kiếm, so sánh trường và khóa học),… Với chỉ dưới 5% số dân công sở có sử dụng một trong các dịch vụ giáo dục online, EdTech cho thấy vẫn còn một thị trường rộng lớn đang chờ được khai phá. *** Vừa qua Station D đã công bố Báo cáo Vietnam IT Landscape 2019 đem đến cái nhìn toàn cảnh về các ứng dụng công...

By stationd