Chào tất cả các bạn, mình là Hậu hiện tại vẫn đang Double newbie cả BE và FE, tuy nhiên hôm nay mình muốn chia sẻ một chút trải nghiệm của mình tại HiveTech về hành trình rẽ nhánh ngoạn mục sang Front-end như thế nào nha.

I. Newbie BE

Nói về mình, mình bắt đầu vào con đường lập trình viên như bao bạn khác với ngôn ngữ Java. Vào HiveTech với vị trí học việc, mình được tham gia vào một dự án nội bộ liên quan đến quản trị hồ sơ của tất cả các thành viên trong công ty, bên cạnh đó mình tiếp tục được training chuyên sâu hơn về các chủ đề mà mọi Back-ender đều phải vỡ lòng như Java core, SQL, Thymeleaf, JSP-Servlet cho đến các loại công cụ phát triển như: IDE, SQL Client, Jira, Confluent, Postman, Browser DEV Tool,…

Phải nói thật, thời gian mới tham gia vào dự án này nó thật sự là một điều khó khăn với mình, có quá nhiều thứ mình không biết hoặc biết mơ hồ nhưng không rõ nó là gì và được dùng như thế nào? Ngôn ngữ BE dùng trong dự án là Java, DataBase sử dụng MongoDB, còn dùng Thymeleaf và React để làm UI. Sau khoảng 3 tháng thì mình chỉ mới phát triển được 3 page bằng Thymeleaf. Mặc dù, trong lúc code các ý tưởng  liên tục xuất hiện nhưng do chưa đủ tầm hiểu biết nên nhiều lần đang làm thì lại bị tắc nghẽn cục bộ. Các vấn đề cực kỳ củ chuối khoai sọ với mình nhưng đối với các anh trong công ty thì nó lại dễ như ăn kẹo. Ví dụ như việc import một file json vào mongodb đã làm mình hì hục tìm kiếm rồi xơi nguyên cả một buổi nhưng vẫn lực bất tòng tâm. Cho dù đã có một bài hướng dẫn import mà anh Leader trong nhóm đã thực hiện thành công nhưng vào tay mình cũng chạy dòng lệnh trên vẫn cứ thông báo lỗi, what??? Hàng loạt câu thần chú cứ quẩn quanh, nào là anh sai gì sao vẫn chưa chạy được em ơi? Cho đến những lỗi cú pháp nhỏ như là địa chỉ dẫn thư mục phải đặt trong dấu ngoặc kép? ……

Mình thật sự cạn kiệt tinh lực, tinh thần suy sụp, ruột đau như cắt, nước mắt đầm đìa, mình quyết định đi hỏi anh leader cho ra ngô ra khoai dòng code này. Cuối cùng, các bạn biết sao không? Câu lệnh của mình không bị lỗi mà lỗi khi mình đã chạy lệnh cmd, bên trong nơi cài đặt Mongo serve đáng nhẽ ra cần chạy nó ở bên ngoài thư mục chứa nó. Điều này làm mình trả một cái giá cực kỳ đắt mà cho đến thời điểm hiện tại mình vẫn chưa trả hết nợ, chỉ 500 cái hít đất thôi mà. Đúng là một kỉ niệm nhớ trọn đời anh em ạ. 

II. Newbie FE

Sau đó mình được chuyển sang làm một dự án khác tại, dự án này có một anh FE đang bị rảnh quá nên mình xung phong cho phép anh ý support mình để trở thành một FE developer (funny một chút thế thôi chứ thực ra là do dự án đang thiếu người làm FE và sắp tới anh ý phải đi onsite nên mình được switch sang học hỏi và hỗ trợ làm FE). Và mình đã bén duyên với ReactJS từ đây.

Trong thời gian tiếp cận với React, mình cảm thấy khá là ngộp dù trước đó mình đã được học qua HTML, CSS và JS cơ bản rồi, nhưng vẫn phải tiếp cận những thứ mới như State, Props, Life Cycle của một component, React Router, Redux, Redux saga, Sass… Đây là một lượng kiến thức lớn, mà thú thực trong thời điểm hiện tại mình đang viết bài này mình chưa thể nắm bắt hoàn toàn nó. Mình đã đọc tài liệu ở rất nhiều nơi, điều này ngoài việc cho mình biết thêm rất nhiều, nó còn làm cho mình có cảm giác mình đã tiếp thu được kinh nghiệm và tư duy của mỗi người về một khái niệm, perfect anh em ạ. Nhưng đời không đơn giản thế, những bài viết có quan điểm khác nhau hoặc phủ định lại một khái niệm của một bài viết mình đã từng đọc, điều này làm mình bối rối và mơ hồ vô cùng, không biết đúng-sai như thế nào. Ơn giời, trong lúc bơ vơ giữa ngã năm kiến thức, anh FE “siêu rảnh” ở trên đã giải thích cặn kẽ cho mình mọi điều mình đang thắc mắc. Chốt lại, nếu các bạn newbie như mình hãy đọc tài liệu tại trang chủ của ngôn ngữ mà mình đang học để tiếp thu hết những tinh hoa của công nghệ và thống lĩnh mọi đấu trường mà bạn phải chiến. Bởi vì, các khái niệm hay phương pháp giải quyết bài toán ở các trang cộng đồng chưa chắc đã đúng hoàn toàn. Giống như mỗi lập trình viên lại có một phong cách viết code, cách sử dụng sự khác biệt của từng phiên bản, mỗi người lại có hiểu biết riêng về các khái niệm, vì vậy mặc dù code cùng ngôn ngữ mà có các cách thể hiện khác nhau. Ví dụ, bản thân mình đã được tiếp xúc qua 3 dự án cùng là ReactJS, thế nhưng 3 thành viên khác trong nhóm FE lại build và chọn cách thể hiện ý tưởng riêng biệt. 

Bên cạnh đó, việc hiểu thấu đáo về các yêu cầu chức năng của Component mình đang đọc hết sức quan trọng, nó giúp mình có thể đọc hiểu code nhanh hơn, không phải đi đọc từng Function đang chạy gì, Component kia nó làm gì và ở đâu?  Mình từng dành rất nhiều giờ đồng hồ cặm cụi đọc code mà không nhìn ra vấn đề, vì vậy hãy luôn nắm được yêu cầu chức năng của Component anh em nhé, tiết kiệm được ối thời gian luôn.

Hiện tại, khi mình được giao nhiệm vụ fix lỗi hay sửa một chức năng của người khác, thì sẽ làm như sau: 

1. Tìm file chứa component 
2. Đọc phần được render
3. Check và chốt đúng phần mình đang sửa 
4. Sau cùng, mới ngẫm tới phần logic code. 

Dù vậy, việc hoa mắt sửa nhầm function hay style cho element bên dưới thay bên trên vẫn diễn ra như cơm bữa với mình. Đôi khi tự động viên là mình đang ăn cơm với ớt, tiêu đính kèm một chút chanh chua rồi combo thêm ly cafe đắng để tỉnh táo mà fix lại. Những lúc code chạy trơn tru ngay lần RUN đầu tiên, mình như đang uống ly chanh đường mát lạnh, sảng khoái, hưng phấn rồi còn gặp một cô gái xinh đẹp mỉm cười với mình (tưởng tượng), tuyệt vời. Sau một thời gian thuận buồm xuôi gió, một ngày đẹp giời, đại ca mình mới bảo mình “chú còn định học đến bao giờ nữa, nhận thêm tasks đi mà làm! Không còn cách nào khác, mình phải nhận thêm một task màn hình mới, một thử thách mới lại xuất hiện.

Khi bắt mới tay vào làm task này, mình mới nhận ra nó củ chuối gấp nhiều lần những gì trước đó mình tưởng tượng. Nó không giống như các bản demo todo app hay các chức năng mình đã từng sửa tại vì những Component đấy đều có sẵn rồi, mình chỉ cần đọc hiểu và chỉnh sửa code là khả năng chạy đúng là rất cao. Nhưng khi mình tự tạo một screen thì nó khác vô cùng, mình phải import các thư viện các Component vào Component hiện tại hoặc muốn sử dụng component thì mình phải export nó ra và vô vàn lỗi cơ bản khác nữa. Chưa kể việc phải tự làm một screen FE và điều bạn rất cần là data, mà muốn có data thì cần phải tương tác với server, mà tương tác với server thì bạn phải tương tác với bạn BE. Bạn biết không, bình thường thì bạn BE bao giờ cũng mũm mĩm dễ thương cả, ngoại trừ những lúc mà bạn ý gửi data cho mình là một file png, hoặc sửa API mà bạn ý quên cập nhật lên file tổng hợp API, rồi đôi khi ấy đưa màn hình đầy đủ API để test ngay phút 89 của deadline,….. 

Bài học rút ra, việc trao đổi thông tin thống nhất về mặt dữ liệu giữa BE và FE là rất quan trọng, nó ảnh hưởng đến hiệu suất và tiến độ hoàn thành công việc của cả nhóm. Sau một tuần vật lộn, cuối cùng mình cũng hoàn thành xuất sắc nhiệm vụ được giao, màn hình mình làm đã hoàn tất các chức năng, không thể tin được. Chưa kể, khi review, Đại ca mình còn khen mình không tiếc lời đại khái như: “từ lúc anh sinh ra đến giờ, anh chưa thấy thằng nào làm một màn hình mà nhiều warning được như chú” kèm chất giọng đầy tự hào với nụ cười trên môi. Nghe được lời khen chân thành của anh mà lòng mình dưng dưng tựa như có dòng suối ấm chảy vào :))  và kết quả cuối cùng là nó được merge để release luôn các bạn ạ. Thông qua nhiều lần được review code, mình đã rút ra được rất nhiều chi tiết nhỏ nhưng rất quan trọng như: Đặt tên biến, tên hàm đặt, tên commit, tên branch, các quy tắc đặt tên thư mục cho đúng để code dễ đọc dễ hiểu. Mình vẫn đang tiếp tục cập nhật các kiến thức về JS, SCSS,… để có thể làm chủ và sử dụng tốt hơn với ngôn ngữ React rồi dùng thêm các thư viện để làm đẹp hơn cho trang web đang làm. 

III. Tổng kết

Tóm cái quần lại, học là một cuộc nghệ thuật và mình đang thấy mình vẫn chưa phải là một nghệ sĩ. Nhất là đối với một FE developer như mình, cái đẹp, cái tỉ mỉ và sự tư duy logic nó phải được ưu tiên hàng đầu. 

Chúc các bạn luôn nuôi dưỡng niềm tin và bền bỉ tiến đến thành công!

Đặng Bá Hậu