Bài viết được sự cho phép của tác giả Tống Xuân Hoài Vấn đề Khi mới tiếp xúc với Node.js và cũng là lần đầu học cách sử dụng Linux, nodemon là một thư viện mà tôi thường hay sử dụng để phát triển ứng dụng, vì chỉ cần lưu mã thì ngay lập tức nó sẽ "nạp" lại mã mới mà không cần phải "kill" đi bật lại ứng dụng một cách thủ công nữa, tính năng này ngày nay còn được gọi là "hot reload". Sau bước phát triển là bước triển khai. Trong lúc thực hành chạy ứng dụng ở trên máy chủ, loay hoay mãi không biết làm sao để chạy được nó. Nếu dùng cách thông thường là gõ "node index.js" hoặc thậm chí dùng cả nodemon thì cứ mỗi khi thoát khỏi terminal, thoát khỏi máy chủ, thì ứng dụng cũng "bay màu" theo mất. Tôi hiểu rằng ứng dụng sẽ bị thoát nếu như khô [...]

Bài viết được sự cho phép của tác giả Duy Phan Mình sẽ sử dụng lại ví dụ Booking Service Online trong phần trước đó Ở đây mình sẽ tạo ra các isolated service, đồng thời thiết kế để chúng giao tiếp với nhau thông qua một Message Queue. Ở đây mình chọn RabbitMQ làm Message Queue. 1. Triển khai BookingService // booking-service.ts import express from 'express' import amqp from 'amqplib' const app = express() const PORT = 3001 app.use(express.json()) let channel: amqp.Channel const paymentQueue = 'payment_queue' app.post('/booking', async (req, res) => { const { userId, eventId, numberOfSeats } = req.body // Pre-step 1: Validate booking request // Pre-step 2: Save booking request to application database const booking = { userId, eventId, numberOfSeats, bookingReservedSuccessfully: true, } /** * Step 1: Send Booking Request to PaymentService */ if (booking.bookingReservedSuccessfully) { await sendMessageToQueue(paymentQueue, { booking }) } res.json({ message: 'Booking request sent successfully' }) }) async function connectQueue(queue: string) { const connection = await amqp.connect('amqp://localhost') channel = await connection.createChannel() await channel.assertQueue(queue) } async function sendMessageToQueue(queue: string, message: unknown) { await channel.sendToQueue(queue, Buffer.from(JSON.stringify(message))) } app.listen(PORT, async () => { console.log(`BookingService is running on http://localhost:${PORT}`) await connectQueue(paymentQueue) }) BookingService xử lý các yêu cầu HTTP POST để tạo booking mới. BookingService cố gắng đặt trước một chỗ và nếu thành công, nó sẽ gửi mộ [...]

Node.js là một công cụ không thể thiếu đối với lập trình viên nhờ khả năng xử lý bất đồng bộ mạnh mẽ và hiệu suất cao. Tuy nhiên, để tối ưu hóa quá trình phát triển và xây dựng các ứng dụng mạnh mẽ, việc lựa chọn framework phù hợp là vô cùng quan trọng. Bài viết này sẽ giới thiệu và phân tích top 10 framework NodeJS đang được ưa chuộng nhất, giúp các lập trình viên có cái nhìn tổng quan và lựa chọn công cụ phù hợp nhất cho dự án của mình. Vì sao framework NodeJS được nhiều người lựa chọn? Framework Nodejs được nhiều lập trình viên lựa chọn nhờ hiệu suất cao và khả năng mở rộng tuyệt vời. Sử dụng mô hình bất đồng bộ và event-driven architecture, Node.js tối ưu hóa việc xử lý nhiều yêu cầu cùng lúc, giúp tăng cường hiệu năng. Một lợi thế lớn khác là Node. [...]

Bài viết được sự cho phép bởi tác giả Sơn Dương Để học React, bạn có rất nhiều cách như: học qua tài liệu chính chủ, học qua sách, video., khóa học online/offline… Với ReactJS, một trong những cách được ưu chuộng là học qua các dự án ví dụ thực tế. Khi đọc mã nguồn của một dự án, bạn sẽ tìm ra nguyên tắc và phương pháp của tác giải để giải quyết một vấn đề. Điều này sẽ giúp bạn học được kỹ năng phân tích và giài quyết vấn đề trong các dự án thực tế. Bài viết này, mình sẽ giới thiệu 10 dự án ReactJS để bạn tìm hiểu. Nhưng trước khi đọc, bạn đến tìm hiểu cơ bản trước về React. Ít nhất bạn cũng nên biết trước về cú pháp React, states, props, component.v.v… Phương pháp học React qua dự án thực tế Nếu chỉ đơn giản bạn clone một dự án trên github về, bạ [...]

Bài viết được sự cho phép của tác giả Nguyễn Thành Nam Trong thế giới web đầy tính năng ngày nay, việc hướng dẫn người dùng cách sử dụng một trang web hoặc ứng dụng web có thể trở nên khá phức tạp. Vì thế driver.js là một sự lựa chọn hợp lý, nó giúp tạo ra các bước hướng dẫn (tour) tương tác trên trang web của bạn một cách dễ dàng. Trong bài viết này, mình sẽ giới thiệu chi tiết về driver.js và hướng dẫn bạn cách cài đặt cũng như sử dụng thư viện này. I. Giới thiệu về driver.js driver.js là một thư viện JavaScript mã nguồn mở giúp bạn tạo các tour du lịch (tour) và hướng dẫn (guide) tương tác cho trang web của mình một cách đơn giản và hiệu quả. ⚡️ Các ưu điểm nổi bật: Đơn giản: Dễ sử dụng và không yêu cầu phụ thuộc bên ngoà [...]

Bài viết được sự cho phép của tác giả Duy Phan Là developer, chúng ta luôn tìm cách để tiết kiệm thời gian cho các dự án của mình. Đó là lý do tại sao các thư viện được tạo ra để giảm bớt các khó khăn khi triển khai những thứ lặp đi lặp lại. Với các frontend framework như React, việc chia sẻ chức năng chung cho các dự án khác nhau trở nên dễ dàng hơn bao giờ hết. Trong bài viết này, mình sẽ hướng dẫn bạn một số thư viện Date Pickers mà mình thấy thực sự hữu ích. Lưu ý rằng chúng ta sẽ chỉ xem qua các thư viện đã được cập nhật gần đây. Điều này nhằm đảm bảo chúng sẽ hoạt động trơn tru trên dự án của bạn mà không phải tốn quá nhiều thời gian giải quyết các vấn đề. Material UI Date/Time picker Nếu bạn đang sử dụng Material UI làm theme chính trong dự án của mì [...]

Bài viết được sự cho phép của tác giả Sơn Dương Từ trước tới nay, các bạn được học về Node.js đều được bảo là Node.js chỉ xử lý đơn luồng. Tức là tại một thời điểm, chỉ có một Thread được thực hiện. Nói đơn giản cho dễ hiểu: bạn có CPU 8 nhân, 16 threads. Giờ bạn muốn duyệt một 1 triệu records để tìm phần tử lớn nhất. Với node.js, sẽ chỉ có 1 thread của CPU là thực hiện công việc duyệt tìm vì mặc định Node.js là single-thread. 1 thread chạy cắm đầu, 7 threads kia ngồi cười khúc khích. Nhưng với Java, công việc được chia đều ra cho các threads, nên tốc độ sẽ xử lý trong bài toán ví dụ này sẽ nhanh hơn. Đến đây, mình tin là bạn sẽ bật ra thắc mắc: Vậy không có cách nào để Node.js thực hiện đa luồng à? Thế mạnh của Node.js là cơ chế none-blocking I/O, giúp ứng dụng có tốc độ rất nhanh. Tuy nhiê [...]

Bài viết được sự cho phép của tác giả Duy Phan Trong thế giới lập trình, trách nhiệm lớn nhất của chúng ta không phải chỉ làm cho code chạy được, mà còn phải đảm bảo rằng các đoạn code mà chúng ta viết có thể dễ dàng kiểm tra và bảo trì trong một khoảng thời gian dài. [caption id="attachment_62763" align="aligncenter" width="800"] Tạm biệt dirty code trong lập trình JS[/caption] Khi chúng ta bước chân vào thế giới lập trình, chúng ta có thể thấy được những điều hữu ích mà nó đem lại cho hàng triệu người. Chỉ bằng việc thao tác với các đoạn code, lập trình đã giúp cho cuộc sống của chúng ta trở nên dễ dàng hơn. Tuy nhiên, "năng lực lớn đi đôi với trách nhiệm lớn". Trong thế giới lập trình, trách nhiệm lớn nhất của chúng ta không phải chỉ làm cho code chạy được, mà còn phả [...]

AngularJS là gì? Nó có giống các framework khác không? AngularJS là 1 framework front end khá phổ biến hiện nay. Cùng TopDev khám phá kiến thức về AngularJS một cách chi tiết nhất tại bài viết dưới đây. [caption id="attachment_50943" align="aligncenter" width="1200"] AngularJS Là Gì? AngularJS và Angular có khác nhau?[/caption] AngularJS là gì? AngularJS là một framework JavaScript mã nguồn mở, được phát triển bởi Google năm 2009. [caption id="attachment_24488" align="aligncenter" width="575"] AngularJS là một framework được phát triển bởi Google[/caption] AngularJS dùng để xây dựng các ứng dụng web động. Nó được thiết kế để làm cho quá trình phát triển các ứng dụng web dễ dàng và hiệu quả hơn thông qua việc cung cấp các công cụ mạnh mẽ và linh hoạt. AngularJS cho phép các nhà phát triển sử dụng HTML như một ngôn ngữ mẫu và mở rộng cú pháp HTML để biểu diễn các thành phần ứng dụng một cách rõ ràng và dễ hiểu. Kiến trúc AngularJS MVC AngularJS được xây dựng dựa trê [...]

Vấn đề Là một developer chúng ta biết mỗi một đoạn mã được thêm vào thì lại tăng nguy cơ sinh ra lỗi. Có khi mất cả tháng làm một tính năng mới chạy ngon lành trên môi trường development thế nhưng khi lên môi trường production thì lại lỗi!? Những lúc như thế thay vì vò đầu bứt tai đoán xem mình đã làm gì sai thì hãy nhanh chóng vào xem log của hệ thống. Log có thể là của máy chủ, của công cụ Devops hay chính là những dòng log được thêm trong mã. Nói như thế để chúng ta hình dung ra được tầm quan trọng của log, nếu không có log chúng ta sẽ chẳng biết điều gì đang xảy ra nếu chẳng may gặp sự cố. Mà log không phải thích là log đâu, có phải log càng nhiều càng tốt? Log phải có hệ thống, có tổ chức và mang lại một giá trị tương xứng nào đó. Bài viết ngày hô [...]

Bài viết được sự cho phép bởi tác giả Sơn Dương Không biết các bạn thế nào, chứ bản thân mình mỗi khi viết một dòng code nào đó đều nghĩ: “Liệu mình viết code như này đã clean code chưa?”, “Liệu code của mình có khiến ai đó văng tục không nhỉ?”. Tất nhiên, mỗi người sẽ có phong cách và sở thích viết code khác nhau, nhưng nhìn chung là nên tuân theo nguyên tắc dễ đọc, dễ hiểu nhất có thể. Bạn có để ý là trong các ngôn ngữ lập trình nói chung, Javascript nói riêng, các câu lệnh liên quan tới điều kiện như: if..else, switch…case được sử dụng rất nhiều không? Đặc biệt là khối lệnh switch…case, thực sự mình không thích sử dụng khối lệnh này một chút nào, mình có cảm giác nó cứ hard-code kiểu gì ấy. Nhưng với nhiều logic dự án, không dùng không được. Đó là lý do mình [...]

Angular và React là hai công nghệ phổ biến được sử dụng để xây dựng ứng dụng Web phía Frontend, cả hai đều có những tính năng tương đồng cung cấp cho các nhà phát triển một sự lựa chọn đáng giá để xây dựng dự án Web của mình. Bài viết hôm nay chúng ta cùng nhau so sánh giữa Angular và ReactJS xem bạn sẽ quyết định lựa chọn công nghệ nào cho dự án tiếp theo của mình nhé. Tổng quan về Angular và ReactJS Angular được phát triển bởi Google từ năm 2016, nó là bản thiết kế lại hoàn toàn khác với AngularJS (còn được gọi là Angular 1.0 ra mắt từ năm 2010). ReactJS được Facebook (hiện nay là Meta) phát hành và sử dụng từ năm 2013. Cả 2 nền tảng này ngay từ khi ra mắt đã cho thấy nhiều ưu điểm vượt trội cho việc xây dựng ứng dụng đơn trang (Single Page Application) và được đông đảo lập trình viên Frontend lựa chọn làm công nghệ cho dự án [...]

Bài viết được sự cho phép của tác giả Bùi Thị Huyền Một trong những điều quan trọng nhất cần hiểu về React là về cơ bản nó là JavaScript. Điều này có nghĩa là bạn càng giỏi JavaScript thì bạn càng thành công với React. Hãy chia nhỏ 7 khái niệm cơ bản mà bạn nên biết về JavaScript để thành thạo React. Và khi tôi nói những khái niệm này là cần thiết, ý tôi là chúng được sử dụng trong mọi ứng dụng đơn lẻ mà một nhà phát triển React tạo ra, với rất ít hoặc không có ngoại lệ. Học những khái niệm này là một trong những điều quý giá nhất mà bạn có thể làm để tăng tốc khả năng tạo dự án React và trở thành một nhà phát triển React lành nghề, vì vậy hãy bắt đầu. 1. Khai báo hàm và Arrow Functions Cơ sở của bất kỳ ứng dụng React nào là thành phần. Trong React, [...]

Bài viết được sự cho phép của tác giả Sơn Dương Thời gian thấm thoát thoi đưa, nhanh như chó chạy ngoài đồng. Mới ngày nào, đại ca Evan You (tác giả của VueJS) giới thiệu công cụ ViteJS trong năm 2020, giờ đã hơn 3 năm. Đây là công cụ build tool được giới thiệu là vô cùng mạnh mẽ, có tốc độ kinh hoàng, so với Webpack thì webpack chỉ có hít khói. Mới đầu mình cũng chưa muốn tìm hiểu Vite là gì, vì nó còn quá mới, cứ để cho tác giả và cộng đồng trải nghiệm trước. Nhưng đến thời điểm hiện tại, mình cũng đã bị thuyết phục. Thực sự ViteJS dùng rất sướng, tốc độ build thì quá nhanh. Bài viết này, chúng ta cùng tìm hiểu về một frontend build tool đỉnh cao ViteJS – một công cụ có thể thay thế ông già gân Webpack. Để xem Vite là gì đã nhé! Vite là gì? Chắc hẳn ai làm việc với các JS framework như VueJS, ReactJS, Angular… đều biết rằng, ở [...]

Việc tổ chức, sắp xếp các files, thư mục trong một dự án React là vô cùng quan trọng, nó đảm bảo sự thống nhất khi làm việc nhóm, dễ dàng mở rộng, bảo trì source code. Với các bạn chưa có nhiều kinh nghiệm lập trình thì việc đặt tên thư mục, bố trí các cấp bậc folder là điều không dễ dàng; vì thế trong bài viết hôm nay, mình sẽ chia sẻ một vài kinh nghiệm về cách cấu trúc thư mục trong một dự án React để giúp bạn giải quyết vấn đề trên nhé. Cấu trúc 1: Nhóm theo loại file Đối với các dự án vừa và nhỏ, việc đơn giản nhất để bố trí các files vào folders là cách chia chúng theo loại file. Ví dụ như chúng ta có thể để chung các custom hooks vào 1 folder, các React components vào 1 folder khác, … Cách phân chia này tạo ra sự đơn giản và dễ dàng tìm kiếm file bạn cần; đương nhiê [...]