Đối với những ai không phải nhà phát triển web, thì các khái niệm như phát triển Front-End hay Back-End có thể khiến bạn thắc mắc và khó hiểu.  Như các framework, các thư viện, API, sẽ khiến cho người mới bắt đầu với Web Front End cảm thấy bối rối. Sau đây sẽ là bài hướng dẫn cho người mới biết thêm về phát triển Web.

Để giúp bạn từ một người mới trở thành một chuyên gia về phát triển front-end, tụi mình đã viết một vài bài viết về lĩnh vực phát triển web này theo cách mà những người không phải là nhà phát triển cũng có thể hiểu được. Bạn sẽ không chỉ biết phát triển front-end là gì và các kỹ sư front-end làm gì, mà bạn còn biết những ưu và nhược điểm của các công cụ khác nhau mà họ sử dụng, cách đưa ra quyết định về framework nào là tốt nhất cho ứng dụng của bạn và thiết kế  mà bạn dày công nghĩ ra có thể bước vào đời thực.

CƠ BẢN CỦA: FRONT- END VS. BACK-END

Để hiểu về front-end, thì đồng thời bạn cũng phải hiểu về back-end. Front-End, còn được gọi là lập trình bên phía máy khách, là những gì xảy ra trong trình duyệt của bạn. Nó có tất cả mọi thứ người dùng nhìn thấy và tương tác. Phần cuối, còn được gọi là lập trình bên phía máy chủ là những gì xảy ra trên máy chủ và cơ sở dữ liệu. Có cả một hệ thống hoạt động khi các khánh hàng sử dụng hay tương tác trên máy tính của họ.

Dưới đây là một vài hình ảnh để cho bạn biết về hướng phát triển Front-End

 

hướng dẫn

Nguồn: Upwork

Bạn có thể thấy phía máy chủ quản lý tất cả các yêu cầu khách hàng giúp cho trang web hoạt động trơn tru. Front-end xử lý các yêu cầu người dùng đó sau đó chuyển chúng sang phía máy chủ. Quá trình này thường xảy ra trong một vòng lặp liên tục của các “yêu cầu và phản hồi”.

Giờ các bạn thử nhìn vào một bức tranh lớn hơn. Để hiểu thêm một chút về quá trình và cách thức back-end hoạt động và được thiết lập thì hãy nhìn vào sơ đồhướng dẫn bên dưới nhé.

hướng dẫn

Nguồn: Upwork

 

Nhìn vào sơ đồ hướng dẫn trên thì ta có thể thấy được rằng back-end là sự kết hợp của máy chủ, cơ sở dữ liệu, API và hệ điều hành.

Giờ bạn đã hiểu sơ bộ về Front-End và Back-End rồi thì chúng ta sẽ đi sâu hơn một xíu về Front-End và công nghệ sử dụng để nó hoạt động nhé.

CƠ BẢN VỀ CÔNG CỤ & CÔNG NGHỆ FRONT-END:

Trước đây, các trang web là các trang web văn bản tĩnh và thêm một số hình ảnh động là xong. Chỉ cần nhờ vào HTML và CSS. Nhưng nếu so sánh với web ngày xưa và web ngày nay, web ngày nay thì chúng ta có thể tương tác với trên web, điền form, phát video và tải các phần của các trang web khác trong một trang mà không cần nhấp refresh?

Điều quan trọng cần lưu ý là sự phát triển của giao diện người dùng đã thay đổi đáng kể trong vòng 10 đến 15 năm qua với sự phát triển bùng nổ của JavaScript, vốn không phổ biến ở Front-End  như bây giờ, hoặc thậm chí là phổ biến ở Back-End. Trước khi JavaScript trở nên phổ biến, thì ngay cả một nhà phát triển PHP cũng có thể làm công việc của một Front-End điều mà bây giờ ít thấy.

Một số công nghệ cốt lõi được sử dụng trong phát triển web front-end bao gồm:

HTML: Trụ cột.

HTML là cách mọi trang web trên web được tổ chức.

HTML5 là đặc tả HTML mới nhất. Tìm hiểu đầy đủ về công nghệ web phát triển này và tìm hiểu về một trong những tính năng thú vị của nó, Canvas.

Chúng ta biết HTML là một ngôn ngữ đánh dấu, nhưng ngôn ngữ đánh dấu là gì? Các bạn có thể tham khảo thêm ở một số bài viết sau:

Hướng dẫn 5 lý do bạn nên học HTML CSS – Update 2019

Hướng Dẫn Học HTML Và CSS Cơ Bản Toàn Tập Cập Nhật 2019

Hướng dẫn Tầm quan trọng của HTML và CSS trong SEO

JavaScript: Trình đa nhiệm

Javascript đã từng chỉ là một công cụ bổ sung để làm cho các trang web trông “sinh động” hơn, nhưng bây giờ nó là công nghệ xài trong web Front-End phổ biến nhất. JavaScript không chỉ là một ngôn ngữ, mà nó là cả một hệ sinh thái mở rộng với các frameworks, các tác vụ,phía máy chủ và hơn thế nữa. Đi sâu vào công nghệ mặt trước cơ bản này với các bài viết như:

Hướng dẫn Javascript dành cho người mới bắt đầu.

Hướng dẫn Javascript – Ngôn ngữ lập trình của thời đại

Hướng dẫn Tìm hiểu về các hàm thông dụng trong Javascript (ES6) và ứng dụng

CSS: Tạo mẫu cho trang Web

Cascading Style Sheets (CSS) là cách các nhà phát triển thêm kiểu dáng và hiệu ứng cho trang web. Có thể tham các kiểu CSS tùy biến mà không thay đổi kiểu dáng cơ bản được áp dụng cho toàn bộ trang web.

CSS luôn phát triển. Tìm hiểu những gì mới với phiên bản mới nhất và lớn nhất, CSS3.

Nhiều nhà phát triển front-end sử dụng bộ tiền xử lý CSS để viết nhiều dòng CSS nhanh hơn. Tìm hiểu về một phổ biến, Sass.

Tìm hiểu và tìm hiểu về một trong những thông số kỹ thuật gần đây của nó, CSS Grid.

Các khung công tác mặt trước CSS như Foundation hoặc Bootstrap có thể giúp bạn tạo các trang web được đánh bóng trong tích tắc.

Các bạn có thể đọc thêm ở các bài viết sau:

Hướng dẫn CSS Treasure 2019 Part1

Hướng dẫn CSS Treasure 2019 Part2

Hướng dẫn CSS Treasure 2019 Part3

Hướng dẫn CSS Treasure 2019 Part4

AJAX: The Gofer

AJAX (JavaScript không đồng bộ và XML) là một công nghệ được sử dụng để tạo các ứng dụng và trang web động. Nó cho phép một trang cập nhật dữ liệu trong một số thành phần nhất định tách biệt với toàn bộ trang, do đó các phần có thể được làm mới mà không cần tải lại toàn bộ ứng dụng.

JSON là một phần cơ bản của AJAX và cũng là một định dạng truyền dữ liệu thực sự phổ biến mà bạn sẽ gặp rất nhiều khi nói về các chiến lược đầu cuối.

hướng dẫn

Nguồn: Upwork

THIẾT KẾ UI VÀ UX: MANG FRONT-END TỚI MỘT TẦM CAO MỚI

Sẽ thật thiếu sót khi nói về phát triển front-end mà không đề cập đến khía cạnh thiết kế, hai điều đi đôi với nhau trong phát triển trang web và ứng dụng. Nhiều nhà phát triển front-end luôn hợp tác với các nhà thiết kế web có các kỹ năng UI / UX tốt, đồng thời có kiến thức về web Front-End. Nếu một nhà thiết kế biết những gì có thể xảy ra khi code front-end, thì họ có thể thiết kế UIs tương tác, trực quan và ngược lại.

Đi sâu vào nơi giao diện người dùng và thiết kế UX phát triển front-end gặp một số bài viết sau:

Hướng dẫn UI UX là gì? Phân biệt thiết kế UX và thiết kế UI?

Hướng dẫn UX: 6 ngành nghề “chất” nhất khi bạn làm UX

Và nếu các bạn thấy ấn tượng và muốn theo con đường phát triển Web thì Nordic Coder– Trung tâm dạy lập trình uy tín và chuyên nghiệp, đang có khoá Lập trình Front-End cho người mới bắt đầu  rất hay và hấp dẫn. Đồng thời khi các bạn học xong thì Nordic Coder cũng sẽ là cầu nối giúp IT giữa học viên và với các công ty công nghệ hàng đầu Việt Nam sau các khoá học lập trình.