Bắt đầu học một công nghệ mới có thể bạn sẽ gặp phải khá nhiều khó khăn và rắc rối. Bạn sẽ thường phải ngập trong một “biển” những bài hướng dẫn, tutorial,… của nhiều người với nhiều quan điểm khác nhau. Và hầu hết người nào cũng cho rằng họ đã tìm ra cách đúng đắn và hoàn hảo.
Những điều này khiến chúng ta phải mất rất nhiều thời gian để tranh luận xem liệu việc học theo tutorial có đúng hay không…
Trước khi ngụp lặn vào cái biển đó, chúng ta cần hiểu được các khái niệm nền tảng của công nghệ. Sau đó chúng ta cần phát triển một sản phẩm dựa trên công nghệ và tư duy đó. Nếu chúng ta bắt đầu học React, điều đầu tiên chúng ta cần đó là tư duy trong React. Chỉ sau khi đó chúng ta mới có thể bắt đầu trộn những tư duy khác nhau vào một.
Trong bài viết này mình sẽ nói về những kinh nghiệm cá nhân mà mình đã học được, tổng hợp được từ những mindsets trong React. Đây là những điều mà sau hơn một năm làm việc, nghiên cứu ngày đêm và cả trong những bài nói của mình trong một số event về React. Hy vọng nó sẽ mang lại nhiều điều hữu ích cho bạn.
So let’s go!
React vẫn đang phát triển từng ngày, vì vậy chúng ta phải liên tục cập nhật.
Nếu bạn có nhớ đến những bài viết, announcements về phiên bản React 16.3.0, bạn chắc hẳn sẽ nhớ đến sự phấn khích mà của cộng đồng React lúc đó như thế nào. Đặc biệt là sau “Sneak Peek về React 16” của Dan Abramov hồi đầu tháng 3, mình cũng có một bài viết nói về sự kiện này, mọi người có thể đọc lại nó ở đây.
Dưới đây là một số sự thay đổi lớn trong phiên bản 16.3.0:
Đội ngũ React core cùng với cộng đồng contributors đã làm rất tốt công việc của mình để nâng cấp từng ngày công nghệ mà chúng ta đều ngưỡng mộ. Và trong bản React 16.4.0 mới phát hành gần đây, chúng ta có thêm support for Pointer Events.
Những thay đổi lớn sẽ vẫn còn tiếp diễn, và dường như nó chỉ còn là vấn đề về thời gian mà thôi: Render bất đồng bộ, Caching, phiên bản 17.0.0 và rất nhiều thứ khác chúng ta chưa biết đến nữa.
Vì vậy, nếu như bạn muốn ở trên top, bạn phải bắt kịp với những gì đang diễn ra trong cộng đồng này.
Điều thực sự giúp bạn trở nên giỏi hơn đó là biết được tại sao mọi thứ hoạt động và nó được tạo ra, phát triển như thế nào, những vấn đề mà nó giải quyết và tại sao nó lại giúp việc phát triển trở nên đơn giản hơn.
Đừng ngại khi phải chia code của bạn thành những thành phần nhỏ nhặt
React là một thư viện “components based”. Vì vậy bạn nên tận dụng sức mạnh của concept này và đừng lo lắng việc phải chia code của bạn thành những phần nhỏ.
Thi thoảng chúng ta tạo ra những Component đơn giản và chỉ có 4 đến 5 dòng code, và thực tế thì điều này hoàn toàn bình thường.
Hãy làm nó sao cho một người mới vào project của bạn, họ không cần phải tốn cả ngày hay nhiều ngày để hiểu được tại sau nọi thứ lại chay được.
// isn't this easy to understand?
return (
[
<ChangeButton
onClick={this.changeUserApprovalStatus}
text="Let’s switch it!"
/>,
<UserInformation status={status}/>
]
);
Bạn không cần thiết phải làm những Components mà nó chứa tất cả những logic phức tạp trong đó. Nó có thể chỉ đơn giản là phần hiển thị mà thôi. Miễn là nó phải tăng cường được khả năng đọc hiểu và có thể “test” được, giảm thiểu tối đa những code logic không cần thiết, đó sẽ là một thành công không chỉ cho bản thân người code mà cho cả team trong project.
import ErrorMessage from './ErrorMessage';
const NotFound = () => (
<ErrorMessage
title="Oops! Page not found."
message="The page you are looking for does not exist!"
className="test_404-page"
/>
);
Trong ví dụ trên đây, có thể thấy được những properties là không thay đổi, vì vậy chúng ta có thể viết nó thành một Pure Component có chức năng duy nhất là hiển thị trang thông báo lỗi Not Found, và hết.
Và nếu như bạn không thích sử dụng CSS classes ở mọi nơi thì Styled Components sẽ là sự lựa chọn phù hợp cho bạn, nó sẽ giúp tăng “readability” đáng kể đấy:
const Number = styled.h1`
font-size: 36px;
line-height: 40px;
margin-right: 5px;
padding: 0px;
`;
//..
<Container>
<Number>{skipRatePre}</Number>
<InfoName>Skip Rate</InfoName>
</Container>
Nếu bạn lo lắng rằng việc tạo nhiều components sẽ kiến cho những thư mục của bạn trở nên “ngâp lụt” bởi có quá nhiều files thì bạn nên suy nghĩ lại về cách tổ chức code của bạn. Hoặc bạn có thể tham khả cách tổ chức code “Fractal structure“, nó khá là thú vị đấy.
Đừng chỉ gắn bó với những thứ “basic”, hãy sử dụng và trở nên “advanced”.
Có thể nhiều lúc bạn cho rằng bạn chưa đủ độ hiểu để tiếp tục với những thứ nâng cao hơn. Đừng lo lắng về điều đó quá nhiều, cứ bắt đầu vào những thử thách mới và bạn sẽ thấy rằng mình hoàn toàn có thể làm được.
Bằng việc tiếp cận với những kiến thức nâng cao hơn để thúc đẩy bản thân phát triển, bạn sẽ hiểu hơn về những thứ cơ bản mà bạn đang có và áp dụng chúng vào những công việc lớn hơn.
Trong React, chúng ta có khá nhiều cách tiếp cận khác nhau mà bạn nên biết:
- Compound Components
- High Order Components
- Render Props
- Smart/Dumb Components
- many others (try out Profiling)
Hãy khám phá tất cả những thứ này, bạn sẽ hiểu tại sao và khi nào thì nó được sử dụng và trở nên thuần thục hơn khi làm việc với React.
// looks like magic?
// it's not that hard when you just try
render() {
const children = React.Children.map(this.props.children,
(child, index) => {
return React.cloneElement(child, {
onSelect: () => this.props.onTabSelect(index)
});
});
return children;
}
Và tất nhiên, đừng ngại việc thử những thứ mới trong công việc thật của bạn (tất nhiên là phải trong phạm vi cho phép). Đừng chỉ dừng lại ở những project cá nhân.
Sẽ có những người hỏi bạn tại sao lại sử dụng nó. Nhiệm vụ lúc này của bạn là tìm ra câu trả lời thích hợp cho để bảo vệ những thứ mình đã làm 🙂 Đó cũng chính là cách bạn học tốt nhất.
Mục tiêu chính đó là giải quyết được những vấn đề còn tồn đọng, làm cho công việc phát triển sản phẩm sau này trở nên dễ dàng hơn, hoặc chỉ đơn giản đó là dọn dẹp đống spaghettis code 🙂 Kể cả khi ý kiến của bạn bị từ chối, nó vẫn hơn việc bạn về nhà và tiếp tục giữ lấy nó trong người.
Đừng cố phức tạp hóa mọi thứ lên
Điều này nghe có vẻ là đối lập với luận ý trước của mình, nhưng không phải. Trong cuộc sống, dù ở đâu chúng ta cũng cần một sự cân bằng. Chúng ta không nên “over-engineer” để thể hiện một điều gì đó. Chúng ta phải thực tế, và việc viết code một các dễ hiểu, đầy đủ mới là mục tiêu thực sự.
Nếu bạn không cần đến Redux, nhưng bạn muốn dùng nó bởi vì rất nhiều người khác đang dùng mà không hiểu mục đích thực sự của nó là gì thì đừng. Hãy có một chính kiến riêng và đừng sợ phải đứng lên nếu như có người khác bắt bạn phải làm 🙂
Đôi khi bạn cho rằng việc tận dụng những công nghệ khủng nhất, viết ra những dòng code cực kì phức tạp để rồi tự tin phát biểu với thế giới rằng: “Tôi không còn là một junior nữa, tôi đã trở thành senior/advanced developer. Hãy xem những gì tôi làm được nè!”
Chân thành mà nói, đó là tư duy của những người mới bắt đầu bước vào lập trình, bản thân mình cũng đã từng nghĩ như vậy 🙂 Nhưng rồi theo thời gian bạn sẽ nhận ra rằng những dòng code mà bạn không phải giải thích tại sao nó work, người khác vẫn hiểu được mới là những dòng code tồn tại được và mang lại những lợi ích thực sự:
- Đồng nghiệp có thể làm việc với projects của bạn và bạn không phải là người duy nhất chịu trách nhiệm cho việc phát triển, sửa lỗi hay test nó,…
- Team của bạn có thể hiểu được người khác làm gì mà không phải ngồi cả ngày trong phòng họp. Chỉ một vài phút trao đổi với nhau là đủ thôi.
- Khi đồng nghiệp của bạn đi nghỉ mát, it’s ok, bạn hoàn toàn có thể làm thay công việc của họ một cách nhanh chóng.
“People respect people who make other people’s lives easier”. Vậy đó, nếu mục tiêu của bạn là có được sự tôn trọng của người khác, để được thăng tiến, hãy cải thiện bản thân, hãy code cho cả team nữa chứ không phải chỉ mình bạn mà thôi.
Bạn sẽ trở thành teamate yêu thích của mọi người 🙂
Refactor, refactor and refactor — đó là chuyện bình thuờng
Theo thời gian, suy nghĩ của bạn sẽ thay đổi, không chỉ một hai lần mà sẽ có đến hàng tá lần, thậm chí là PM của bạn đôi khi còn muốn thay đổi nhiều hơn. Khi mà người khác chê bai rằng nó chưa được ngon, bugs nặng nề,… bạn thấy hối hận với những dòng code đó. Và tất nhiên là bạn sẽ phải sửa đi sửa lại rất nhiều lần, đôi khi nó kiến ta khá nản.
Nhưng đừng lo lắng, nó đơn thần là quá trình học hỏi tự nhiên của chúng ta mà thôi. Nếu không có những lỗi lầm thì chúng ta sẽ chẳng thể tiến bộ được.
“The more times we fall down, the easier it becomes to get back up.”
Hãy thử với việc viết test xem, nó sẽ thực sự hữu ích, giúp chúng ta tiết kiệm thời gian hơn chính vào lúc này đấy. Nếu bạn cảm thấy nó tốn thời gian thì hạy thử nghĩ đến những thứ sau đây:
- Bạn không phải ngồi lại với đồng nghiệp cả tiếng đồng hồ để giải thích tại sao nó lại chạy.
- Bạn không phải giải thích tại sao nó lại hỏng.
- Bạn cũng không phải fix bugs mà không phải của mình nữa.
- Bạn không phải fix những bugs mà mất vài tuần mới ra.
- Bạn sẽ có thêm thời gian làm những thứ khác bạn muốn.
Lợi ích cũng khá lớn đấy chứ 🙂
Nếu bạn thực sự yêu thích nó, bạn sẽ thực sự phát triển mạnh
Khoảng hơn 1 năm trở lại đây, mục tiêu của bản thân mình là phát triển hơn về React cũng như việc lập trình. Dần dần mình cũng muốn chia sẽ nhiều điều về nó và muốn mọi người cùng enjoy như mình. Có những ngày code miệt mài từ sáng cho tới đêm, hay ngồi nghiền ngẫm những conferences xuyên đêm,…
Vấn đề là nếu bạn thực sự muốn điều gì đó, hãy làm nó, người khác sẽ ủng hộ bạn thậm chí là giúp bạn, đừng lo. Gần đây mình cũng được tham gia nói ở những buổi thuyết trình về React / IT (Vietnam Mobile Day),.. được đứng nói trước khá nhiều khán giả,.. Đó là niềm vinh hạnh của mình và mình cũng không ngại khi nói rằng đó là thành quả khi mà mình có một niềm yêu thích thực sự và tập trung làm tốt nó.
Theo thời gian từ một người mới bước vào con đường lập trình, mình đã học hỏi được rất nhiều và dần trở nên mạnh mẽ, thoải mái hơn với những patterns, paradigms, hay những core code,… Dần dần có những tư duy lớn hơn và có thể thoải mái thảo luận, chém gió với những người khác dù ở trình độ nào mà không ngại sẽ phải đụng vào…
Và tất nhiên núi cao sẽ vẫn có những núi cao hơn, quan trọng là mình luôn phải giữ được cái lửa ham mê. Hãy tự đặt câu hỏi cho chính mình rằng bạn có thực sự thích cái mình đang làm hay không.
Nếu không? Hãy nhìn vào những thứ nhỏ nhất mà bạn cảm thấy hay ho, thử tìm hiểu xem biết đâu bạn sẽ thích thú và có thể nói về nó hàng giờ 🙂
Because we have to find something that is closest to our hearts. Success cannot be forced, it must be achieved.
Trên đây là những điều mà nếu như được quay lại thời gian trước đây, mình muốn nhắn nhủ chính bản thân là như vậy để chuẩn bị thật tốt cho hành trình dài phía trước 🙂
Thank you for reading!
Tham Khảo:
medium.com
freecodecamp.org
reactjs.org
Previous post