Thư Viện Câu Hỏi Phỏng Vấn

Sự khác biệt cốt lõi:

Khái niệm Optional Chaining:

Bản chất cơ chế hoạt động

• Cordova: Sử dụng mô hình dựa trên WebView truyền thống, giao tiếp giữa mã JavaScript và Native thông qua hệ thống plugin và iframe injection. Quá trình này thường gây ra độ trễ khi ứng dụng phải gọi các tính năng phần cứng liên tục.
• Capacitor: Được phát triển bởi đội ngũ Ionic như một giải pháp thay thế hiện đại cho Cordova. Capacitor sử dụng cơ chế Native Bridge hiện đại, cho phép mã JavaScript giao tiếp trực tiếp với Native APIs thông qua các tiến trình bất đồng bộ tối ưu hơn.

Ưu điểm vượt trội của Capacitor trong Enterprise

1. Quản lý Native Project tốt hơn: Capacitor coi thư mục iOS và Android là mã nguồn gốc của dự án thay vì tự động sinh ra (generate) lại như Cordova. Điều này giúp lập trình viên dễ dàng tùy chỉnh cấu hình native bằng Xcode hoặc Android Studio.
2. Bảo mật và Hiệu năng: Hạn chế tối đa các lỗi bảo mật liên quan đến việc inject iframe và tối ưu hóa tốc độ khởi động ứng dụng (app startup time).
3. Hệ sinh thái Plugin: Hỗ trợ mạnh mẽ các Official Plugins chất lượng cao được bảo trì trực tiếp bởi Ionic Team.

Kinh nghiệm thực chiến cho Junior

Khi chuyển đổi từ Cordova sang Capacitor, cần lưu ý cấu hình lại các file capacitor.config.json hoặc capacitor.config.ts cho chính xác. Tránh việc chỉnh sửa trực tiếp mã nguồn trong thư mục native mà không đồng bộ qua câu lệnh npx cap sync, vì điều này có thể dẫn đến mất mát thay đổi khi build lại dự án.

Khái niệm cơ bản

App Lifecycle trong Ionic quản lý các sự kiện khi ứng dụng chuyển trạng thái hoạt động trên thiết bị di động. Nhờ tích hợp sâu với Capacitor, Ionic cung cấp các API thông qua @capacitor/app để lắng nghe các sự kiện quan trọng.

Cơ chế điều hướng trong Ionic

Ionic xây dựng hệ thống điều hướng dựa trên khái niệm Stack (Ngăn xếp trang). Mỗi khi người dùng chuyển trang, trang mới sẽ được đẩy (push) vào stack và trang cũ sẽ nằm ở phía dưới, tạo hiệu ứng trượt mượt phí giống như ứng dụng Native.

Vấn đề với danh sách lớn

Khi hiển thị hàng nghìn dòng dữ liệu trong một thẻ ion-list, DOM sẽ phải gánh chịu hàng nghìn phần tử HTML, dẫn đến tình trạng giật lag (jank), chậm phản ứng chạm (touch delay) và tốn bộ nhớ trên các thiết bị di động cấu hình thấp.

Bản chất vấn đề

Khi chạy ứng dụng trên trình duyệt web (Browser/Development), các yêu cầu HTTP bị ràng buộc bởi chính sách bảo hiểm CORS của trình duyệt. Tuy nhiên, khi build ra ứng dụng Native (iOS/Android), ứng dụng chạy dưới giao thức file cục bộ (capacitor:// hoặc http://localhost), dẫn đến việc một số Backend API từ chối phản hồi nếu không được cấu hình chính xác.

1. Phân biệt cốt lõi

• Semantic Tags (Thẻ mang ý nghĩa ngữ nghĩa): Các thẻ như <header>, <footer>, <article>, <section>, <nav>, <main> cung cấp thông tin rõ ràng về ý nghĩa của nội dung bên trong cho cả trình duyệt lẫn lập trình viên.
• Non-Semantic Tags (Thẻ không mang ý nghĩa ngữ nghĩa): Các thẻ như <div> và <span> chỉ dùng để gom nhóm hoặc định dạng mà không miêu tả bản chất của nội dung chứa bên trong.

2. Tầm quan trọng đối với dự án Enterprise

• Accessibility (a11y): Các công cụ hỗ trợ người khuyết tật (Screen Readers) dựa vào Semantic Tags để điều hướng và đọc nội dung một cách chính xác.
• SEO Optimization: Các công cụ tìm kiếm như Google ưu tiên phân tích cấu trúc trang web dựa trên ngữ nghĩa của thẻ để đánh giá tầm quan trọng của nội dung.
• Maintainability: Giúp mã nguồn sạch sẽ, dễ đọc và dễ bảo trì khi quy mô dự án mở rộng với hàng trăm lập trình viên cùng tham gia.

3. Ví dụ minh họa

<!-- Không chuẩn Enterprise -->
<div class="header">
  <div class="nav">
    <div class="link">Trang chủ</div>
  </div>
</div>

<!-- Chuẩn Enterprise -->
<header>
  <nav>
    <a href="/">Trang chủ</a>
  </nav>
</header>

4. Kinh nghiệm thực chiến

Ở cấp độ Junior, bạn cần tránh lạm dụng <div> cho mọi thành phần giao diện. Hãy luôn tự hỏi liệu có thẻ HTML5 nào mô tả chính xác hơn cho khối nội dung đang xây dựng hay không.

1. Cơ chế tối ưu hình ảnh

Hình ảnh thường chiếm phần lớn dung lượng tải xuống của một trang web. Việc tối ưu hóa giúp cải thiện chỉ số Core Web Vitals (đặc biệt là LCP - Largest Contentful Paint).

1. Vấn đề render chặn (Render-blocking)

Mặc định, khi trình duyệt gặp thẻ <script> trong quá trình phân tích cú pháp HTML (HTML Parsing), nó sẽ dừng việc phân tích lại, tải tệp JavaScript về và thực thi xong rồi mới tiếp tục, dẫn đến hiệu năng kém.

1. Cơ chế hoạt động của HTML5 Form Validation

HTML5 cung cấp các thuộc tính native validation trực tiếp trên các Form Elements như required, minlength, maxlength, pattern, và type="email"/"url" mà không cần viết JavaScript phức tạp.

1. Khái niệm Open Graph Meta Tags

Open Graph là một giao thức do Facebook phát triển, sau đó được các nền tảng mạng xã hội khác (Twitter, LinkedIn, Zalo...) áp dụng. Nó cho phép các trang HTML biến thành các đối tượng có phong phú thông tin khi được chia sẻ lên mạng xã hội.

Trong GraphQL, sự khác biệt cốt lõi nằm ở mục đích sử dụng và cơ chế thực thi:

Mặc định GraphQL hỗ trợ các Scalar Types nguyên thủy gồm: Int, Float, String, Boolean, và ID. Tuy nhiên, trong các dự án thực tế, lập trình viên thường cần các kiểu dữ liệu phức tạp hơn như DateTime, EmailAddress, hoặc JSON.

Trong GraphQL, mọi trường (field) trong một Type đều có thể nhận các Arguments (tham số truyền vào). Điều này giúp GraphQL vượt trội hơn REST API truyền thống vì client có thể chủ động yêu cầu chính xác dữ liệu cần thiết thông qua các tham số.