web – Fullstack Station https://fullstackstation.com Hướng dẫn lập trình, thiết kế, lập trình web, thiết kế web, lập trình javascript, lập trình fullstack từ cơ bản đến nâng cao Fri, 10 May 2019 09:11:07 +0000 vi hourly 1 https://wordpress.org/?v=6.8.3 https://fullstackstation.com/wp-content/uploads/2019/08/favicon.ico web – Fullstack Station https://fullstackstation.com 32 32 Docker thực chiến: môi trường phát triển https://fullstackstation.com/docker-thuc-chien-moi-truong-phat-trien/ https://fullstackstation.com/docker-thuc-chien-moi-truong-phat-trien/#comments Fri, 10 May 2019 08:58:11 +0000 http://fullstackstation.com/?p=1540 Có lẽ với bạn bây giờ Docker không còn quá xa lạ (đọc Docker là gì nếu bạn chưa biết) , nhiều người đã sử dụng trong môi trường sản phẩm và trong môi trường phát triển. Mặc dù vậy, docker cũng không phải dễ dàng tiếp cận và sử dụng, nếu bạn vẫn chưa […]

The post Docker thực chiến: môi trường phát triển appeared first on Fullstack Station.

]]>
Có lẽ với bạn bây giờ Docker không còn quá xa lạ (đọc Docker là gì nếu bạn chưa biết) , nhiều người đã sử dụng trong môi trường sản phẩm và trong môi trường phát triển. Mặc dù vậy, docker cũng không phải dễ dàng tiếp cận và sử dụng, nếu bạn vẫn chưa sử dụng docker vì 1 lý do nào đó, bài viết này sẽ dành cho bạn: docker thực chiến thiết lập môi trường phát triển một cách dễ dàng.

Tại sao nên xài docker

Thú thật, mình cũng từng như bạn, không chịu rời bỏ cái môi trường lập trình đang chạy ngon lành trên máy của mình, cho đến một ngày…Đơn giản là đời làm lập trình có nhiều dự án, mỗi dự án yêu cầu môi trường, cấu hình khác nhau, rồi môi trường lập trình trên máy cũng khác. Ví dụ, trên máy dùng VSCode dùng phần rộng PHP đòi phải PHP 7, nhưng dự án A chỉ chạy trên 5.6, dự án B chỉ chạy trên PHP 7.2. Ngoài ra còn có nhiều tổ hợp công nghệ như kết hợp với Mysql hay Postgres, Elasticsearch…không phải mọi thứ đều cài lên máy chạy cùng lúc rất cực để quản lý và không hiệu quả.

Ngoài ra, một số thư viện cài đặt thỉnh thoảng có trục trặc với máy vì phải build lại, việc các thư viện chỉ chạy trên một vài version tương thích thường xuyên xảy ra. Điều này khiến cho bạn mất khá nhiều thời gian cho việc quản lý môi trường lập trình của mình, đây là điều nên tránh, hãy tập trung năng lượng cho công việc chính, còn môi trường phát triển hãy để docker lo.

Giới thiệu Lando

Dev With Lando

Lando là một nền tảng miễn phí, mã nguồn mở, đa nền tảng dựa trên docker dành cho lập trình viên, cải thiện môi trường làm việc bằng cách gom tổ hợp công nghệ bạn sử dụng thành 1 file cấu hình, thiết lập môi trường lập trình dễ dàng hơn bao giờ hết.

Homepage: https://devwithlando.io

Nói một cách ngắn gọn, nếu bạn biết WAMP hoặc MAMP, thì Lando là ông nội của 2 thằng này. Ví dụ lập trình

Các tổ hợp, ngôn ngữ đã được hỗ trợ

Ngôn ngữ

Các ngôn ngữ sau đã được hỗ trợ:

Tổ hợp

Các tổ hợp đã được cấu hình sẵn:

Các dịch vụ

Các dịch vụ sau cũng được hỗ trợ:

Tại sao nên dùng Lando

Nếu bạn tìm thấy một trong các công nghệ, dịch vụ, ngôn ngữ lập trình được hỗ trợ và liệt kê ở trên “quen thuộc” với công việc hàng ngày của mình, thì bạn đã có lý do sử dụng Lando.

Như ví dụ mình có nói ở trên, việc có nhiều dự án quả thật là rất phức tạp để quản lý môi trường lập trình. Mình đảm nhiệm các dự án trong công ty từ nhỏ đến lớn với các ngôn ngữ như Go, Python, Nodejs, PHP thì Go và Python là ít gặp trục trặc nhưng PHP thì nhiều, và nhiều nhất là Nodejs vì Nodejs ra phiên bản mới liên tục. Dự án cũ 2,3 năm trước thì xài công nghệ, phiên bản cũ tới lúc mình cập nhật máy và thư viện liên quan thì khi quay lại dự án cũ nó không chạy :((. Và mất thời gian chỉnh sửa môi trường làm việc như vậy vài lần, đến mức độ mình thấy sợ. Từ khi có Lando, khi muốn chạy dự án nào, chỉ cần: `lando start` là xong.

Các tính năng nổi bật của Lando:

  • Sao chép tương tự môi trường production cho máy bạn
  • Quy chuẩn hoá mọi trường lập trình của đội ngũ đa nền tảng OSX, Window, Linux
  • Tuỳ chỉnh hoặc mở rộng công cụ, cấu hình triển khai
  • Chạy CI test trên máy của bạn.
  • Sử dụng môi trường duy nhất cho tất cả các dự án
  • Tích hợp với nhà cung cấp dịch vụ hosting như Pantheon

Mặc dù bạn có thể nhận ra là Docker Compose cũng có tính năng tương tự, tuy nhiên có một vài sự khác biệt:

  • Lando là một lớp trừu tượng đã làm giảm bớt tính phức tạp khi cấu hình các container bằng cách sử dụng “công thức” (recipes) cho một số stack phổ biến.
  • Lando cung cấp nhiều phương thức giúp lập trình viên chạy những dòng lệnh phức tạp, các bước build, … và tự động hoá các dịch vụ mà không cần tinh chỉnh Dockerfiles
  • Lando quản lý một số tác vụ cài đặt phức tạp được yêu cầu để có một Docker Composer tốt như proxy, nice urls, cross-application netwroking.
  • Ngoài ra, bạn vẫn có thể tuỳ biến dễ dàng Docker Compose.

Nói 1 cách khác, Lando đã giúp đơn giản hoá Docker Compose cho một số tác vụ, stack phổ biến. Chỉ cần 1 câu lệnh, các dịch vụ đi kèm đều được khởi tạo, mất chưa đầy 2 phút là bạn có thể chạy được stack.

Bắt tay vào thực hành Lando

Mình không muốn nói phần này nhiều, chỉ cần sau khi bạn cài đặt Docker, Lando thì bạn chỉ mất 5 phút để tạo 1 dự án WordPress, Laravel, Drupal, Joomla hay LAMP, LEMP bất kỳ chỉ việc sử dụng công thức đã liệt kê ở trên.

5 phút đơn giản chỉ là tạo cái file .lando.yml, đây là file mẫu dùng cho WordPress (dùng với Bedrock/Sage sẽ được giới thiệu ở bài khác)

name: seikeidenron
recipe: wordpress
proxy:                
  nginx:              # Tuỳ chọn: nếu bạn bỏ qua cấu hình này thì Lando sẽ chạy ở seikeidenron.lndo.site
    - seikeidenron.localhost
  theme:              # Tuỳ chọn: ở đây mình phát triển thêm theme của wordpress thì sẽ cần tới node
    - localhost:3000
config:
  php: '7.2'
  via: nginx
  webroot: web
  database: mariadb
  xdebug: true

# Đoạn này cần để thiết lập node
services:
  theme:
    type: node
    services:
      ports:
        - 3000:3000
tooling:
  yarn:
    service: theme

Xong file trên thì chỉ cần lando start là mọi thứ chạy, quá nhanh quá nguy hiểm.

Fullstack Station Tips

Các công thức có sẵn đa phần đều có phần database riêng lẻ, tuy nhiên nếu các dự án của bạn đều sử dụng mysql chẳng hạn, thì hãy sử dụng database server của máy bạn, chứ không phải database server của docker. Như vậy thì việc sử dụng Lando sẽ trở nên nhanh chóng hơn, nhất là đối với các dự án đang giai đoạn lập trình. Ở phần kết nối db thì thay vì bạn dùng localhost thì hãy đổi thành host.docker.internal, đây chính là máy host, máy chính của bạn.

The post Docker thực chiến: môi trường phát triển appeared first on Fullstack Station.

]]>
https://fullstackstation.com/docker-thuc-chien-moi-truong-phat-trien/feed/ 1
Progressive Web App (PWA) ảnh hưởng đến tương lai ngành lập trình web như thế nào https://fullstackstation.com/su-anh-huong-progressive-web-app-pwa-den-tuong-lai-nganh-lap-trinh-web/ https://fullstackstation.com/su-anh-huong-progressive-web-app-pwa-den-tuong-lai-nganh-lap-trinh-web/#comments Thu, 18 May 2017 08:13:34 +0000 https://www.businesscard.vn/blog/?p=920 Progressive Web App (PWA) là gì? Progressive Web App – PWA là tổ hợp đặc tính kỹ thuật để phát triển ứng dụng web cấp tiến/hiện đại do kỹ sư của Google phát triển từ 2015, sử dụng các tính năng tiên tiến của web để xây dựng ứng dụng web giống với ứng dụng […]

The post Progressive Web App (PWA) ảnh hưởng đến tương lai ngành lập trình web như thế nào appeared first on Fullstack Station.

]]>
Progressive Web App (PWA) là gì?

Progressive Web App – PWAtổ hợp đặc tính kỹ thuật để phát triển ứng dụng web cấp tiến/hiện đại do kỹ sư của Google phát triển từ 2015, sử dụng các tính năng tiên tiến của web để xây dựng ứng dụng web giống với ứng dụng di động mà ứng dụng web thường không làm được: ví dụ gởi thông báo (push notification) mà không cần mở trình duyệt. Progressive ở đây còn được hiểu là lũy tiến (không ngừng phát triển) khi người sử dụng ứng dụng web đó càng lâu theo thời gian, thì ứng dụng web đó càng trở nên mạnh mẽ hơn.

PWA giúp tải trang web một cách nhanh chóng, thậm chí trên mạng chậm không ổn định (3G), gửi thông báo (push notification), có thể cài đặt biểu tượng lên màn hình điện thoại như một biểu tượng ứng dụng di động, có thể hoạt động ngoại tuyến (offline/không phụ thuộc mạng internet), và có thể chạy được trên mọi trình duyệt.

Mặc dù Chrome đang chiếm hơn 50% thị phần, thì đối với PWA tiêu chí đầu tiên là chạy được trên tất cả các trình duyệt.

Đặc tính của PWA

Một trang web được gọi là PWA khi thỏa mãn các điều kiện sau đây:

  • Tiến bộ (Progressive) – hoạt động đối với mọi người dùng mà không quan tâm trình duyệt được sử dụng (nói ngắn gọn là chạy được trên mọi trình duyệt) vì nó được xây dựng với nguyên lý cốt lõi là tiến bộ tăng cường.
  • Responsive – phù hợp với bất kỳ kích cỡ màn hình: máy tính để bàn, điện thoại di động, máy tính bảng hay bất cứ thiết bị nào trong trong lai – có sử dụng trình duyệt web 🙂
  • Khả năng kết nối độc lập (Connectivity independent) – khả năng kết nối được tăng cường bởi service-workder giúp ứng dụng web có thể hoạt động offline hoặc trên mạng chất lượng thấp.
  • App-like – như một ứng dụng di động để người dùng tương tác bao gồm giao diện, tương tác và trình đơn điều hướng (người dùng sử dụng các trình đơn này để sử dụng thay cho các trình đơn điều hướng (Back/Forward) của trình duyệt)
  • Làm mới (Fresh) – luôn luôn cập nhật nhờ service-worker
  • An toàn (Safe) – sử dụng HTTPS để ngăn chặn snooping và đảm bảo nội dung đã không bị giả mạo.
  • Dễ dàng phát hiện (Discoverable) –  là nhận biết như một “ứng dụng” nhờ W3C đăng ký kê khai và dịch vụ, cho phép công cụ tìm kiếm dễ dàng
  • Re-engageable – kết nối người dùng dễ dàng hơn với tính năng.
  • Installable – cho phép người dùng đánh dấu ứng dụng web lên trên màn hình điện thoại để dễ dàng truy cập lại sau đó, bỏ qua sự rắc rối của việc cài đặt ứng dụng.
  • Linkable – Dễ dàng chia sẻ thông qua URL, ứng dụng di động không thể làm được điều này.

PWA đối với tương lai của lập trình web và ứng dụng di động

Có thống kê cho rằng, ứng dụng di động mất đi 20% người sử dụng tiềm năng khi phải mất nhiều thao tác (tìm kiếm trên chợ ứng dụng, cài đặt, mở ứng dụng) mới có thể dùng được thứ họ cần. Đối với PWA, chỉ cần mở đường dẫn ở trình duyệt là có thể sử dụng như 1 ứng dụng bình thường. Khi người dùng mở lại đường dẫn cũ (hay vào lại website) – “bằng trình duyệt“, trang web sẽ đề nghị người dùng cài đặt 1 biểu tượng lên màn hình điện thoại, và kể từ lúc này người dùng sử dụng biểu tượng ở màn hình điện thoại để mở “ứng dụng” mà “không cần trình duyệt“, nghĩa là sẽ không thấy khung chứa đường dẫn, không có bookmark, các nút điều hướng…, tất cả chỉ là nội dung/giao diện của ứng dụng web “phủ toàn bộ màn hình điện thoại”, như hình dưới đây:

PWA của Financial Times từ biểu tượng trên màn hình điện thoại

Hình bên trái ứng dụng PWA của Financial Times mình mở từ biểu tượng ở màn hình điện thoại, hình bên phải là mở bằng trình duyệt sẽ bao gồm những nút bấm có sẵn của trình duyệt. Như vậy, từ đây bạn có thể sử dụng như một ứng dụng trên điện thoại một cách bình thường mà không hề có sự khác biệt nào so với một ứng dụng native, vẫn có thể gởi thông báo (push notification), lưu trữ (ví dụ tin tức bạn quan tâm, hoặc hình ảnh, video…).

PWA kết hợp những ưu điểm của web và ứng dụng di động để tạo ra web thế hệ mới mạnh mẽ, đặc biệt nhất là đối với những trang web cung cấp thông tin. Mình sử dụng thường xuyên các ứng dụng sau để đọc tin: Thanh Niên, Tuổi Trẻ, Dân Trí, VNExpress, trong các ứng dụng này thì VNExpress có thao tác mượt và giao diện tốt nhất, sau đó là ứng dụng của báo Tuổi Trẻ, còn ứng dụng của báo Thanh Niên thì mình không thể xem được nội dung bài viết – có lẽ bị một đoạn mã quảng cáo nào đó cấm truy cập từ nước ngoài, báo Dân Trí thì giao diện không được chuyên nghiệp, bắt mắt cho lắm…và điều mình muốn nói ở đây là họ đã sử dụng một nguồn lực có thể nói là lớn để xây dựng ứng dụng di động (mình theo dõi báo Thanh Niên từ lâu và thấy không dưới 3 lần thay đổi/cập nhật lớn ứng dụng – nhưng tác dụng thì không cảm thấy tăng mấy), và theo mình là lãng phí hơn so với việc xây dựng ứng dụng web PWA. Hầu hết các chức năng của HTML5 hiện nay, đều đáp ứng các chức năng mức cần thiết cho một ứng dụng trên điện thoại di động, do vậy việc xây dựng 1 ứng dụng di động là cần xem xét kỹ.

Mình từng suy đoán “React Native là tương lai của lập trình ứng dụng di động“, nhưng với sự mạnh mẽ của PWA có thể sẽ chiếm 1 thị phần không nhỏ trong thời gian tới trong lĩnh vực lập trình ứng dụng di động, mặc dù PWA vẫn có một số yếu điểm khi so với ứng dụng native:

  • Tài nguyên trong ứng dụng di động được đóng gói sẵn, do vậy sẽ ít tốn thời gian hơn với PWA, nên sẽ chạy nhanh hơn
  • Thiếu các chức năng đặc trưng của thiết bị như NFC, Bluetooth, Gia tốc kế, con quay hồi chuyển…
  • Không được phép truy cập danh bạ, mở khóa màn hình điện thoại…

Các ông lớn trình duyệt web, họ nghĩ gì?

Đối với Safari/iOS thì hạn chế còn nhiều hơn (thanks to whatwebcando.today):

Tuy nhiên, Apple cũng đang suy nghĩ về kế hoạch để có thể đưa Service Worker vào lõi của trình duyệt Safari, nhưng như bạn có thể thấy với PWA của Financial Times , trên iOS vẫn sử dụng được một cách bình thường (họ không sử dụng Service Worker, họ đã sử dụng AppCache từ lâu, nên mình nghĩ họ đang tiếp tục sử dụng AppCache), do vậy không cần thiết phải lo là bạn sử dụng PWA có chạy được trên iOS hay không, vấn đề là phải cần nhiều nguồn lực hơn một chút – nhưng so với việc  xây dựng ứng dụng di động thì không là gì cả. Còn đối với Chrome, bạn không cần phải lo nghĩ, luôn luôn đáp ứng PWA 100%!

Đối với ứng dụng Hybrid

Đối với những tính năng mà PWA đang có, nếu bạn đang có kế hoạch xây dựng ứng dụng di động hybrid (dựa trên Cordova/Phonegap chẳng hạn) thì bạn cần dừng lại, hãy xem bạn đang xây dựng ứng dụng gì, PWA có đáp ứng được không? Về cơ bản, ứng dụng Hybrid được bao bọc bởi trình duyệt web, và được cung cấp thêm các API để tương tác với hệ điều hành mà web không làm được, nhưng thực tế là hầu hết ứng dụng sử dụng các API đó không nhiều, trong khi đó việc build ra ứng dụng hybrid thực tế cũng không hề dễ dàng, bạn phải biết build, code signing, cửa hàng ứng dụng, xây dựng hệ thống gởi thông báo (push notification)…

Cá nhân mình cho rằng, thời của ứng dụng Hybrid sắp qua, nếu muốn lập trình:

Fullstack Station Tips

Với những tính năng mạnh mẽ và tiện lợi mà PWA mang lại, cùng với sự hỗ trợ tích cực từ Google, cũng như động thái đáng ghi nhận từ Apple sức mạnh của Trình duyệt web ngày càng tăng, thì PWA sẽ mang lại tương lai tươi sáng cho những trang web cung cấp thông tin lớn, và đó chính là cơ hội cho lập trình viên web biết nắm bắt cơ hội này. Mình tin chắc rằng, khi bạn nắm được những kiến thức, kinh nghiệm mà PWA yêu cầu, thì sẽ có cơ hội để gia nhập những công ty lớn, vì chỉ họ mới có nhu cầu, nguồn lực để làm ứng dụng theo PWA được mà thôi.

Tham khảo

https://medium.com/dev-channel/why-progressive-web-apps-vs-native-is-the-wrong-question-to-ask-fb8555addcbb

https://ada.is/blog/2016/06/01/yet-another-progressive-webapp-post/

https://www.smashingmagazine.com/2016/08/a-beginners-guide-to-progressive-web-apps/

The post Progressive Web App (PWA) ảnh hưởng đến tương lai ngành lập trình web như thế nào appeared first on Fullstack Station.

]]>
https://fullstackstation.com/su-anh-huong-progressive-web-app-pwa-den-tuong-lai-nganh-lap-trinh-web/feed/ 5