Công nghệ trong Front End

Công nghệ trong Front End mới nhất 2017 – xu thế giao diện website mới

5 (100%) 1 vote
Công nghệ trong Front End mới nhất là kiến thức mà mỗi lập trình viên FE cần phải cập nhật thường xuyên. Nhưng liệu chỉ việc cập nhật kiến thức chuyên môn thôi đã đủ cho con đường và sự nghiệp phát triển của bạn?

Bạn là một Front End Developer chính hiệu. Bạn thông thạo cắt HTML/ CSS và cả JavaScript trong tầm tay, chỉ cần một cái búng tay là website xuất hiện đẹp như mơ. Nhưng bạn đã cập nhật xu hướng công nghệ trong Front End mới nhất năm 2017 chưa? Liệu những công nghệ mà bạn vẫn quen dùng đã đủ để bạn tiếp tục thành công trong năm nay? Không có câu trả lời chắc chắn nhưng nếu biết loại công nghệ nào sẽ phát triển trong thời gian tới đảm bảo sẽ giúp bạn có những định hướng đúng đắn hơn cho công việc của mình. Thật ra thì người ta hay nói vậy như là một chân lý để bạn luôn cập nhật những công nghệ mới cho mình, cũng rất ý nghĩa. Để hoàn thành các dự án Front End thuộc dạng siêu khó như Dentsu.com.vn, Sapporovietnam.com.vn, Yamaha-motor.com.vn/khoidaydamme/, không chỉ nhờ kinh nghiệm vững vàng của lập trình viên cao tay mà còn nhờ những năm tháng miệt mài cập nhật công nghệ mới.

Nhưng bấy nhiêu chưa đủ, với cuthtmlcss, một Front End Developer, để phát triển, bạn cần học rất nhiều thứ khác nữa không chỉ học ngôn ngữ lập trình chuyên môn. Và bài viết này tôi sẽ nói nhiều hơn về những hành trang cần thiết mà một chuyên viên thiết kế giao diện người dùng cần phải trang bị cho mình.

Bài viết này dành cho bạn, những kẻ không bao giờ thấy đủ với kiến thức và kinh nghiệm của bản thân.

Công nghệ mới trong Front End năm 2017

Đầu tiên, chúng ta vẫn bàn về các xu hướng Front End được dự báo sẽ “hot” trong năm nay. Về cơ bản, mọi thứ đều như cũ, chỉ có cách chúng ta vận hành sẽ làm nó mới hơn. Chắc chắn rồi vì sứ mệnh của những tên lập trình như chúng ta là làm mới cho đời mà. Phần này tôi sẽ dựa theo một bài khảo sát và nghiên cứu về những công nghệ và ngôn ngữ lập trình mà một Front End Developer đang sử dụng nhiều nhất từ một Blog có tên miền sitepoint dot com. Như ý kiến của chủ thớt, tôi cũng thấy kết quả nghiên cứu không hoàn toàn chính xác để làm căn cứ cho bất kỳ khẳng định nào về loại công nghệ quan trọng nhất, nhưng nó cho thấy hướng sử dụng công nghệ của đa số FE (Front End) Developer trong năm nay.

Chúng ta biết CSS, HTML, và JavaScript, nhưng sâu hơn nữa là gì?

CSS3

Nói chính xác hơn thì truyền thông bây giờ đang hướng về CSS3, công nghệ được phát triển và cải tiến từ CSS của W3C. 63% những người tham gia khảo sát khẳng định họ đang sử dụng CSS ở mức cao cấp, 10% trong số đó lại có kinh nghiệm dưới 1 năm. Rất khó tin để có nhiều chuyên gia cao cấp trong CSS . Nhưng kết quả này lại cho thấy là tầm quan trọng của loại công nghệ này như thế nào trong việc phát triển giao diện người dùng, đặc biệt là khi công nghệ CSS3 có nhiều thay đổi ấn tượng như hiện nay.

CSS Preprocessors

Bạn có đang sử dụng CSS Preprocessors? Chỉ khoảng 14% những người được hỏi bảo rằng họ không sử dụng Preprocessors. Tất nhiên công cụ nào cũng có mặt hạn chế, nhưng tôi nghĩ các Preprocessors đem đến sự thuận tiện rất nhiều cho các FE Developer như chúng ta.

Trong đó, các CSS Preprocessors được sử dụng phổ biến nhất là: Sass, PostCSS, AutoPrefixer, … Một số khác như Less, Stylus cũng được nhiều anh em dùng thử.

CSS Naming Schemes

Những lựa chọn sử dụng phổ biến nhất là Bem, CSS Modules, OOCSS, SMACSS, …

Các công cụ CSS khác

Mặc dù một số công cụ CSS chỉ phù hợp với các phiên bản dự án cũ nhưng vẫn còn được sử dụng tương đối nhiều như Modermizr, Styleint. Tuy nhiên với sự cập nhật mới của các trình duyệt cũng như các cải tiến CSS mới hơn tôi nghĩ trong tương lai không xa các công cụ này cũng sẽ bị đào thải.

JavaScript

Trong công nghệ FE Development không thể thiếu JavaScript, chắc chắn là như vậy. Chúng ta cùng điểm qua các công cụ JavaScript điển hình trong năm nay:

Các thư viện và Frameworks

Jquery đứng đầu danh sách các Frameworks được sử dụng nhiều nhất với 99%. Tiếp đến là React, Lodash, Angular 1, Underscore, Vue.js, Angular 2,…

Frameworks JQuery

Mặc dù sử dụng Frameworks không phải là tất cả những kiến thức mà các lập trình viên cần có, nhưng chúng ta phải khẳng định rằng nó đem lại rất nhiều tiện ích khi cần thiết. Mọi công cụ cũng chỉ để hỗ trợ cho khả năng sáng tạo của bạn và làm mọi thứ trở nên đơn giản hơn.

Task Runners và Module Bundlers

Nói đến JavaScript không thể không nhắc đến hai loại công cụ này.

Với Task Runners, Gulp là kẻ chiến thắng, khi được nhiều lập trình viên sử dụng nhất (trong phạm vi cuộc khảo sát), đơn giản về cách sử dụng hơn có npmScript. Ngoài ra còn có Grunt nữa, nhưng số người sử dụng Grunt đang ngày càng giảm xuống đáng kể.

Module Bundlers đang ngày càng được sử dụng nhiều hơn vào năm 2016, trong đó phổ biến nhất là Webpack, Browerify và RequireJS

ES6 là gì?

Công nghệ ES6

Có thể nói, JavaScript “cân” cả ngành lập trình khi nó ngày càng được sử dụng nhiều ở cả Front End và Back End.

ES6 (ECMAScript 6) ra đời, cung cấp và cải tiến một số chức năng mới tiện ích cho JavaScript, đồng thời giúp code trở nên dễ viết hơn.

Các công cụ JavaScript khác

Testing là quy trình quan trọng và bắt buộc trong lập trình, đảm bảo các phần mềm hoạt động như mong muốn của khách hàng và người sử dụng. Một số công cụ JavaScript hỗ trợ lập trình viên kiểm tra lỗi phổ biến như thiếu ngoặc nhọn {}, quên dấu chấm phẩy ;,…

  • ESLint
  • JSLint
  • JSHint

Một số công cụ phổ biến hỗ trợ Test-Driven Development (TDD) và Behavior-Driven Development (BDD):

  • Mocha
  • Jasmine
  • QUnit
  • Jest
  • Ava

Ngoài ra, npm và TypeScript cũng dần được các lập trình viên sử dụng nhiều hơn để tối ưu việc sử dụng JavaScript của mình.

Node.js

Npm là gì? NPM là viết tắt của Node Package Manager. Node.js là một nền tảng chạy trên môi trường V8 JavaScript Runtime cho phép xây dựng các ứng dụng có tính mở rộng cao. Còn TypeScript là gì? Là dự án mã nguồn mở được phát triển bởi Microsoft. TypeScript giúp bổ sung tùy chọn kiểu tĩnh và lớp hướng đối tượng mà JavaScript hiện chưa làm được.

Ở cuối bài, tác giả khuyên bạn nên học HTML, CSS căn bản trước khi sử dụng JavaScript. Đó là với trường hợp bạn chưa có nhiều kinh nghiệm trong lập trình Front End. Vẫn luôn tốt hơn nếu bạn học thêm nhiều ngôn ngữ và cách sử dụng của nhiều công cụ khác. Không hại gì nếu bạn làm giàu thêm vốn kiến thức lập trình của mình.

Còn bây giờ, chúng ta đi vào phần chính của bài viết này, hướng phát triển của FE Developer chuyên nghiệp.

HTML5

Trong khi chờ đợi những cập nhật mới của HTML5.2 được dự kiến sẽ ra mắt vào cuối năm nay, chúng ta cùng điểm lại những điểm mới của bản HTML5.1

Trong bản nháp của HTML5.1 có hai loại khác nhau của tag menu là Context và Toolbar. Trong quá trình phát triển nay chỉ còn context thôi. Sử dụng tag menu để định nghĩa menu có nhiều menuitem và ràng buộc nó với contextmenu attributes.

Tag Detail và Summary.Trước đây chúng ta sẽ sử dụng JavaScript để hiển thị hoặc ẩn một khối thông tin thì nay HTML5.1 cho bạn 2 element mới là detail và summary

Input time nay được mở rộng hơn với month, week và datetime-local

Không chỉ hạn chế sử dụng nhiều Plugin và JavaScript, HTML5 cũng hạn chế người anh em của mình là CSS. Responsive Image là tính năng như vậy.

  • srcset: thuộc tính hình ảnh srcset cho phép chúng ta liệt kê nhiều nguồn hình khác pixel ảnh. Nhờ vậy trình duyệt được quyền chọn nguồn ảnh phù hợp nhất với thiết bị của người dùng.
  • sizes: Chỉ bằng sizes, bạn có thể hiển thị hình ảnh phù hợp với kích thước của màn hình thiết bị mà người dùng đang sử dụng vì sizes định nghĩa kích thước dựa theo tỉ lệ %.
  • picture: tương tự ta có thuộc tính picture, cho phép hiển thị hình ảnh ở nhiều nguồn khác nhau, với nhiều kích thước khác nhau.
  • form.reportValidity: kỹ thuật này cho phép bạn lấy kết quả form chuẩn cũng như báo lỗi ra phía trình duyệt cho người dùng.
  • allowfullscreen: cho phép bạn kiểm soát nội dung thể hiện toàn màn hình
  • element.forcespellcheck(): kích hoạt tính năng kiểm tra chính tả trên các text element

Ứng dụng công nghệ trong Front End vào Convert PSD sang HTML/ CSS/ JS

Công nghệ ra đời chỉ hữu ích khi nó mang tính ứng dụng cao. Với những cải tiến từ công nghệ Front End, chúng ta thấy được lợi ích đầu tiên là ứng dụng vào hoạt động chuyển đổi từ PSD sang HTML/ CSS/ JS.

Mỗi ngày, lập trình viên Front End làm việc rất tập trung, chi li, tỉ mỉ từng chi tiết để cho ra các sản phẩm giao diện chuẩn từng pixel. Tuy nhiên, nếu không có sự hỗ trợ của công nghệ mới như HTML5, CSS3, JavaScript với những cải tiến và ra đời của các công cụ hỗ trợ tối ưu, áp lực sẽ dè nặng lên đôi vai của các lập trình viên rất nhiều.

Ứng dụng công nghệ trong Front End mới nhất không chỉ giúp các lập trình viên tăng tốc độ xử lý công việc mà quan trọng hơn là các dự án thiết kế giao diện website, cắt HTML/ CSS/ JS cũng hoàn hảo hơn, đặt được sự tươi mới và bắt kịp xu hướng công nghệ hiện tại.

Hướng phát triển của Frond End Developer chuyên nghiệp

Từ năm 2012 đến 2022, lập trình viên trở thành ngành “hot” khi tỷ lệ tuyển dụng đang tăng dần đều theo các năm. Nếu bạn biết đến công ty Evolable Asia, một công ty IT lớn của Nhật Bản và đang rất phát triển ở khu vực Đông Nam Á. Chỉ riêng công ty này, mục tiêu trong năm 2017 là tuyển dụng 1000 nhân viên chuyên lĩnh vực lập trình để phục vụ cho các dự án của mình trong năm nay. Bấy nhiêu cũng đủ hiểu nhu cầu nhân lực cho ngành của chúng ta như thế nào. Tuy nhiên, các công ty này họ không chỉ tuyển dụng một FE Developer thông thường tức là chỉ biết CSS, HTMl và JavaScript chuyên sâu. Họ cần một chuyên gia phát triển giao diện người dùng hơn. Và đó cũng là mục tiêu mà cuthtmlcss đang hướng đến.

Vậy kiến thức gì mà một FE Developer cần phải cập nhật cho mình, ít nhất là trong năm 2017 này? Với cuthtmlcss , đó sẽ là:

Kỹ năng hướng tới người dùng

Các lập trình viên Front End chịu trách nhiệm kiến trúc những trải nghiệm người dùng. Để thực hiện điều đó Font End Developer làm việc trực tiếp với người dùng để đáp ứng đúng nhất nhu cầu sử dụng của người dùng cuối. Hướng đến người dùng cho bạn những phát kiến và đưa ra những giải pháp tối ưu nhất.

Kiến thức về Back End

Tại sao không khi biết chút ít kiến thức về Back End giúp lập trình viên Front End tiết kiệm thời gian hơn rất nhiều, hạn chế công sức tìm tới chuyên viên Front End để hỏi cái này một chút, cái kia một chút. Mặc dù các chuyên viên này (ở cả cuthtmlcss nữa) đều là những tên cũng tương đối thân thiện, nhưng việc có sẵn một mớ kiến thức giúp bạn hoàn thành công việc nhanh hơn rất nhiều. Một số công nghệ bạn có thể học như .Net, PHP, Java (tôi nghĩ là bạn biết Java khác với JavaScript), Python, Ruby,… bạn có thể học những cái mình thích trước.

Kiến thức đồ họa

Các chuyên viên lập trình Front End cũng cần có khiếu thẩm mỹ và kiến thức thiết kế, biết sử dụng PSD, AI,..  sẽ không thừa. Trong một công ty thiết kế website chuyên nghiệp như cuthtmlcss Media, khâu thiết kế tất nhiên đã có chuyên viên thiết kế đảm nhận. Tuy nhiên, trong quá trình làm việc của mình, lập trình viên FE sẽ phối hợp cùng các Designer phát hiện các vấn đề cụ thể của trải nghiệm người dùng, khuyến nghị cũng như đưa ra giải pháp tối ưu hóa vấn đề.

Bạn cần phải phát triển sâu hơn trong nghề nghiệp của mình, nhưng cũng nên mở rộng một chút kiến thức của các bộ phận xung quanh để quá trình hợp tác làm việc suông sẻ hơn, chuyên nghiệp hơn. Đó là điều mà cuthtmlcss luôn hướng tới.

Khách hàng Nhật Bản rất cần những Front End Developer chuyên nghiệp

Nổi tiếng khó tính, khó tính và khó tính, khách hàng Nhật không thể hợp tác với các lập trình viên thiếu năng lực và không chuyên nghiệp. Ngoài viêc rèn luyện kỹ tính, cẩn thận như họ, bạn cần phải luôn cải thiện kỹ năng của bản thân để đạt được cuộc hợp tác tốt nhất. Hãy luôn luôn cập nhật công nghệ Front End mới nhất và học luôn những kỹ năng có liên quan để trở trở thành một Front End Developer chuyên nghiệp.

Cuối cùng, tôi muốn kết thúc bài viết ở đây. Hy vọng bài viết cung cấp thêm cho bạn những thông tin bổ ích.