javascript hybird-apps meteor front-end - It costs 8 mins to read

Đây là những ghi chép nhanh trong quá trình tìm hiểu về Meteor Framework, nếu có thời gian mình sẽ hệ thống và biên tập lại kỹ hơn. Mục đích mình muốn học nhanh Meteor là để viết Hybird App cho một cuộc thi bên Vietnamworks.com

Meteor

Nguồn tham khảo chính để biên soạn và tổng hợp nên tài liệu này:

Nếu bạn quan tâm đến vấn đề Coding Style Guide cho Meteor thì đây là một nguồn đáng tham khảo:

Một số Development Tools cần chuẩn bị

Meteor là gì và ưu điểm của Meteor

Meteor là một nền tảng được xây dựng trên môi trường Node.js, cho phép tạo ra các ứng dụng web theo thời gian thực. Nó đảm bảo việc đồng bộ thông tin giữa cơ sở dữ liệu của ứng dụng và giao diện người dùng.

Chính vì được xây dựng trên nền Node.js nên Meteor sử dụng JavaScript trên cả máy khách và máy chủ. Hơn thế nữa, Meteor còn cho phép chia sẻ code giữa hai môi trường này.

Có thể nói, Meteor là một nền tảng vừa đơn giản lại mạnh mẽ khi xóa bỏ hầu hết mọi phiền phức và cạm bẫy thông thường hay gặp phải khi phát triển ứng dụng web.

Tại sao nên sử dụng Meteor?
7 nguyên tắc nền tảng của Meteor (Hay các Ưu điểm của Meteor)

  1. Data on the Wire. Meteor doesn’t send HTML over the network. The server sends data and lets the client render it.

  2. One Language. Meteor lets you write both the client and the server parts of your application in JavaScript.

  3. Database Everywhere. You can use the same methods to access your database from the client or the server.

  4. Latency Compensation. On the client, Meteor prefetches data and simulates models to make it look like server method calls return instantly.

  5. Full Stack Reactivity. In Meteor, realtime is the default. All layers, from database to template, update themselves automatically when necessary.

  6. Embrace the Ecosystem. Meteor is open source and integrates with existing open source tools and frameworks.

  7. Simplicity Equals Productivity. The best way to make something seem simple is to have it actually be simple. Meteor’s main functionality has clean, classically beautiful APIs.

Tham khảo tại:

Seven Principles of Meteor Framework

Tổng quan về Meteor Framework

Điều kiện bắt đầu học Meteor:

Cách tốt nhất để bắt đầu là nên dùng thử Meteor bằng cách làm theo bộ Tutorial của Meteor trên trang chủ. Bạn có thể đi qua nhanh, hiểu được nó hoạt động như thế nào mà không cần phải biết sâu về các khái niệm của Meteor.

https://www.meteor.com/try (Nếu không hoặc chưa muốn cài đặt Meteor vào máy tính, bạn có thể sử dụng Cloud IDE như Nitrous.io)

Tài liệu học Meteor

Sau khi lướt qua Meteor Tutorial ở Link trên, Bạn sẽ cài đặt được Meteor vào máy tính, cài đặt Java SDK, Android hoặc iOS Platform (nếu đang sử dụng MacOSX) và có ứng dụng đơn giản đầu tiên - Một “to do lists” viết bằng Meteor

What’s next:

Xem thêm Bài viết Meteor Learning Resources trên notes.viphat.work.

Một số khái niệm cần nắm khi làm quen với Meteor:

Mình xin liệt kê một số điểm đặc biệt của Meteor, Phần này còn khá sơ sài, mình sẽ được bổ sung và sắp xếp lại sau.

Giải thích thêm về Latency compensation

So why do we want to define our methods on the client and on the server? We do this to enable a feature called latency compensation.

When you call a method on the client using Meteor.call, two things happen in parallel:

The client sends a request to the server to run the method in a secure environment, just like an AJAX request would work A simulation of the method runs directly on the client to attempt to predict the outcome of the server call using the available information What this means is that a newly created task actually appears on the screen before the result comes back from the server.

If the result from the server comes back and is consistent with the simulation on the client, everything remains as is. If the result on the server is different from the result of the simulation on the client, the UI is patched to reflect the actual state of the server.

With Meteor methods and latency compensation, you get the best of both worlds — the security of server code and no round-trip delay.

Meteor Package (Tương tự hệ thống Gem của Ruby và npm Package của NodeJS)

Không giống như cách thêm vào tài nguyên từ bên ngoài theo cách “truyền thống”, chúng ta đã không phải liên kết tới bất kỳ tập tin CSS hoặc JavaScript, vì Meteor sẽ quản lý tất cả những việc đó cho chúng ta! Đó chỉ là một trong nhiều ưu điểm của Package trong Meteor.

Add Package Bootstrap 3 vào Project Meteor

meteor add mizzao:bootstrap-3

Add Package Underscore

meteor add underscore

Vậy hỏi, chúng ta sẽ tìm các Package cho Meteor ở đâu? - http://atmosphere.meteor.com/

Meteor có thể sử dụng các Package của NodeJS (Không sử dụng trực tiếp, chỉ có thể sử dụng gián tiếp thông qua các Meteor Package)

Câu hỏi bài tập là Có bao nhiêu loại Package trong Meteor, hãy nhớ lại loạt bài Tutorial của Meteor.com đã hướng dẫn bạn sử dụng những Package nào?

File Structure trong một Ứng dụng Meteor

/client Any files here are only served to the client. This is a good place to keep your HTML, CSS, and UI-related JavaScript code.

/server Any files in this directory are only used on the server, and are never sent to the client. Use /server to store source files with sensitive logic or data that should not be visible to the client.

/public Files in /public are served to the client as-is. Use this to store assets such as images. For example, if you have an image located at /public/background.png, you can include it in your HTML with <img src='/background.png'/> or in your CSS with background-image: url(/background.png). Note that /public is not part of the image URL.

/private These files can only be accessed by server code through Assets API and are not accessible to the client.

Xem thêm - http://docs.meteor.com/#/full/structuringyourapp

Các Files ngoài những thư mục được gọi là Special Directories kể trên, đều được gọi ở cả 2 phía Server và Client - do đó bạn nên wrap chúng trong Meteor.isClient hoặc Meteor.isServer.

(/lib được dùng như common code giữa client và server)

Example File Structure

lib/                      # common code like collections and utilities
lib/methods.js            # Meteor.methods definitions
lib/constants.js          # constants used in the rest of the code

client/compatibility      # legacy libraries that expect to be global
client/lib/               # code for the client to be loaded first
client/lib/helpers.js     # useful helpers for your client code
client/body.html          # content that goes in the <body> of your HTML
client/head.html          # content for <head> of your HTML: <meta> tags, etc
client/style.css          # some CSS code
client/<feature>.html     # HTML templates related to a certain feature
client/<feature>.js       # JavaScript code related to a certain feature

server/lib/permissions.js # sensitive permissions code used by your server
server/publications.js    # Meteor.publish definitions

public/favicon.ico        # app icon

settings.json             # configuration data to be passed to meteor --settings
mobile-config.js          # define icons and metadata for Android/iOS

Đọc thêm tại http://docs.meteor.com/#/full/structuringyourapp

Thứ tự Load File của Meteor

Rất quan trọng nếu bạn muốn hiểu cách một ứng dụng Meteor làm việc như thế nào?

  1. HTML template files are always loaded before everything else
  2. Files beginning with main. are loaded last
  3. Files inside any lib/ directory are loaded next
  4. Files with deeper paths are loaded next
  5. Files are then loaded in alphabetical order of the entire path

Chúng ta nên đề cập đến việc một số thư mục này là đặc biệt. Khi nói đến mã chạy, Meteor có một vài quy tắc:

Và cũng sẽ hữu ích nếu biết làm thế nào Meteor quyết định thứ tự nạp các file:

Mình tạm kết thúc phần tìm hiểu ở đây.