Demo

Mình có clone thử 1 phiên bản của Fullstack Station tại đây:

https://huongdanlaptrinh.net/

Về tốc độ thì phải nói là tuyệt vời, mặc dù so sánh sẽ khập khiễng, tuy nhiên với Fullstack Station thì mình đã tối ưu rất nhiều (plugin HyperCache, Autoptimaize của WordPress, PageSpeed cho Nginx) mới có thể đạt tốc độ nhanh được. Còn với Ghost CMS thì mình không phải làm gì, mà cũng có tốc độ nhanh hơn.

Những ưu, khuyết điểm khi sử dụng Ghost làm Website / Blog

Ưu điểm

• Cài đặt dễ dàng, nhanh chóng
• Giao diện quản lý nội dung, bộ soạn thảo đơn giản, dễ sử dụng
• Hỗ trợ markdown
• Hỗ trợ lịch đăng bài viết
• Hỗ trợ SEO
• Mã nguồn mở, miễn phí
• Có công cụ quản lý Ghost CLI
• Tích hợp HTTPs miễn phí thông qua Let’s Encrypt
• Hỗ trợ API để tạo và quản lý bài viết
• Cài sẵn AMP (Accelerated Mobile Pages)
• Các bộ tích hợp phong phú, cơ bản đáp ứng đủ nhu cầu của 1 blog đơn giản, có thể tuỳ biến cao dựa vào trigger của cơ chế ITTT của Zappier (Xem thêm Huginn)
• Có thể xuất nội dung từ WordPress và nhập vào Ghost dễ dàng

Khuyết điểm

• Ít theme miễn phí
• Phần bình luận phải sử dụng tích hợp dịch vụ ngoài, khá bất tiện.
• Phần tích hợp tuy nhiều, nhưng so với WordPress thì còn thua xa, hơn nữa cứ với mổi tích hợp thì bạn phải đăng ký tài khoản của các dịch vụ ngoài, khá phiền phức. Cũng như việc dữ liệu sẽ bị phân tán, khó kiểm soát.
• Hỗ trợ tiếng Việt kém
• Khi chỉnh sửa sao giao diện phải restart lại ghost (cách khắc phục là sửa dưới máy local rồi up nguyên theme)
• Yêu cầu RAM nhiều hơn (1GB) so với WordPress (512MB)
• Mặc dù hỗ trợ xuất/nhập nội dung từ WordPress, nhưng đối với website sử dụng nhiều code như FS thì nội dung xuất ra vẫn còn nhiều lỗi. (Xem bài bị lỗi)

Chuẩn bị cài đặt Ghost CMS

Bài viết sử dụng Ubuntu 16.04 hoặc 18.10, yêu cầu máy chủ tối thiếu là 1GB RAM nếu không quá trình cài đặt có thể gặp lỗi, để khắc phục bạn sẽ phải bổ sung thêm Swap RAM bằng 4 lệnh sau:

dd if=/dev/zero of=/var/swap bs=1k count=1024k
mkswap /var/swap
swapon /var/swap
echo '/var/swap swap swap default 0 0' >> /etc/fstab

Các phần chuẩn bị cho máy chủ mới

Sau khi đăng nhập vào thì user mặc định là ubuntu, lúc này ta cần tạo thêm một user khác để cài đặt Ghost.

# Thêm user mới 
sudo adduser <user>
# Cấp quyền sudo cho user bạn mới tạo bằng lệnh sau.
sudo usermod -aG sudo <user>
# Đăng nhập vào user mới tạo bằng lệnh.
su <user>

Theo khuyến cáo của Ghost, thì bạn nên tránh tạo user có tên ghost, để tránh trùng lăp và hiểu lầm sau này.

# Đảm bảo máy chủ luôn có các thư viện mới nhất
sudo apt-get update
sudo apt-get upgrade

Trường hợp đã có nginx thì bỏ qua bước này:

# Cài đặt Nginx server trên ubuntu.
sudo apt-get install nginx
# Cho phép kết nối http/https trên firewall bằng lệnh sau
sudo ufw allow 'Nginx Full'

Trường hợp đã có Mysql thì bỏ qua bước này:

# Cài đặt MySQL
sudo apt-get install mysql-server
# Sau khi cài đặt MySQL bạn cần làm các bước sau để đặt mật khẩu cho root user.chạy lệnh
sudo mysql
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password';
quit
# đăng nhập lại vào user bạn đã tạo từ đầu
su <user> 

# Cài đặt NodeJS:
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bashsudo apt-get install -y nodejs
# Cài đặt Ghost CLI:
sudo npm install ghost-cli@latest -g

Sau khi cài ghost CLI thành công là bạn đã có một server đầy đủ các thành phần cần thiết để cài đặt Ghost.

Bắt đầu cài đặt Ghost CMS bằng Ghost CLI

Tạo một thư mới để chứa Ghost bằng lệnh sau (tên thư mục các bạn tự chọn ở đây mình chọn là huongdanlaptrinh.)

sudo mkdir -p /var/www/huongdanlaptrinh

Cài đặt quền sở hữu cho thư mục mới tạo

sudo chown <user> /var/www/huongdanlaptrinh

Cấp quyền cho thư mục mới tạo

sudo chmod 775 /var/www/huongdanlaptrinh

Vào thư mục mới tạocd /var/www/huongdanlaptrinh mục cài đặt ghost phải hoàn toàn trống nếu không quá trình cài Ghost sẽ không thể bắt đầu.

Tiến hành cài đặt Ghost

ghost install

Sau khi chạy lệnh “Ghost Install” quá trình cài đặt sẽ bắt đầu bằng những câu hỏi sau

• Blog URL.
  Nhập chính xác domain của bạn đã chuẩn bị sẵn, ở đây mình đãdùng domain huongdanlaptrinh.net
• MySQL hostname
  dòng này các bạn nhập localhost, hoặc địa chỉ máy chủ database.
• MySQL username
  sử dụng username mặc đinh là root, hoặc bất kỳ username của db đã tạo
• MySQL password
  mật khẩu cho user root  hoặc của username tương ứng các bạn đã tạo ở bước chuẩn bị server.
• Ghost database name
  chọn tên bất kì và ghost sẽ tự tạo database cho bạn, thường thì ghost sẽ gợi ý như huongdanlaptrinh_prod
• Set up a ghost MySQL user?
  tạo thêm user cho MySQL 
• Set up NGINX?
  nên chọn yes và Ghost sẽ tự cấu hình Nginx cho bạn, rất đơn giản.
• Set up SSL?
  Nếu bạn đầu bạn chọ URL có đường dẫn http các bạn nên bỏ qua bước này và cài đặt sau cũng được. Nếu URL có đường dẫn https các bạn chọn yes Ghost-CLI sẽ tự động cài đặt SSL từ Let’s Encrypt cho website của bạn.
• Set up systemd?
  nên chọn yes ở bước này.
• Start Ghost?
  chọn yes để chạy Ghost và website của bạn đã online.

Bậy giờ website đã online và bạn có thể bắt đầu bằng cách đăng nhập vào dashboard của Ghost bằng đường dẫn huongdanlaptrinh.net/ghost. Như vậy là phần cài đặt hoàn thành trong vòng tầm khoảng 15 phút, đây là con số ấn tượng.

Bạn sẽ cần khởi tạo 1 tài khoản quản trị, tài khoản đầu tiên mặc định là chủ sở hữu (owner)

Đây là hình ảnh phía trong phần quản lý nội dung với nội dung được xuất ra từ WordPress.

Fullstack Station Tips

Xét ở góc độ blog đơn giản, thì Ghost CMS vượt trội hơn về tốc độ, cũng như các giao diện đẹp mà không cần phải tối ưu, cấu hình nhiều. Hơn nữa, với các website có sử dụng auto ads Adsense thì layout cũng sẽ bị làm hết đẹp. Nên nếu bạn không có ý định đặt ads, thì Ghost CMS sẽ phù hợp hơn.

Ghost CMS rất phù hợp cho hướng đi làm branding cho cá nhân, tạo cảm giác chuyên nghiệp cho website. Đối với Fullstack Station thì mình không có ý định chuyển sang Ghost CMS, vì mình sử dụng được nhiều tính năng của WordPress phù hợp hơn.

The post Giới thiệu Ghost CMS appeared first on Fullstack Station.

Xu hướng của Graphql

Biểu đồ của Google Trends cho thấy Graphql đang có xu hướng tăng đều trong thời gian qua chứng tỏ Graphql đang phát triển tốt. Mặc dù Graphql không quá nóng bỏng như các frontend React/Vue/Angular với lượng người sử dụng lớn, nhưng điều đó không có nghĩa là Graphql nhận được ít sự quan tâm của mọi người, tuy rằng vẫn có những lý do:

• Graphql được Facebook giới thiệu về đặc tả, không công khai mã nguồn, điều này khiến cho cộng đồng lập trình viên dù yêu thích thì cũng phải mất  khoảng thời gian nghiên cứu và triển khai.
• Firebase được coi như là đối thủ của Graphql về công nghệ và khá mạnh mẽ, tích hợp tốt vào cả web, mobile…tuy nhiên vẫn có điểm yếu khi so với Graphql. Firebase sẽ cạnh tranh với những dịch vụ cung cấp Graphql như Graphcool hoặc Scraphold sẽ nói ở bên dưới.
• Google đã mua lại Firebase, do vậy hiện tại có lẽ không có 1 ông lớn nào đứng đằng sau những server graphql cả.
• Đã quá quen thuộc với REST có lẽ là lý do chính khiến mọi người còn cẩn trọng với công nghệ mới (thật ra cũng đã hơn 2 năm rồi, mới gì nữa :D), hơn nữa lợi ích mà graphql mang lại so với REST thì thật sự cũng chưa quá lớn.

Một số vướng mắc có thể bạn hiểu chưa đúng về Graphql

• Để sử dụng Graphql tôi phải bỏ api REST đi: không đúng, bạn hoàn toàn có thể sử dụng song song cả REST và Graphql, Graphql có thể sử dụng kết quả từ REST, tuy nhiên điều này có thể làm api bị chậm hơn. REST hay Mongodb, Mysql, MsSql, Oracle đối với Graphql chỉ là 1 nguồn dữ liệu, Graphql tổng hợp các nguồn này lại được với nhau.

Các dịch vụ Backend as a Service dành cho Graphql

Hiện tại có 2 dịch vụ cung cấp Graphql là  GraphqlCool và Scraphold, chi phí tương đối rẻ.

Mình đã từng sử dụng qua GraphqlCool và thấy dịch vụ này khá tốt (giao diện, tài liệu tốt, độ hoàn thiện cao, miễn phí các chức năng serverless – function as a service), tuy nhiên chỉ trong một thời gian ngắn thì bắt đầu bộc lộ một số nhược điểm:

• Tốc độ phản hồi hỗ trợ thấp, tất nhiên mình cũng chỉ sử dụng gói miễn phí dành cho lập trình viên nên việc hỗ trợ không được nhanh cũng là điều dễ hiểu. Bạn có thể sử dụng diễn đàn của graphcool để được hỗ trợ bởi các thành viên khác.
• Việc tích hợp các dịch vụ khác còn hạn chế, hiện tại chỉ có Algolia, Auth0, DIGITS (sắp ngưng sử dụng). Tuy nhiên bạn hoàn toàn có thể tích hợp các dịch vụ khác thông qua function serverless, ví dụ gởi tin nhắn đến Slack, hoặc gởi email thì hoàn toàn dễ dàng.
• GraphCool có tích hợp xác thực tài khoản bằng Email-Password của chính họ, chính vì vậy mà họ chiếm luôn 2 trường “name” và “email” trong type User, mình tự suy đoán chuyện này vì cứ sử dụng 2 trường đó cho type User là bị lỗi, sử dụng các tên khác hoặc sử dụng cho type khác thì được. Mình có tìm thêm tài liệu nhưng không thấy ở chỗ nào nói về chuyện này cả. Nói chung không thích chuyện này, vì 3rd-party chỉ nên là tùy chọn, sử dụng hay không là quyền của khách hàng.

GraphCool đã mã nguồn mở framework của họ tại https://github.com/graphcool/framework, mục đính chính là để triển khai lên dịch vụ Graphcool dễ dàng hơn nhưng cũng có thể tự tạo server riêng (sử dụng Docker), khi mình thử dùng bằng docker thì bị lỗi nên chưa đưa ra đánh giá được.

Hướng dẫn tạo Graphql-Server

Cheatsheet

Trước tiên, bạn hãy xem cheatsheet sau để hiểu cơ bản về các khái niệm của Graphql

Bài viết phần tiếp theo sẽ đi vào chi tiết tạo Graphql Server như thế nào

Fullstack Station Tips

Các nguồn tài nguyên dành cho graphql

https://github.com/chentsulin/awesome-graphql

https://www.howtographql.com

https://graphql.org

The post Hướng dẫn tạo Graphql Server một cách dễ dàng – Phần 1 appeared first on Fullstack Station.

Universal Javascript App là gì

Universal Javascript App là ứng dụng web được viết bằng javascript (trước đây còn được gọi là isomorphic), chạy được cả server và phía browser chung một mã nguồn. Tất nhiên có một số chỉ cần chạy phía browser như các hiệu ứng chuyển trang, chuyển động, hiệu ứng của các phần tử, hoặc có sử dụng local storage của browser, còn một số mã nguồn liên quan đến lớp xử lý (business logic) hoặc các hoạt động đặc thù của server như phiên làm việc (session), xác thực (authentication),…

Điểm đặc biệt của Universal Javascript App ở phía server thường là cấu trúc tách biệt hoàn toàn:

• Với dữ liệu, ta sẽ dùng API chứ không kết nối trực tiếp đến database
• Với phiên làm việc và xác thực cũng sẽ dùng server riêng chẳng hạn với giao thức OAuth hoặc JWT

Với kiến trúc này, mọi công việc sẽ được chia nhỏ và không bị ảnh hưởng nhiều khi một thành phần bị thay đổi (Microservices).

Next.js là gì

Next.js là một framework nhỏ gọn được xây dựng từ React, Babel và Wepack được tạo ra để giúp lập trình viên tạo ứng dụng web React có tính năng SSR (Server Side Render). Như các bạn đã biết với React.js, thì chúng ta đang xây dựng ứng dụng front-end với UI được quản lý bởi React, điểm yếu là chỉ client-side-render, nên việc SEO sẽ gặp khó khăn (có thể khắc phục bằng hệ thống ở server có khả năng xử lý javascript như Prerender.io), Next.js giúp chúng ta có tính năng SSR rất dễ dàng, ngoài ra còn có các tính năng đặc trưng (thừa kế Babel và Webpack) như:

• Hot Module Replacement (HMR) – Webpack
• Đóng gói bundle (có code split) và chuyển mã nguồn (Babel ví dụ từ ES6 -> ES5 cho trình duyệt web hiểu)
• Tạo chỉ mục (indexing) cho các tập tin trong thư mục pages
• Phục vụ static files, với Next.js thì không cần webserver khác (Có thể dùng Nginx làm reversed proxy)

Xây dựng ứng dụng web Universal Javascript App với Next.js

Mục tiêu

Đây là kết quả của chúng ta sẽ làm, liệt kê thẻ bài có pagination, sau lần tải đầu tiên do server render thì tất cả từ giờ các link đều chạy bằng ajax:

Cài đặt

Trên trang chủ của Next.js hướng dẫn sử dụng bằng npm, tuy nhiên như bài viết YARN sẽ thay NPM  quản lý thư viện Javascript đã nói thì YARN nhanh hơn npm nhiều, nên chúng ta sẽ sử dụng yarn để thiết lập dự án.

mkdir demo-nextjs
cd demo-nextjs
yarn init #điền các thông tin tùy bạn
yarn add next #thêm next.js vào dự án

Sau khi yarn tải và cài đặt các gói thư viện cần thiết, chúng ta cần thêm đoạn sau vào file package.json:

{
  //... # các dòng đã có thì giữ nguyên
  "scripts": {
    "dev": "next"
  }
}

Tập tin package.json sẽ như hình sau:

Tiếp theo sẽ tạo thư mục có tên là pages

mkdir pages

Tiếp tục tạo tập tin index.js trong thư mục pages, với nội dung như sau:

import React from 'react'
export default () => <div> Hello World!</div>

Một component rất đơn giản cho sự khởi đầu hoàn hảo:

yarn run dev

Bây giờ mở http://localhost:3000 bạn sẽ thấy “Hello world”

Điểm khác biệt với khi bạn sử dụng React.js thường với Next.js là SSR là mã nguồn được render từ server, do vậy, trong HTML trả về khi view-source sẽ có như sau:

...<body><div id="__next"><div data-reactroot="" data-reactid="1" data-react-checksum="1574179767"> Hello World!</div></div>...

Đây là điểm đặc biệt sẽ giúp cho SEO của bạn tốt hơn, mặc dù Google đã có thể chạy javascript trên trang web của bạn để index, nhưng các các hệ thống tìm kiếm khác như Bing, Yahoo thì không.

Trước khi tiếp tục, chúng ta sẽ tìm hiểu sơ qua cấu trúc thư mục bên trong dự án sử dụng Next.js

• pages/index.js tương đương route là /
• pages/about.js tương đương route /about
• pages/account.js tương đương route /account

Cứ như vậy đơn giản là tạo file là bạn có thể tạo route, với cấp con thì sẽ tạo thư mục, ví dụ:

• pages/account/manager.js tương đương /account/manager
• pages/account/admin.js tương đương /account/admin

Khi bạn tạo thư mục account thì cần xóa tập tin account.js (mặc dù /account và /account/ là khác nhau, nhưng đây là quy định mặc định của Next.js)

Chú ý: khi bạn tạo thêm tập tin hay thư mục mới thì phải restart lại (Ctrl+C & yarn run dev)

Kết nối dữ liệu

Do đặc tính của Universal Javascript App là kể từ khi server đã render một lần, thì sau đó, toàn bộ đều thực thi dưới client, nên sẽ sử dụng API riêng biệt với app, sửa file index.js như sau:

import React from 'react';
import 'isomorphic-fetch'

export default class App extends React.Component {
    static async getInitialProps () {
        const res = await fetch('https://api.pokemontcg.io/v1/cards?pages=1&pageSize=10')
        const data = await res.json()
        return data;
    }
    render(){
        return (
            <div>
            {this.props.cards.map((card, i) => (
                <div key={i} style={{width: 200, float: 'left'}}>
                <div  style={{margin: 10}}>
                        <img src={card.imageUrl} style={{width: 160}}/>
                    </div>
                </div>
            ))}
            </div>
        )
    }
}

Chúng ta sẽ được kết quả như sau:

Trong đó, hàm getInitialProps sẽ được thực hiện đầu tiên và lấy dữ liệu từ một API khác, thông thường nếu dùng theo cấu trúc database, bạn sẽ kết nối máy chủ dữ liệu và lấy dữ liệu ở bước này. Nhưng với Universal Javascript App, thì ở đây nên được dùng là API, để hình dung rõ hơn chúng ta sẽ đi tiếp và mình sẽ giải thích kỹ hơn.

Để giao diện đẹp hơn chút, mình dùng spectre.css: thêm component Head để gắn spectre.css, với component này thì Next.js sẽ tự động di chuyển phần trong <Head> vào thẻ head của html

import React from 'react';
import 'isomorphic-fetch'

import Head from 'next/head'
import Link from 'next/link'
export default class App extends React.Component {
    static async getInitialProps () {
        const res = await fetch('https://api.pokemontcg.io/v1/cards?pages=1&pageSize=12')
        const data = await res.json()
        return data;
    }
    render(){
        return (
            <div className="container">
            <Head>
                <meta name="viewport" content="width=device-width, initial-scale=1" />
                <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.1/build/pure-min.css" />
            </Head>
            <div className="columns">
            {this.props.cards.map((card, i) => (
                <div className="column col-3" key={i}>
                <div  style={{margin: 10}}>
                    <Link href={`/cards?id=${card.id}`} >
                        <img src={card.imageUrl} className="img-responsive"/>
                    </Link>
                    </div>
                </div>
            ))}
                
            </div>
            </div>
        )
    }
}

Ở đây, mình thêm vào component Link cho thẻ bài, để tiếp tục phần tiếp theo là xem chi tiết thẻ bài.

Trang chi tiết

Tạo thư mục pages/cards và file index.js như sau:

import React from 'react'
import 'isomorphic-fetch'

import Head from 'next/head'
import Link from 'next/link'
export default class App extends React.Component {
    static async getInitialProps({query}) {
        const res = await fetch('https://api.pokemontcg.io/v1/cards/' + query.id)
        const data = await res.json()
        return data
    }
    render() {
        return (
            <div className="container">
                <Head>
                    <meta name="viewport" content="width=device-width, initial-scale=1"/>
                    <link
                        rel="stylesheet"
                        href="//cdn.bootcss.com/spectre.css/0.1.29/spectre.min.css"/>
                </Head>
                <ul className="breadcrumb">
                    <li className="breadcrumb-item">
                        <Link href="/">Home</Link>
                    </li>
                    <li className="breadcrumb-item">
                        {this.props.card.name}
                    </li>
                </ul>
                <div className="columns">
                    <div className="column col-4">
                        <p><img src={this.props.card.imageUrl}/></p>
                    </div>
                    <div className="column col-8 empty">
                        <div className="form-horizontal">
                            <div className="form-group">
                                <div className="col-3">
                                    <label className="form-label">Name</label>
                                </div>
                                <div className="col-9">
                                    <span>{this.props.card.name}</span>
                                </div>
                            </div>
                            <div className="form-group">
                                <div className="col-3">
                                    <label className="form-label">HP</label>
                                </div>
                                <div className="col-9">
                                    <span>{this.props.card.hp}</span>
                                </div>
                            </div>
                            <div className="form-group">
                                <div className="col-3">
                                    <label className="form-label">Series</label>
                                </div>
                                <div className="col-9">
                                    <span>{this.props.card.series}</span>
                                </div>
                            </div>
                            <div className="form-group">
                                <div className="col-3">
                                    <label className="form-label">Set</label>
                                </div>
                                <div className="col-9">
                                    <span>{this.props.card.set}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        )
    }
}

Điểm đặc biệt ở component này là chúng ta sử dụng query từ URL để lấy id, sau đó thực hiện fetch lấy dữ liệu như ở trang liệt kê. Ở đây mình có thêm cái breadcrumbs để quay về trang chủ, thì khi quay lại trang chủ, bạn sẽ thấy tốc độ nhanh như khi xem 1 thẻ bài vậy, vì component chỉ load API và render lại trang hoàn toàn ở client, và không liên quan gì đến server đã render trang trước đó.

Phân trang

Để trang chủ hoặc là trang liệt kê lá bài có thể phân trang, chúng ta sẽ sửa lại pages/index.js để nhận tham số page và thêm đoạn mã phân trang, để ví dụ được đơn giản thì mình để tạm 3 trang:

import React from 'react';
import 'isomorphic-fetch'

import Head from 'next/head'
import Link from 'next/link'
export default class App extends React.Component {
  static async getInitialProps({query}) {
    let page = 1
    if (query.page != undefined && parseInt(query.page)) {
      page = query.page
    }
        const res = await fetch(`https://api.pokemontcg.io/v1/cards?page=${page}&pageSize=12`)
        const data = await res.json()
        return data;
    }
  render() {
        return (
            <div className="container">
            <Head>
                <meta name="viewport" content="width=device-width, initial-scale=1" />
                <link rel="stylesheet" href="//cdn.bootcss.com/spectre.css/0.1.29/spectre.min.css" />
            </Head>
            <div className="columns">
            {this.props.cards.map((card, i) => (
                <div className="col-md-3" key={i}>
                <div  style={{margin: 10}}>
                    <Link href={`/cards?id=${card.id}`} >
                    
                    {<img src={card.imageUrl} className="img-responsive"/>}
                    </Link>
                    </div>
                </div>
            ))}
                
            </div>
            <div className="divider"></div>
            <div className="container">
              <div className="float-right">
              <ul className="pagination">
                  <li className="page-item">
                      <Link href={`/?page=1`} >1</Link>
                  </li>
                  <li className="page-item">
                      <Link href={`/?page=2`} >2</Link>
                  </li>
                  <li className="page-item">
                      <Link href={`/?page=3`} >3</Link>
                  </li>
                </ul>
              </div>  
              </div>  
            </div>
        )
    }
}

Như vậy là chúng ta đã hoàn thành xong ứng dụng web đơn giản, với mục tiêu là giới thiệu khái niệm kỹ thuật Universal Javascript App với Next.js

Fullstack Station’s Tips

• Mặc dù khi sử dụng component Link, Next.js sẽ tạo ra mã html, nhưng nếu bạn sử dụng mã html trực tiếp hay vì dùng component Link, thì tính năng Universal sẽ mất đi, có nghĩa là browser sẽ tải lại trang mới được tạo ra từ server.
• Sử dụng Next.js vẫn có khuyết điểm lớn về vấn đề router, vì router được sử dụng là của Next.js nhưng bạn lại không sử dụng React Router để thay thế được. Trong khi tính năng “params matching” lại là điều bất khả thi tại thời điểm này, ví dụ “/cards/:cardSlug” là không được (ảnh hưởng SEO nếu bạn làm website).

Code sample & Demo

https://github.com/virusvn/demo-nextjs

Demo: http://fullstackstation.com:3333/

Có nên sử dụng Next.js không?

Theo mình thì Next.js khá tốt, ngoại trừ vấn đề router sẽ được khắc phục trong thời gian tới thì Next.js phù hợp cho bạn muốn xây dựng ứng dụng nhanh, có tốc độ nhanh mà không phải mất nhiều thời gian để thiết lập, cấu hình và lập trình phía server. Khi sử dụng Next.js, thì bạn thỏa sức làm việc với React, tách biệt phần API mà vẫn có tính năng SSR – đây là ưu điểm rất lớn cho các ứng dụng Javascript.

Như đã nói ở phần giới thiệu Universal Javascript là gì ở trên, thì với kiến trúc microservices, nếu bạn tách được phần dữ liệu, xác thực ra ở một ứng dụng riêng, thì Next.js rất phù hợp, và dù sau này bạn không thích Next.js nữa, thì vẫn có thể tái sử dụng React components – chiếm phần lớn thời gian lập trình.

Cập nhật: Next.js đã có bản beta version 2, cho tùy chỉnh route và khả năng tích hợp với nhiều thứ khác.

The post Hướng dẫn xây dựng Universal Javascript App với Next.js (Fullstack React) appeared first on Fullstack Station.

YARN là công cụ quản lý thư viện javascript mã nguồn mở tốc độ cao, tin cậy và bảo mật nhằm thay thế NPM (Node Package Management). Được hình thành bởi các kỹ sư Facebook, Google, Exponent và Tilde, và đã được sử dụng thực tế mức Production tại các công ty trên.

Trang chủ: https://yarnpkg.com/

Github: https://github.com/yarnpkg/yarn

Đây là dự án bắt đầu được viết từ tháng 1/2016, sau quãng thời gian thử nghiệm và hoàn thiện đã được mở ra thành mã nguồn mở, và thật không có gì ngạc nhiên khi với những tính năng nổi trội vượt bậc đã có 10.000 stars chỉ trong 1 ngày tại Github. Chứng tỏ sự thành công và là tín hiệu thay thế rõ ràng NPM.

Đặc trưng của YARN

Tốc độ: YARN sẽ tạo cache cho tất cả các gói đã được tải về, và tải đồng thời nhiều gói cùng lúc nên tốc độ download rất nhanh.

Tin cậy: sử dụng tập tin lock (tương tự composer) với format chi tiết nhưng ngắn gọn, đảm bảo tính nhất quán khi cài đặt các gói giữa các hệ thống (ví dụ máy dev và máy chủ)

Bảo mật: sử dụng checksum để đảm bảo tính nguyên vẹn của code trước khi nó được thực thi.

Sau khi thử nghiệm thì mình thấy quả thật tốc độ quá tốt, nhất là đối với những bạn sử dụng React Native mà bị lỗi 4968 (lỗi này thường phải xóa thư mục node_modules và cài lại) thì giống như địa ngục vậy, thường mất hơn 5 phút :((. Thật ra thì npm cũng có cache, nhưng kiến trúc, cách thức của 2 bên khác nhau và YARN nổi trội hơn.

Tính năng của YARN

Offline mode: khi đã tải về, YARN sẽ cache lại và khi có thể cài đặt lại không cần internet.

Deterministic: các gói thư viện sẽ được cài đặt nhất quán cho dù thứ tự cài đặt khác nhau cho tất cả các máy

Network Performance: sử dụng hiệu quả hàng đợi các request và tránh waterfall các request để tối ưu tốc độ mạng.

Multiple Registries: cài đặt các gói từ các registries như Bower hay NPM đều đảm bảo workflow giống nhau.

Network Resilience: nếu một request bị fail thì nó không làm cho tiến trình bị dừng lại, khác với npm là nếu npm bị lỗi thì bị dừng lại., không những vậy mà còn có khả năng cố gắng thử lại.

Flat Mode: giải quyết việc không đồng nhất phiên bản của các gói thành 1 gói để tránh tạo trùng lặp

Cài đặt

Cài đặt thì các bạn xem ở đây, được ghi rõ cho từng dòng MacOS, Window, Linux.

Hướng dẫn sử dụng

Cách sử dụng tương đối đơn giản như npm

yarn init

yarn add [package]
yarn add [package]@[version]
yarn add [package]@[tag]

yarn upgrade [package]
yarn upgrade [package]@[version]
yarn upgrade [package]@[tag]

yarn remove [package]

yarn

yarn install

Do YARN cũng sử dụng package.json nên nếu dự án đã có thì việc sử dụng YARN cũng không khác mấy, chỉ cần bạn xóa tất cả các thư mục trong node_modules, sau đó dùng yarn để cài lại.

The post Công cụ quản lý thư viện YARN sẽ thay thế NPM appeared first on Fullstack Station.

Cập nhật: do meteor-webpack không còn được duy trì phát triển, nên meteor-webpack không tương thích với Meteor đã cập nhật lên phiên bản 1.4 (chỉ tương thích 1.2 và 1.3)

Giới thiệu

Trước khi bắt đầu xây dựng web app realtime với Meteor, React, Webpack chúng ta sẽ lần lượt lướt qua các công nghệ này và tìm hiểu xem là công nghệ fullstack đã thay đổi như thế nào!

Trong bài viết này, Meteor là chính, tiếp theo là React, còn Webpack là để biến chúng trở nên hoàn hảo với nhau! Tuy nhiên, nếu bạn chưa biết gì về webpack, bạn nên đọc Những rủi ro khi sử dụng Webpack với Meteor ở cuối bài.

Meteor

Trang chủ: www.meteor.com

Nên đọc: Điều gì khiến Meteor 1.3 trở nên đặc biệt

Đây là một fullstack framework dùng để viết App (Web/Mobile) realtime rất mạnh, dễ dàng. Mặc dù mặc định để build cho mobile là hybrid (sử dụng Phonegap), tuy nhiên bạn hoàn toàn có thể sử dụng React Native để kết nối với Meteor.

React

Trang chủ: https://facebook.github.io/react/

Nên đọc: React Js là gì

Nên đọc: Hướng dẫn học React Js

Webpack

Webpack là một cách đơn giản để cấu trúc mã nguồn của dự án, đồng thời cung cấp khả năng Hot Load (Hot Module Replacement – HMR) mà mình rất thích, và đưa vào Meteor để nâng cao khả năng tốc độ làm việc.

Nên đọc: Webpack là gì

Nên đọc: Giới thiệu webpack

Gói thư viện sẽ sử dụng: Meteor Webpack

Vấn đề của Meteor

Ưu điểm

• Cơ chế Xuất bản (Publications) và Đăng ký (Subscription)
  • Bảo vệ xuất bản dữ liệu một cách đơn giản
  • Giao thức DDP giúp đồng bộ client dễ dàng và nhanh chóng (Hỗ trợ React Native)
• Cơ chế xác thực: sử dụng tài khoản với mật khẩu hay sử dụng OAuth dễ dàng
• Từ 1.2 đã hỗ trợ ReactJs và Angular Js
• Từ 1.3
  • Đã sử dụng hoàn toàn ES6/ES2015
  • Đã sử dụng NPM

Còn nhiều ưu điểm khác để sử dụng Meteor để xây dựng ứng dụng realtime, tuy nhiên bài viết này mình không tập trung nói về Meteor.

Khuyết điểm

Bài viết này mình tập trung vào khuyết điểm nặng nhất của Meteor đó là chính công cụ build của Meteor: nó chậm kinh khủng! Bất kỳ mỗi động tác Save file nào, Meteor sẽ build lại “toàn bộ mã nguồn”, mặc dù sau đó nó tự động kích hoạt Client để refresh với mã nguồn mới, tuy nhiên mình mất quá nhiều thời gian cho lập trình, trong khi Webpack lại có cơ chế HMR quá hay!

Một số bài viết nói về khuyết điểm của Meteor liên quan đến NPM và ES6/ES2015 là đã cũ, từ Meteor 1.3 đã khắc phục các vấn đề này rồi.

Giải quyết vấn đề khuyết điểm

Hot Module Replacing – HMR

Như đã nói ở trên, mình muốn giải quyết vấn đề build lâu của Meteor, nhưng HMR là gì? Bạn lập trình web thì biết mỗi lần sửa file gì, mình phải refresh lại trang, để cho trình duyệt nạp lại các tập tin mới.

Meteor thực hiện việc refresh này một cách tự động, nhưng do cơ chế của Meteor, bất kỳ 1 thay đổi nào của file cũng sẽ kích hoạt quy trình build phức tạp của Meteor, việc xử lý này mất khá nhiều thời gian từ 20-30s đối với dự án lớn (Khi bắt đầu thì thấy thay đổi rất nhanh, nhưng với cấu trúc dự án lớn thì khá chậm), sau khi build xong Meteor sẽ gởi tín hiệu xuống client và kích hoạt refresh để lấy code mới. Với cách này thì Meteor làm cũng khá ổn rồi, nhưng vẫn chậm!

Webpack -sử dụng cơ chế HMR cũng quan sát toàn bộ mã nguồn, nhưng khi thay đổi file nào, nó chỉ build lại file đó, và gởi xuống trình duyệt chỉ những thành phần/module thay đổi, việc này giúp cho quá trình lập trình tăng lên. Chỉ cần thay đổi code, Save và liếc qua màn hình có chứa trình duyệt, hoặc thêm mobile web bạn sẽ thấy code thay đổi gần như ngay lập tức (1-3s)

Những cách giải quyết phức tạp – không hay cho người mới

Cũng có một vài repo dùng để kickstart dự án:

https://github.com/thereactivestack/kickstart by@benoit_tremblay

https://github.com/jedwards1211/meteor-webpack-react by jedwards

Tuy nhiên, những repo này lại có những vấn đề khác:

• Thiết lập cấu trúc code theo cách của họ, vì vậy khi bạn sử dụng các hướng dẫn từ trang chủ của Meteor nó rất khác, gây khó hiểu.
• Đưa vào những thành phần, công nghệ không/chưa cần thiết như: Redux, ReactRouter, FlowRouter…

Cách giải quyết vấn đề đơn giản nhất

Theo quan điểm của mình, sử dụng bài viết hướng dẫn của Meteor ngay tại trang chủ là tốt nhất, bởi vì nó dành cho người mới bắt đầu, còn những bài viết khác đa phần là dành cho người đã có kinh nghiệm.

Do vậy, chúng ta chỉ cần sử dụng: Build Todo App with Meteor + React

Hướng dẫn ở trên do chính Meteor soạn thảo đã rất đơn giản và dễ hiểu về Meteor + React, chúng ta không nên đi lung tung. Mình chỉ thêm 1 bước 2a, một bước rất nhỏ để cài Webpack, sau đó bạn có thể tiếp tục với các bước hướng dẫn khác của Meteor.

Bắt đầu

Yêu cầu

NodeJs 0.12 hoặc 4.0+, NPM

Chú ý: ở mục này các bạn có thể theo phần hướng dẫn viết TODO App với React của www.meteor.com, mình chỉ viết lại để tiện theo dõi hơn, chỉ cần chú ý bước cài Webpack là được.

Cài đặt Meteor

MacOS:

curl https://install.meteor.com/ | sh

Window:

https://install.meteor.com/windows

Khởi tạo dự án (Bước 1 – Create an app)

meteor create simple-todos

Sau khi chạy lệnh trên, bạn sẽ có được cấu trúc thư mục như sau:

client/main.js        # a JavaScript entry point loaded on the client
client/main.html      # an HTML file that defines view templates
client/main.css       # a CSS file to define your app's styles
server/main.js        # a JavaScript entry point loaded on the server
package.json          # a control file for installing NPM packages
.meteor               # internal Meteor files
.gitignore            # a control file for git

Chạy Meteor

cd simple-todos
meteor npm install
meteor

Như vậy là bạn đã chạy được webapp bằng Meteor

Khởi tạo React (Bước 2 – Components)

meteor npm install --save react react-dom

….

Bạn vui lòng sử dụng bước 2 tại đây, chỉ cần copy code lại sửa đúng file là được:

https://www.meteor.com/tutorials/react/components

Cài đặt Webpack (Bước 2a – Webpack)

Ở thư mục gốc của dự án simple-todos bạn chạy các dòng lệnh sau:

// Xoá gói build emacscript mặc định của Meteor
meteor remove ecmascript
// Cài đặt webpack - chú ý là webpack của meteor, không phải webpack từ npm
meteor add webpack:webpack
meteor add webpack:react
meteor add webpack:less
meteor

//Sau khi chạy xong lệnh trên, meteor sẽ yêu cầu chạy npm install các gói
npm install

Sau khi chạy xong, bạn sửa file package.json, thêm các dòng sau:

{
  "name": "simple-todos",
   ...
  "main": "server/entry.js", => Dòng 1
  "browser": "client/entry.js" => Dong 2
   ...
}

Như vậy là đã xong rồi, rất đơn giản phải không?

meteor

Chạy lệnh trên, bạn sẽ nhìn thấy webpack và meteor hoạt động cùng nhau, đây là kết quả từ màn hình console:

=> Started proxy.
=> Started MongoDB.
webpack built c439f6a9efa3849e1c17 in 8174ms \
=> Started your app.

=> App running at: http://localhost:3000/
webpack building...lication                  /
webpack built a9141ae180f4e253c8e1 in 1684ms /
=> Meteor server restarted

Bạn hãy thử mở file import/ui/App.jsx hoặc import/ui/Task.jsx để sửa một cái gì đó bất kỳ rồi save lại, ví dụ sửa “Todo List” => “Simple Todo List”, bạn sẽ thấy console log chạy như sau:

webpack building...ing packages              \
webpack built 2a3c1684ae68400daecc in 1059ms |
=> Meteor server restarted
webpack building...lication                  |
webpack built e6e7c13e3e84258156fc in 536ms  /

Và ngay lập tức, trình duyệt sẽ thay đổi theo ngay, một số thay đổi chỉ mất dưới 1s. Ngay từ ban đầu, nếu bạn làm theo hướng dẫn của Meteor – không dùng Webpack, kết quả không khác nhau nhiều. Nhưng khi số file của dự án tăng lên thì sự khác biệt ngày càng lớn, trường hợp của mình gặp phải là khoảng thời gian build của Meteor mất từ 20s :(. Việc Meteor từ phiên bản 1.3 chuyển qua viết theo dạng module cũng có thể là sự chuẩn bị cho việc dùng Webpack.

Bước 3 đến 12

Như vậy là bạn đã xong bước 2a, bạn hãy tiếp tục sử dụng Bước 3 – Collection trong loạt hướng dẫn của Meteor để tiếp tục vọc Meteor. Mình hi vọng qua bài viết này, những bạn mới bắt đầu học Meteor kết hợp React sẽ dễ dàng phát triển hơn, sẽ rất tốt nếu bạn làm theo hướng dẫn của Meteor rồi sau đó tham khảo bài viết này một cách sớm nhất có thể. Sẽ khó cho bạn nếu bạn sử dụng Meteor + React sau một thời gian rồi mới bắt đầu sử dụng Webpack, vì khi đó việc cài đặt Webpack sẽ gặp nhiều khó khăn hơn.

Rủi ro khi sử dụng Webpack trong dự án Meteor

• Việc sử dụng thêm Webpack khiến dự án của bạn gặp nhiều rủi ro hơn vì phải học cả 3 thứ: Meteor, React, Webpack. Bạn có thể hi sinh thời gian để học thêm được Webpack – thay vì mất thời gian cho việc chờ Meteor build, tuỳ thuộc vào bạn!
• Webpack không được hỗ trợ chính thức từ Meteor Core team (MDG) vì lời hứa backwards compatibility, hơn nữa nó mất thời gian cho việc hỗ trợ cộng đồng Webpack + Meteor mà đó không phải là mục đích của họ khi tạo ra Meteor
• Webpack không đơn giản, bạn sẽ mất thời gian để nghiên cứu, nhiều hay không còn tuỳ thuộc vào vấn đề bạn gặp phải là gì. Tuy nhiên, việc sử dụng bộ thêm Webpack có điểm lợi là sau này nếu bạn sử dụng React cho dự án khác mà không cần sử dụng Meteor, bạn sẽ thấy bộ đôi React + Webpack sẽ rất lợi hại.

Tham khảo

Meteor with Webpack, React and Redux in Practice

BulletProof Meteor by Kadira

React & ES6/ES2015

React with Webpack and Meteor as a Backend (Cám ơn bạn Khanh đã bổ sung)

The post Hướng dẫn thiết lập môi trường cho Meteor + React + Webpack appeared first on Fullstack Station.

Meteor Js là nền tảng phát triển ứng dụng web thời gian thực fullstack, được viết cho cả client và server chỉ bằng ngôn ngữ Javascript. Được ra mắt từ năm 2012 và hiện tại đã đạt 33k stars trên Github, quá đỉnh đó chứ!

Giá mà…

Mình viết bài viết này chỉ dựa sau khi có kinh nghiệm nghiên cứu Meteor 1 thời gian, và đã quyết định chọn Meteor bắt đầu dự án lớn chỉ sau 1/2 ngày làm Todo app theo hướng dẫn! Giá mà mình có thể biết Meteor sớm hơn, đây là câu nói mình thốt ra sau khi biết Meteor :). Vậy Meteor 1.3 có gì thú vị?

Meteor Js 1.3 và những điều thú vị

Được viết hoàn toàn bằng ES2015(ES6)

ES2015 giúp cho việc viết code Javascript trở nên rõ ràng, có cấu trúc (class, let, const, arrow function, object destructing…), mặc dù chỉ mới ra mắt từ giữa 2015, nhưng với những tính năng mạnh mẽ khiến Meteor viết toàn bộ code lại qua ES2015, mang đến một hệ thống rõ ràng, uyển chuyển hơn. (Xem thêm ES2015 là gì)

Sử dụng NPM để cài đặt các thư viện

Meteor sử dụng hệ thống quản lý thư viện, thành phần mở rộng riêng của Meteor. Thật ra bản chất bên trong cũng đã có sử dụng NPM rồi, nhưng cần bọc thêm một lớp của Meteor bên ngoài để cài đặt phù hợp với cấu trúc của Meteor. Việc Meteor hỗ trợ cài NPM một cách riêng lẻ không phải mục đích để thay thế hệ thống quản lý gói này. Tuy nhiên, việc hỗ trợ NPM một cách riêng lẻ khiến cho việc viết code trở nên linh hoạt hơn vì NPM có số lượng package vô cùng phong phú. Nhưng bạn cũng cần chú ý là việc sử dụng NPM khiến việc bảo trì tính tương thích với các gói của Meteor cũng trở nên vất vả hơn nhé.

React

Thật ra điều này không mới, Meteor hỗ trợ AngularJs và ReactJs thì có từ 1.2 rồi nhưng từ 1.3 sẽ khác, một cách không chính thức bộ template engine Blaze sẽ bị thay thế bằng ReactJs. Rõ ràng ReactJs sẽ có ngôi vương cho việc thay thế phần View trong mọi framework, nên việc sử dụng chính React sẽ giúp cho ứng dụng của bạn linh hoạt hơn vì có tính tái sử dụng rất cao, sau này bạn có thể dùng component React cho một dự án khác một cách độc lập không phụ thuộc vào Meteor, đó là một ý tưởng rất tốt đúng không nào? (Blaze nay đã trở thành 1 gói riêng chứ không còn gắn kèm chung với Meteor nữa)

Application testing

Không phải tới 1.3 mới có test đâu, nhưng bản 1.3 hỗ trợ cả unit test và integration. Unit test (meteor test) thì test cho từng thành phần riêng lẻ, còn integration test (meteor test –full-app) sẽ nạp toàn bộ code của ứng dụng và giúp cho bạn test từng tiến trình để chắc chắn các thành phần (đã test unit) tích hợp ngon lành với nhau.

Cải thiện Cordova

Cập nhật các gói Cordova lên phiên bản mới nhất (Cordova 6.0.0, Cordova iOS 4.1.0, Android 5.1.1). Meteor đã viết lại lớp Cordova giúp dễ dàng kiểm soát lỗi trong ứng dụng iOS và Android hơn, hơn nữa còn có chế độ Hot Code Push có thể quay lại phiên bản trước nếu phiên bản hiện tại bị lỗi (Việc này không cần thông qua App Store hoặc PlayStore, bạn có thể xem thêm Microsoft CodePush)

Cải thiện minimongo

Do tính năng cần đồng bộ dữ liệu giữa server và client nên việc cải thiện minimongo sẽ giúp cho tốc độ của ứng dụng tăng lên đáng kể.

Kết luận

Để viết ứng dụng có tính chất Realtime thì React + Meteor Js 1.3 quả là một sự kết hợp hoàn hảo hơn bất kỳ bộ nào khác khi React quản lý phần view và phần còn lại là Meteor đảm bảo fullstack! Ngoài ra, vì AngularJs là một framework hoàn chỉnh nên việc sử dụng chung với Meteor cũng là một framework sẽ khiến một lượng code không cần thiết cùng tồn tại. Nếu bạn vẫn chưa biết tí gì về Meteor, hãy bỏ ra 2 giờ để ngâm cứu cái Todo Example (React) bạn sẽ thấy thích thú với tốc độ viết ra ứng dụng web realtime.

Cập nhật 2017: sau một số dự án sử dụng Meteor + React, mình nhận thấy Meteor không còn phù hợp vì quá trình phát triển gặp vấn đề về tốc độ build, thiếu hỗ trợ HMR (Hot module replacement). Mặc dù một số tính năng tuyệt vời của Meteor là không thể bàn cãi, nhưng đối với những dự án lớn, tốc độ build làm cho lập trình viên cảm thấy mệt mỏi, mình khuyến nghị sử dụng hệ sinh thái mới dựa trên Graphql và Next.js để đạt nhiều mục đích, hiệu quả hơn.

The post Điều gì khiến Meteor Js 1.3 trở nên đặc biệt? appeared first on Fullstack Station.

GraphQL là gì?

GraphQL là Graph Query Language do Facebook tạo ra từ năm 2012 cung cấp giao thức chung cho phép giao tiếp giữa client và server để cập nhật và lấy dữ liệu.

Client truy vấn đến máy chủ GraphQL bằng các truy vấn với đặc điểm: format của dữ liệu trả về được mô tả trong câu truy vấn và được định nghĩa ở phía client thay vì ở server. Nói đơn giản hơn, đây là truy vấn hướng client, cấu trúc dữ liệu không khô cứng 1 khuôn mẫu từ server (REST API) mà thay đổi theo từng ngữ cảnh sao cho hiệu quả nhất đối với client mà chỉ cần dùng duy nhất 1 endpoint.

Tổng quan GraphQL

Điều quan trọng là GraphQL không phải là một ngôn ngữ truy vấn thực sự, nó chỉ là giao thức giao tiếp giữa client và server, rất cả client (web, mobile) đều có thể giao tiếp với bất kỳ server nào mà sử dụng ngôn ngữ GraphQL.

Khái niệm chính về GraphQL bao gồm:

• Cấu trúc phân tầng (Hierarchical)
• Hướng sản phẩm (Product0-centric)
• Định kiểu mạnh (Strong-typing)
• Truy vấn hướng client (Client-specified queries)
• Nội quan (Introspective)

Các bạn có thể đọc thêm ở đây. Tuy nhiên theo mình thì ở mức sử dụng là không cần nghiên cứu tài liệu dài dòng đó.

Chú ý: mấy thuật ngữ trên khá khó để diễn tả, nên các bạn đọc từ từ sẽ hiểu, nếu bạn nào có từ hay vui lòng comment bên dưới bài nhé.

GraphQL giải quyết vấn đề gì

GraphQL khắc phục điểm yếu của của REST API bởi REST có tính chất dựa trên tài nguyên cố định, ví dụ:

GET /articles/1?include=author.name,author.email,likes.user.name

Như truy vấn trên thuộc loại liên kết nhiều bảng, REST API cho articles sẽ xử lý khá nhiều và không được linh động. Đối với GraphQL thì sẽ như sau:

{
  articles(id:1) {
    title,
    content,
    author {
      name,
      email
    },
    likes {
      user {
        name
      }
    } 
  }
}

Với GraphQL, chúng ta quy định chỉ trả về title và content cho article, rất linh động và không bị thừa dữ liệu, hơn nữa cấu trúc trên nhìn khá rõ ràng mạch lạc.

Cũng giống như REST, GraphQL hoàn toàn có thể create, update, delete, nhưng với cấu trúc sáng sủa và cấu trúc phân tầng nên dễ dàng cho lập trình viên phía client.

Có nên áp dụng GraphQL không

Bạn nên áp dụng GraphQL nếu bạn có định hướng phát triển nhiều dòng sản phẩm, vì đặc tính của GraphQL là phục vụ client, nên càng nhiều client thì GraphQL càng tỏ rõ ưu điểm.

The post GraphQL là gì – Áp dụng như thế nào? appeared first on Fullstack Station.

api/users.js

import { Router } from 'express';
import { ObjectID } from 'mongodb';

const router = new Router();

router.get('/:id', async (req, res, next) => {
  try {
    const db = req.app.locals.db;
    const user = await db.collection('user').findOne({ _id: new ObjectID(req.params.id) }, {
      email: 1,
      firstName: 1,
      lastName: 1
    });

    if (user) {
      user.id = req.params.id;
      res.send(user);
    } else {
      res.sendStatus(404);
    }
  } catch (err) {
    next(err);
  }
});

export default router;

/config.js

export default {
  database: {
    url: 'mongodb://localhost:27017/example'
  }
};

server.js

import express from 'express';
import Promise from 'bluebird';
import logger from 'winston';
import { MongoClient } from 'mongodb';
import config from './config';

const PORT = process.env.PORT || 3000;
const server = express();

server.use('/api/users', require('./api/users'));

server.get('/', (req, res) => {
  res.send('Hello World');
});

MongoClient.connect(config.database.url, { promiseLibrary: Promise }, (err, db) => {
  if (err) {
    logger.warn(`Failed to connect to the database. ${err.stack}`);
  }
  server.locals.db = db;
  server.listen(PORT, () => {
    const { address, port }  = server.address();
    logger.info(`Node.js server is listening at http://${address}:${port}`);
  });
});

Nếu có vấn đề gì không hiểu, vui lòng comment lại, mình sẽ trả lời nhé.

Nguồn: Medium

The post Hướng dẫn kết nối MongoDB cho ứng dụng NodeJs/ExpressJs appeared first on Fullstack Station.