Frontend

Mobile app đang chiếm hơn 50% traffic internet toàn cầu. Dù bạn là web developer hay backend, sớm muộn cũng sẽ phải làm việc với mobile team. Hiểu đúng thuật ngữ giúp bạn communicate hiệu quả và chọn đúng tech stack. Let’s go! 📱 🔹 Loại ứng dụng English IPA Tiếng Việt Example native /ˈneɪtɪv/ ứng dụng gốc — viết bằng ngôn ngữ riêng của platform A native iOS app built with Swift gives the best performance and UX. hybrid /ˈhaɪbrɪd/ lai — kết hợp web và native trong cùng một app The team chose a hybrid approach using Ionic to reuse existing web code. cross-platform /krɔːs ˈplætfɔːrm/ đa nền tảng — một codebase chạy trên nhiều OS React Native enables cross-platform development with a single JavaScript codebase. responsive /rɪˈspɑːnsɪv/ đáp ứng — tự điều chỉnh giao diện theo kích thước màn hình Make sure the landing page is responsive so it looks good on both mobile and desktop. 🔹 Tính năng & Tương tác English IPA Tiếng Việt Example push notification /pʊʃ ˌnoʊtɪfɪˈkeɪʃən/ thông báo đẩy — tin nhắn gửi đến thiết bị ngay cả khi app không mở Enable push notifications to alert users when their order has been shipped. deep link /diːp lɪŋk/ liên kết sâu — URL mở thẳng đến màn hình cụ thể trong app The marketing email uses a deep link to take users directly to the product page in the app. gesture /ˈdʒɛstʃər/ cử chỉ — thao tác chạm/vuốt trên màn hình Implement a swipe gesture to let users delete items from the list. WebView /ˈwɛbvjuː/ trình duyệt nhúng — hiển thị nội dung web bên trong native app The terms and conditions page is loaded in a WebView instead of a native screen. 🔹 Phát triển & Phân phối English IPA Tiếng Việt Example app store /æp stɔːr/ cửa hàng ứng dụng — nơi phân phối app (Apple/Google) Submit the new version to the app store and wait for the review process. APK /ˌeɪ.piːˈkeɪ/ Android Package — file cài đặt ứng dụng Android Share the debug APK with the QA team for testing before release. IPA /ˌaɪ.piːˈeɪ/ iOS App Archive — file cài đặt ứng dụng iOS Upload the IPA file to TestFlight so beta testers can install it. offline-first /ˈɔːflaɪn fɜːrst/ ưu tiên hoạt động offline — app hoạt động tốt khi không có mạng The note-taking app follows an offline-first approach, syncing data when connection returns. hot reload /hɑːt rɪˈloʊd/ tải nóng — cập nhật code ngay lập tức không cần restart app Flutter’s hot reload lets you see UI changes in under a second during development. 💡 Mẹo ghi nhớ Native vs Hybrid vs Cross-platform: Native = đồ may đo (đẹp nhất, đắt nhất). Hybrid = web nhét vào khung native. Cross-platform = một bộ code chạy khắp nơi (React Native, Flutter). APK vs IPA: APK = Android, IPA = iOS. Nhớ: APK → Android, IPA → iPhone. Deep link vs URL: URL mở trên browser, deep link mở thẳng trong app. Cùng format nhưng khác destination! 📝 Bài tập Điền từ thích hợp vào chỗ trống: ...

Frontend là nơi user nhìn thấy và tương tác trực tiếp — một button lag, một layout vỡ là user bỏ đi ngay. Với sự phổ biến của React, Vue, Angular, việc hiểu thuật ngữ frontend bằng tiếng Anh là bắt buộc nếu bạn muốn đọc docs, trao đổi với team quốc tế, hay phỏng vấn remote. Let’s dive in! 🎨 🔹 Component & Rendering English IPA Tiếng Việt Example component /kəmˈpoʊnənt/ thành phần giao diện có thể tái sử dụng Each page is built from reusable components like Header, Footer, and Sidebar. render /ˈrɛndər/ hiển thị giao diện lên màn hình React renders the component tree whenever state changes. DOM /dɒm/ Document Object Model — cây cấu trúc của trang web JavaScript manipulates the DOM to update content without reloading the page. virtual DOM /ˈvɜːrtʃuəl dɒm/ bản sao nhẹ của DOM thật, dùng để tối ưu cập nhật React uses a virtual DOM to compare changes before updating the real DOM. 🔹 State & Data Flow English IPA Tiếng Việt Example state /steɪt/ trạng thái dữ liệu của component When the user clicks the button, the state updates and the counter increments. props /prɒps/ dữ liệu truyền từ component cha sang con The parent passes the user’s name as props to the ProfileCard component. hook /hʊk/ hàm đặc biệt để dùng state và lifecycle trong function component Use the useState hook to manage local state in a functional component. event handler /ɪˈvɛnt ˈhændlər/ hàm xử lý sự kiện từ user Attach an onClick event handler to the button to trigger the form submission. 🔹 Lifecycle & Patterns English IPA Tiếng Việt Example lifecycle /ˈlaɪfˌsaɪkəl/ vòng đời component — từ mount đến unmount Fetch API data in the componentDidMount lifecycle method. hydration /haɪˈdreɪʃən/ gắn logic JS vào HTML đã render từ server After server-side rendering, hydration attaches event listeners to the static HTML. responsive /rɪˈspɒnsɪv/ thiết kế tương thích mọi kích thước màn hình The layout must be responsive so it works on both mobile and desktop. 🔹 Build & Optimization English IPA Tiếng Việt Example bundler /ˈbʌndlər/ công cụ đóng gói code thành file tối ưu We switched from Webpack to Vite as our bundler for faster build times. tree shaking /triː ˈʃeɪkɪŋ/ loại bỏ code không sử dụng khỏi bundle Enable tree shaking to remove unused utility functions and reduce bundle size. CSS-in-JS /ˌsiː.ɛs.ˈɛs ɪn ˌdʒeɪ.ˈɛs/ viết CSS trực tiếp trong JavaScript We use styled-components, a CSS-in-JS library, to scope styles to each component. 💡 Mẹo ghi nhớ State vs Props: State = ví tiền của bạn (tự quản lý, tự thay đổi). Props = tiền bố mẹ cho (nhận từ bên ngoài, không tự đổi được). Muốn thay props? Phải nhờ component cha thay đổi. DOM vs Virtual DOM: DOM = nhà thật (sửa tốn công). Virtual DOM = bản vẽ nhà (vẽ thử trước, chỉ sửa chỗ khác biệt). Đó là lý do React nhanh! Hydration — nghĩa gốc là “cấp nước”. Tưởng tượng HTML từ server là cây khô, JS là nước — hydration làm cây sống lại (có tương tác). 📝 Bài tập Điền từ thích hợp vào chỗ trống: ...