Các designer học frontend như thế nào?

Đăng lúc 09/08/2018

Như trong mục I follow mình có liệt kê một người là Huang Xuan. Anh ta là một designer đồng thời là một lập trình viên nổi tiếng ở Trung Quốc. Hôm nay, mình sẽ dịch một bài blog cũ của anh ta nói về việc designer học frontend như thế nào. Hay nói cách khác là cách mà họ tiếp cận với công việc frontend develop.

Vài lưu ý nhỏ:

Trong bài sẽ có vài chổ khác với nguyên mẫu một tí về văn phong. Do mình đã chỉnh sửa lại đôi chút vì lý do tiếng Trung họ không có lỗi lặp từ nên việc một từ lặp đi lặp lại là rất bình thường nên mình sẽ thay đổi từ vài chổ để trách lỗi lặp từ trong tiếng Việt, đương nhiên là mình vẫn đảm bảo ý nghĩa sát nhất có thể.

Trong bài cũng sẽ có link của một số sách. Trong bài gốc vì là tiếng Trung nên sẽ dẫn đến một trang web bán sách đó tiếng Trung ở bên Trung Quốc. Mình có edit lại tên tiếng Anh (bản gốc) và đổi thành link Amazon. Đồng thời cũng như vậy đối với một số link dẫn đến zhihu mình sẽ đổi thành twitter or medium cho các bạn tiện theo dõi họ.

Bài viết được viết vào năm 2015 nên sẽ có những kiến thứ vào thời điểm đó. Nên các bạn có thể hiểu tại sao lại có chổ "ES6 vừa ra đời" hoặc không có một số tech mới ví dụ như graphql nhé.

Hy vọng các bạn sẽ enjoy bài viết này nhé!

Link bài viết gốc: 「知乎」设计师如何学习前端? - How designers learn front-end development?

Các designer học frontend như thế nào?

Kinh nghiệm của tác giả có thể tìm thấy ở các kiến thức thông thường và chuyên ngành đại học là media design art. Năm nhất thực tập ở vị trí designer, năm hai nhận được một trong những offer lớn nhất trong đời từ Ali's design. Sau đó chuyển quan Taobao travel. Hiện nay, đang làm việc cho một frontend team, nơi mà đang phát triển ứng dụng vé xem phim Wechat

Đã từng đi "đường rừng" rất nhiều, nhưng may mắn thay có một tiểu ca là @尤雨溪. Đó là một người cũng từ design / art chuyển hướng sang frontend và hiện giờ là một trong những hình mẫu về một vị thần vĩ đại của frontend, anh ta cũng đã trãi qua quá trình như vậy.

Background

Để học một cái gì mới trong thời đại này. Hãy đảm bảo việc sử dụng tốt công cụ tìm kiếm như Google/Bing... Những nguồn kiến thức trên mạng rất dồi dào, và khả năng tự học thì đặc biệt quan trọng, nhất là trong việc học công nghệ.

Bắt đầu (HTML/CSS)

Hãy nói về ý định ban đầu của việc designer muốn học frontend, có lẻ bởi vì các hiệu ứng hoặc tương tác lộng lẫy từ các trang web khác nhau thì thật là hấp dẫn, tạo nên một cảm giác có lẻ giống như là "Ê, cái design của tao có thể áp dụng vào làm web nè". May mắn thay, "show" là phần đơn giản nhất của việc học frontend. Vì thể hãy để nỗi sợ mang tên "lập trình" của các bạn qua một bên đi, chúng ta sẽ bắt đầu với HTML/CSS (Những thứ không phải ngôn ngữ lập trình), nào hãy làm cái gì đó mà cho bạn cảm giác là bạn có thể làm được.

Dành cho các designer, phần lớn định nghĩa "hoàn thành" của các bạn có nghĩa là "một thứ gì đó có thể nhìn thấy" và HTML/CSS thì được dùng để làm điều đó. HTML là một tập hợp các thẻ đơn giản còn CSS thì cũng không có gì khó hơn các bản vẽ của các bạn. Quá trình đó giống như việc bạn viết tiếng Anh với một định dạng nhất định.

<p> p is paragraph! </p> <style> p { color: red;} </style>

Điều đó thật dễ đúng không nào, chỉ như là đọc tiếng Anh!

Tiếp theo, bạn cần phải tự học một số thứ khác như ý nghĩa của những thẻ HTML phổ biến, các tính chất CSS khác, CSS box model, độ ưu tiên trong CSS, các selectors... Hãy yên tâm, chúng đều rất dễ. Bạn cũng có thể thử PS/ Designers of AI/Flash/Axure/AE/Sketch, học chúng từ từ.

Recommend một số nguồn kiến thức phổ biến

  • Hướng dẫn online w3schools
  • Learn to code (Codecademy, nếu bạn có khả năng dùng tiếng Anh ổn, tôi sẽ rất khuyến khích việc bạn dùng nó để học! Nơi có những bài học về việc sử dụng HTML/CSS để xây dựng website, miễn phí, sinh động và trực quan).

Thực hành ở giai đoạn này chủ yếu là "copy": sử dụng code để vẽ những trang web bạn muốn vẽ càng nhiều càng tốt

Về việc đọc sách, tôi thì không khuyến khích việc bạn đọc những cuốn sách hướng dẫn dày cộm, không cần thiết! Giai đoạn này bạn nên khởi đầu nhanh, nuôi dưỡng cảm giác thú vị và cảm giác hoàn thiện khi thực hiện sản phẩm. Hãy làm một cái gì đó bạn có thể nhìn thấy trước, thông thạo việc sử dụng các tính năm cơ bản của HTML/CSS.

Nếu điều đó tiến triển tốt, bạn có thể viết một trang web tĩnh đơn giản và đẹp sau những bước chạy đà ở trên. Chẳng hạn như cái portfolio / resume này (Đã lâu lắm rồi tôi không cập nhật nó... thật là ngại quá)

Tiếp theo (JavaScript/jQuery)

Bạn muốn triển khai một số hiệu ứng tương tác trên một trang web, tựa như một cái băng chuyền công nghiệp - mọi hiệu ứng diễn ra sao một cú click vào button? Bạn cần phải bắt đầu học JavaScript! JavaScript là một ngôn ngữ lập trình toàn diện, mạnh mẽ và phổ biến. Và mọi sự tương tác hoặc các tính năng tiên tiến bạn thấy trên các browser đều có thể được xây dựng bằng nó.

Cho tôi một các hạt dẻ nào

Alert("Hello World!")

Với dòng code đó, bạn có thể mở một popup với nội dung Hello World trong trình duyệt của bạn

Sau khi học các concept cơ bản của JavaScript (Biến, hàm, kiểu biến...). Chúng ta có thể học jQuery. Với jQuery bạn không cần biết What it is(it có nghĩa là JavaScript codebase). Bạn chỉ cần biết là sử dụng nó giúp bạn giảm tải đáng kể những khó khăn trong việc tương tác với trang web trong quá trình code của bạn.

$('.className').click(function(){ alert("Hello jQuery") })

Với jQuery bạn có thể tiếp tục sử dụng kiến thức về selector mà bạn đã từng được biết khi học CSS

Nếu là những người không có nền tảng lập trình, sẽ không dễ dàng để làm chủ được chúng hoàn toàn. Và với việc là nhà thiết kế và nhiều lần gặp khó khăn với những quy tắc của chúng (Javascript và jQuery), thì hãy cố gắng áp dụng chúng vào thực tiễn. Cảm giác làm chủ được ngôn ngữ sẽ đến nhanh thôi và bạn có thể hiểu rõ thêm về cách mà Javascript được áp dụng trong thực tiễn.

Tôi vẫn tiếp tục khuyến khích bạn sử dụng khóa học online của w3schoolscodecademy để học tập. Ngoài ra, bạn có thể tìm hiểu thêm các cuốn sách hữu ích như Sharp jQuery (锋利的jQuery), nó sẽ giúp bạn có thể bắt đầu nhanh với các hiệu ứng đơn giản.

Nếu mọi việc diễn ra tích cực, bạn có thể trãi nghiệm thử kho plugin phong phú của jQuery, bạn sẽ thấy rằng việc thực hiện các tương tác với người dùng qua các tính năng phức tạp (slider, lightbox, drop-down menu...) cũng sẽ không quá khó khăn. Chỉ cần tìm kiếm thứ bạn cần, đọc tài liệu và thay thế các đoạn code theo mẫu.

Ví dụ như với Huxpro/jquery.HSlider · GitHub, bạn có thể dễ dàng viết ra một trang web chứa một slider ảnh giống như HSlider | Demo hoặc làm một phiên bản dành cho mobile app tương tự như HSlider | Weather

Cuối cùng, điều tiếp theo tôi muốn giới thiệu đó là Bootstrap · The world’s most popular mobile-first and respons, một trong những framework UI Frontend nổi tiếng nhất thế giới, với sự hỗ trợ của rất nhiều CSS style và jQuery plugin. Bạn có thể học nó dễ dàng bằng cả tiếng Anh lẫn tiếng Trung. Hơn hết, bạn không cần thiết phải hiểu những nguyên lý làm việc ở phía sau của Bootstrap nhưng vẫn có thể sử dụng nó một cách hiệu quả, điều đó giúp cho bạn nhanh chóng đạt đến level "can build a station". Hoặc nếu bạn có khả năng, bạn không chỉ có thể học cách sử dụng nó mà còn có thể tìm hiểu được cả những ý tưởng thiết kế đằng sau nó.

Web Rebuild

Trong ngành công nghiệp frontend có thể bạn thường nghe đến những con người có khả năng refactor lại HTML/CSS. Thì với những designer có kiến thức thiết kế trực quan, sau khi làm chủ được HTML/CSS thì họ có thể đi theo hướng đi này.

Ở giai đoạn này, bạn không chỉ cần biết cách để viết một trang web, mà còn cần phải biết ý nghĩa của những đoạn code (tại sao chúng lại được viết như vậy chẳng hạn), và tìm cách để cải thiện chúng. Điều đó rất có ích cho việc bạn muốn hiểu hơn về thế giới web và đồng thời cũng có thể giúp bạn tạo ra những thiết kế "có hệ thống" hơn.

CSS có nhiều thứ để học. Bạn cần bắt đầu hiểu về những cách khác nhau cùng những nguyên tắc trong document flow, floating stream... Hiểu được những tinh hoa của CSS và tái sử dụng chúng. Hiểu được sự khác nhau giữa các trình duyệt, độ tương thích cùng graceful degradation. Thêm một cuốn sách tôi muốn khuyến khích các bạn đọc nó CSS Mastery: Advanced Web Standards Solutions (2nd Edition) (精通CSS(第2版)). Mặc dù công nghệ frontend đang có những bước tiến nhảy vọt nhưng những ý tưởng trong cuốn sách này sẽ không bao giờ lỗi thời.

Về phần HTML, để bắt đầu bạn nên tập trung vào ngữ nghĩa, cách tiếp cận các kết cấu. Bạn nên bắt đầu học về việc phân tách cấu trúc và styles, và đây là một cuốn sách mà các vị thần đã tạo ra để đề cập về việc phân tách trên The Zen of CSS Design
Lời người dịch: Đoạn này mình dịch hơi tối nghĩa. Cốt yếu ở đoạn này là việc các bạn nên phân tách ra được cấu truc (HTML) và style (CSS) sao cho dung hòa. Ví dụ như một hiệu ứng, hoặc một cách đặt để nào đó thì phải xác định được cần những thẻ HTML và bố trí ra sao cùng với CSS đi kèm theo chúng chứ không phải dựa dẫm hoàn toàn vào một bên CSS hoặc HTML

Thêm một chút, tôi nghĩ bạn sẽ thích những thuộc tính tuyệt vời của CSS 3: Bạn có thể thiết kết responsive cho website với media queries, bạn có thể tween animation và keyframe animation với transiton, animation, zoom, rotate. 3D với transform, với nó bạn còn có thể bo tròn gốc, tạo độ dốc, đổ bóng, làm việc với box! Mọi thứ đều là những tạo tác dành cho designer.

Đến lúc này, nếu bạn vẫn còn giữ kiến thức đã học trong phần Javascript/jQuery thì xin chúc mừng bạn. Vì bạn đã có khả năng làm được một lượng lớn những trang web thú vị! Rất nhiều minisite hoặc quảng cáo của Wechat mà bạn có thể hoàn thành được một cách dễ dàng khi đang ở level này.

Với khả năng designe, bạn có thể bắt đầu làm một vài thứ gì đó hay ho. Như trang web đầy tính tương tác và có các animation như 绅宝 SENOVA. Một trang web được xây dựng trên nền tảng Huxpro/jquery.HSlider · GitHub! Hoặc là hãy để bản thân mình thử xây dựng một trang web cá nhân nho nhỏ.

Front-end Engineer

Nếu bạn nghĩ rằng những điều trên vẫn chưa làm bạn hài lòng, bạn muốn làm một thứ gì đó lớn hơn. Đồng thời lúc này bạn cũng đã thấy rằng mình thích việc viết các chương trình và muốn trở thành một Engineer hay là một Fullstack Designer. Ngay lúc này, bạn có thể chuyển hướng để tiếp tục phát triển

Khó khăn lớn nhất ở giai đoạn này đó là việc bạn phải học cách suy nghĩ như một lập trình viên phần mềm. Bạn cần phải học các ngôn ngữ lập trình và hiểu kha khá các concept lập trình như cope, object, class, encapsulation, inheritance, object-oriented programming, event snooping, event bubbling... Bạn cũng cần phải hiểu về trình duyệt, bạn cũng cần phải học DOM, BOM, CSSOM API, thậm chí bạn cần tìm hiểu cả về network như domain, URL, DNS, request HTTP...

Có thể đống keyword trên sẽ làm bạn sợ hãi. Nhưng thật sự là vậy, để học được chúng không hề dễ dàng. Nhưng bạn cứ tin tôi, nếu bạn thật sự nổ lực thì đạt được những thứ trên cũng không phải là khó. Nhưng quan trọng hơn là nếu bạn có thể học được chúng thì hãy áp dụng chúng chứ đừng chạy theo số lượng, đó là một rào cản thật sự. Khi đó thể giới của bạn sẽ mở ra và đó sẽ là cách bạn sẽ nhìn thấy thế giới sẽ thay đổi.

Ở giai đoạn này, bạn có thể tiếp tục học ở codecademy nhưng w3schools sẽ là không đủ. Trong trường hợp bạn muốn tìm syntax, tôi khuyến khích bạn nên ghé qua Mozilla Developer Network. Một nơi rất chuyên nghiệp và thân thiện.

Có một số sách bạn có thể đọc, chúng có thể giúp bạn trong việc học Javascript trong giai đoạn này:

Lời người dịch: Đoạn này tác giả nói về việc xây dựng trang web theo hai hướng thượng cấp và hạ cấp. Điều này sinh ra do việc xuất hiện của CSS3 làm một số trình duyệt cũ không thế bắt kịp được một số tính năng của CSS3. Để trang web có thể chạy ổn trên nhiều trình duyện nhất có thể thì chúng ta sẽ có hai hướng như đã nói ở trên. Hướng "渐进增强" có nghĩa là chúng ta sẽ xây dựng trang web theo từng bước một, từ cơ bản (những chức năng mà tương thích với các trình duyệt) sau đó bổ sung thêm các chức năng nâng cao dành cho các trình duyệt nâng cao nhắm nâng cao trãi nghiệm. Còn hướng "优雅降级" có nghĩa là xây dựng trang web với đầy đủ các chức năng trên trình duyệt cao sau đó dần tối ưu lại để những style đó có thể chạy cho các trình duyệt thấp hơn.

Nếu bạn có thể vượt qua giai đoạn này một cách mượt mà, thì tôi nghĩ chắc hẳn bạn đã xây dựng được kha khá các trang web đáng tự hào rồi. Hãy thử hỏi các đồng nghiệp của mình về cách mua domain, config một server tĩnh hoặc tìm hiểu về "Github pages". Những việc đó có thể giúp bạn up các sản phẩm của mình lên để mọi người cùng enjoy!

Bạn cũng có thể thử việc một game nho nhỏ bằng JavaScript, có thể nó không cải thiện được level lập trình của bạn nhưng nó khá thú vị, đây là một sản phẩm mà tôi đã "hack" được sau khi vừa học xong JS - Một game bắn máy bay được triển khai với DOM: Hux - Aircraft ( Does not support mobile phones)

Mở rộng

Nếu bạn có thể làm được tất cả những điều nói trên thì thật sự bạn đã là một học viên frontend tuyệt vời! Dành cho những designer và các product manager, những người muốn làm giàu vốn skill của mình. Phần còn lại trong bài viết này có thể làm các bạn thấy không được thoải mái. Nhưng nếu bạn muốn chuyển hướng vào vị trí full-time frontend developer của các công ty lớn thì bạn có thể đọc tiếp phần dưới.

Những năm gần đây, công nghệ frontend đang phát triển như vũ bão. Từ rất lâu rồi frontend engineer không chỉ đơn thuần là những người vẽ nên những hiệu ứng đặc biệt trong các trang web. Và bạn cần phải có những kỹ năng của một engineer cũng như là có kiến thức về máy tính để trở thành một engineer thật sự.

Bạn cần phải khá thành thạo với ngôn ngữ JavaScript, including closures, IIFE, this, prototype và một số implementations cơ bản (ES, VO, AO), quen thuộc với các design pattern cơ bản cùng các mô hình JavaScript (Như việc làm việc với các class có các private property). Thêm một phần nửa là ES6 đã được release, thêm vào class, module và arrow function...

Bạn cũng cần phải có sự hiểu biết tốt về một số mảng phổ biến có liên kết với frontend như kiến thức backend, kể cả Ajax, JSON, HTTP requests, sự khác biệt giữa POST và GET, RESTful, URL hash/query, webSocket, common cross-domain methods (JSONP/CORS, HTTP strong caching/negotiation) Caching. Cách để tận dụng sức mạnh của CDN, sự khác biệt của web tĩnh và web động, sự khác nhau của frontend rendering và server-side rendering...

Bạn cần phải học CSS nâng cao, sử dụng thành thạo CSS 3, compile CSS với SASS/LESS, sử dụng PostCSS như một autoprefixer, hiểu được các lỗi CSS liên quan đến Scope/Namespace. Bạn cũng có thể học CSS modules, CSS bên trong JS là một điều mới mẻ khá thú vị.

Có thể bạn biết những đặc tả module frontend rất tốt. Nhưng tôi nghĩ có thể bạn sẽ phải tạm biệt chúng khi bạn học Require.js / AMD. Nhưng bạn cũng phải hiểu về CommonJS và ES 6 module. (bạn có thể xem thử điều tôi chia sẽ trong JavaScript Modularization Seven Day về lịch sử module của JavaScript)

Bạn cũng cần thành thạo cả cách dùng Git và Shell, sử dụng git-based để quản lý version, quản lý branch và làm việc nhóm, học một số Linux/Unix commands đơn giản. Bạn có biết rằng rất nhiều lập trình viên có thể làm việc nhanh hơn và... cool hơn bằng shell công thêm kha khá cái thứ hay ho nhưng chỉ có thể chạy bằng shell. Bạn cũng có thể share code của bạn lên github và đồng thời học hỏi được nhiều thứ từ những mở nguồn mở tuyệt vời khác trên GitHub.

Bạn còn cần phải sử dụng quen với Node, kéo npm về, dùng Grunt/Gulp/Browserify/Webpack để tối ưu workflow của bạn, packaging code của bạn, confusing, compressing và publishing. Bạn cũng có thể thử Express/Koa cùng với MongoDB/Redis. Dựng một domain backend hoặc thử cải thiện kinh nghiệm của mình với Node trong việc render bằng backend.

Ngoài ra bạn còn phải hiểu sự khác biệt của HTML 5 APIs, các thẻ <video>/<audio>, sử dụng Canvas, webGL, File API, App Cache, localStorage, IndexedDB, Drag & Drop, nâng cao hơn kiến thức về DOM API, Fetch API...

Còn cả tìm hiểu về single-threaded cùng phương thức lập trình bất đồng bộ (asynchronous programming) của JavaScript bởi vì chúng rất cơ bản. Và còn những thứ như setTimeout/setInterval, callbacks và callback hells, events và event loops, thêm cả Promise và Async/Await

Bạn cũng cần trang bị tốt kiến thức về browser, các loại browser chính, kernel và sự khác biệt của chúng. Ứng dụng các vendor attribute như một private attributes dạng như webkit-. Bạn cũng cần biết sử dụng Chrome DevTool. Đồng thời bạn cũng cần hiểu về browser rendering reflow/repaint để tránh giật/lag. Đồng thời bạn phải targeted được performance cần cải thiện.

Bạn phải có sự chuyên tâm về Mobile Web bởi vì mobile internet đang là xu hướng. Tìm hiểu về viewport, CSS pixel, touch events, sự khác biệt giữa các iOS/Android browser, khả năng thích ứng đồng thời cải thiện performance phía mobile, 300ms delay... Bạn cũng cần biết về những thứ như Hybrid, Cordova/Phonegap, hay phức tạp hơn là cả iOS/Android. Cơ chế giao tiếp như URI Scheme hoặc JS Bridge.

Ngoài ra, bạn nên học những front-end framework/librarie đang hot hiện nay, chúng sẽ hỗ trợ bạn xây dựng rất nhanh nhưng quan trọng hơn đó là những ý tưởng nằm sau chúng. Ví dụ như Backbone, Angular, Vue, React, Polymer... Hiểu được two-way data binding phía sau chúng, one-way data flow, các ý tưởng của MVC/MVVM/Flux, Web Component và componentization.

Bạn cũng sẽ phải cần tìm hiểu về cách xây dựng được một single-page application, với routing sử dụng history API hoặc hash. Render frontend với Ajax + template engine hoặc các công nghệ khác. Đồng thời tìm hiểu về các thiết kế phần mềm phức tạp.

Tôi cũng khuyến khích bạn học về máy tính, thức sẽ có vai trò khá tinh tế trong core của bạn bao gôm cái kiến trúc đơn giản đến các kiến thức phức tạp hơn như object-oriented/functional, stacks, heaps, arrays. Cùng với cấu trúc dữ liệu với queues, hash tables, trees, graphs, time complexity và space complexity, cùng các thuật toán đơn giản...

Đương nhiên bạn cũng nên tìm hiểu về các vị "thánh" trong ngành và ghé qua thử blog của họ @尤雨溪, @贺师俊, @张云龙, @徐飞, @张克军, @玉伯, @拔赤, @寸志, @题叶, @题叶. Rất nhiều điều mới mẻ có thể chỉ được học từ họ. Tôi cũng khuyến khích các bạn tham dự các buổi trao đổi kiến thức công nghệ, học hỏi nhiều hơn cùng những người bạn của chúng ta. Bạn có thể giao tiếp với người khác và cùng nhau phát triển.

Đặt biệt, bạn rất cần có khả năng tự học tốt, niềm đam mê với công nghệ và liên tục theo sát chúng. Bởi vì cộng đồng JavaScript/Frontend thì rất năng động, ở đó thì có vô số những điều mới mẽ mà bạn cần khám phá và tự tìm hiểu: Universal JavaScript, Isomorphic JavaScript, front-end testing, HTML5 page browsing, WebRTC, WebSocket, CSS 4, SVG, HTTP/2 , ES 7, React Native, Babel, TypeScript, Electron...

Mặc dù chỉ là một chút chia sẽ, nhưng tôi mong đó sẽ là những điều bạn tiếp xúc trong tương lai. Bạn không cần phải master tất cả chúng, nhưng biết nhiều thì tốt. Bạn có thể chỉ chuyên một số khía cạnh nhưng những thứ đó vẫn đủ để bạn trở thành một lập trình viên frontend chuyên nghiệp.

Vì thế nếu bạn có được 40% những yêu cầu trên, tôi sẽ chào đón bạn gửi cv cho tôi huangxuan@wepiao.com, cả vị trí fulltime lẫn intern.

Lời người dịch: bài viết được viết năm 2015 lúc tác giả vẫn còn làm việc ở wepiao. Giờ him đã chuyển sang làm việc cho Facebook rồi. Nên nếu bạn nào có gửi mail cho địa chỉ trên thì đừng thắc mắc tại sao không được reply nhé :v

Kết (Người dịch)

Bài viết này đã khá lâu rồi (2015) nhưng với mình nó vẫn là bài viết khá chất lượng không chỉ cho các lập designer muốn chuyển hướng sang frontend mà cả cho những bạn khác có hứng thú với khía cạnh này của lập trình. Trong bài có đề cập khá nhiều đến 尤雨溪. Thật ra him chính là Evan You cha đẻ của Vuejs và 尤雨溪 là tên tiếng Trung của him. Rất vui nếu bài dịch này có ích cho các bạn.