Tâm sự đêm khuya – Chuyện của người mới làm React Native

Lần đầu tiên nghe đến lập trình iOS bằng React Native, mình chỉ nhếch mép cười khẩy vì cho rằng đây chẳng khác gì một công cụ để dân web viết ứng dụng mobile.

Nhưng rồi khi lên mạng, đọc nhiều bài viết giới thiệu về React Native. Mình có đôi chút “rung động”.

Dần dần, mình cảm thấy thích thú với ý tưởng rằng những tay lập trình JavaScript có thể viết mobile app với JavaScript.

🙅 Không nên bỏ qua bài viết này: React Native là gì? 5 lý do khiến bạn học nó ngay bây giờ

Mình cũng có ý định sẽ thử làm theo cách đó nhưng mình đã từ bỏ ý định này lập tức ngay sau đó. Vì mình đã dành nhiều tâm huyết để theo con đường phát triển ứng dụng dạng native. Mình là người cuồng hiệu năng. Mình từng cho rằng, chỉ có native app mới đem lại trải nghiệm hoàn thiện nhất cho người dùng.

Nhưng rồi…😆

Cơn ác mộng mang tên React Native

#1. React Native – một gia vị mới lạ

Mình đã phát triển được hàng tá iOS app thật sự chất lượng và luôn tự hào về điều đó. Những app này mình đều phát triển bằng Xcode và viết bằng Objective-C như bao người khác từ muôn đời nay.

Đơn giản bởi vì đó là những gì mà Apple cung cấp cho chúng ta để phát triển riêng các iOS app.

Không những vậy, hai năm tiếp theo, khi Apple tung ra ngôn ngữ lập trình Swift, mình cũng không hề ngần ngại tìm hiểu và sử dụng.

Ngôn ngữ này cũng không khác gì so với Xcode là mấy và cũng dùng để phục vụ cho việc phát triển các iOS app nên mình chẳng tốn nhiều thời gian và công sức là mấy để làm chủ nó. Có thể nói, mình rất tự tin khi nắm trong lòng bàn tay cả hệ sinh thái của Apple.

Trong khi đó, viết ứng dụng iOS bằng React Native chỉ giống như một chút gia vị mới lạ trong cuộc đời lập trình của mình. Vì mình luôn tin rằng mọi native app phải được phát triển theo chính thống.

Vì thế, mình nghĩ rằng thật phí thời gian khi phải vừa học JavaScript (thứ mà mình chẳng có chút kinh nghiệm trước đó cả) vừa phát triển app theo một cách hoàn toàn mới. Trong khi mình đang làm chủ việc phát triển native app rất tốt.

Nhưng bạn biết không, đời không ai đoán trước chữ ngờ. Chỉ sau vài tháng, mình đã hoàn toàn thay đổi suy nghĩ trước đây. Giờ mình dám tự tin tuyên bố rằng mình có thể tạo ứng dụng react native mà chẳng cần dùng đến Objective-C hay Swift.

#2. Những bỡ ngỡ ban đầu với React Native

Chuyện là cách đây vài tháng, nhóm bọn mình nhận được một dự án. Sau khi xem những yêu cầu và mẫu thiết kế cho app, theo thói quen, mình lập tức mở ngay biểu tượng màu xanh xinh xắn của Xcode để bắt đầu công việc thì cha sếp tài năng nhưng xấu trai của mình đến và phán rằng: “Này các chú, dự án này chúng ta sẽ làm bằng React Native nhé.”

Cha ấy bảo rằng lần này khách hàng muốn đưa app lên cả iOS lẫn Android. Mặc dù React Native vẫn chưa hỗ trợ cho Android vào thời điểm đó nhưng team mình biết rằng Facebook đang cố gắng hiện thực hóa điều này.

Nói một cách sách vở như trong trường học thì nếu bọn mình phát triển app bằng React Native cho iOS thì rất nhiều phần trong đó cũng sẽ hoạt động trên cả Android.

E hèm! 😤

#3. Khó khăn chồng chất khó khăn

Tất nhiên là mình chẳng vui tí xíu nào. Hãy thử tưởng tượng cuộc đời của một thằng dev đang ở đỉnh cao với một loạt iOS app nay lại bị quăng xuống vũng bùn đầy mùi hôi thối của React Native thì sẽ hiểu lúc đó mình cảm thấy như thế nào.

Vào thời điểm đó, thật sự mình rất nghi ngờ về bản thân, về khả năng có thể tạo ra một sản phẩm chất lượng mà lại đúng deadline trong khi lại chẳng có chút mảy may kinh nghiệm nào về React Native.

Nhưng hơn hết, mình cũng rất nghi ngờ React Native có thể làm ra những sản phẩm tốt. Thậm chí bây giờ nhìn lại, mình cũng tin rằng những nghi ngờ đó hoàn toàn hợp lý.

Vào thời điểm đó, React Native chỉ mới ra phiên bản Beta. Tài liệu về nó thì chẳng có nhiều trong khi các Open Source dành cho React Native lại rất ít và thậm chí là những mẫu code hay ví dụ trên StackOverflow để tham khảo cũng chẳng hề có!

Mình đã bắt đầu dự án bằng một sự chán nản nhưng dù sao vẫn tốt hơn là không làm gì. Cục đá to đùng đầu tiên mình đối mặt chính là Flexbox –cách thức React Native dùng để làm layout cho UI.

Xuất thân từ “xứ sở” của interface builder, việc làm layout cho UI bằng code thật sự khiến mình cảm thấy ngớ ngẩn và khó chịu. Mình thậm chí đã phải “lên bờ xuống ruộng” ngay cả khi chỉ làm những layout đơn giản nhất.

#4. Và rồi dần dần tình yêu lại đến

Nhưng vấn đề không đơn giản chỉ nằm ở UI. Vấn đề là tất cả mọi thứ của React Native hoàn toàn khác biệt. Đây chính là thứ khiến mình cảm thấy ức chế nhất.

Cứ mỗi lần gặp phải chỗ nào không hiểu thì mình luôn tự nhủ rằng “Nếu đây là Objective-C thì tao đã xơi tái mày trong 5 giây”.

Hay những lúc mình phát hiện ra bug trong React Native (và chuyện này diễn ra thường xuyên) thì mình nghĩ ngay rằng “Những bug này không bao giờ có trên Objective-C và tại sao mình lại phải làm những thứ vô cùng ngớ ngẩn này?”

Sau gần 2 tuần, mình thật sự thảm bại với React Native. Mình cảm thấy bản thân thật ngu ngốc như một thằng nhóc mới học viết code lần đầu trong đời trong khi bản thân hiện tại đang là một chuyên gia về iOS app.

Mọi thứ ngày càng tồi tệ hơn chỉ cho đến ngày cuối tuần khi mình có thời gian thư giãn. Khi đó, mình đã tìm đến một quán nằm trong một con hẻm khuất ở lòng thành phố và nhấm nháp chút cà phê.

#5. React Native là tương lai của lập trình di động

Ngẫm nghĩ lại thì thấy rằng cha sếp của mình cũng không hề đưa ra yêu cầu vô lý. Chắc chắn lão ấy đã nghiên cứu rất kỹ về React Native.

Hơn thế nữa, mình tin rằng lão ấy cũng chẳng điên rồ tới mức khiến cho cả team bị “tạch” chỉ vì thích sự mới lạ.

Vì thế, mình đã thề rằng vào ngày thứ 2, mình sẽ ngẩng cao đầu bước vào công ty, xem Objective-C và Swift như chưa từng tồn tại, và “hạ đo ván” React Native.

🙅 Tham khảo thêm: Lập trình React Native hay Ionic: Đâu là lựa chọn tốt nhất để startup?

Bắt đầu tình yêu với lập trình React Native

Vài tuần sau đó, team mình đã đưa lên App Store ứng dụng đầu tiên được phát triển bằng React Native. Mình thật sự rất tự hào về điều này và cảm thấy háo hức để viết những app tiếp theo.

Chỉ hơn 1 tháng, mình đã trở nên yêu React Native hơn. Điều gì đã khiến mình thay đổi?

Đây là lý do.

#1. React Paradigm

Trong React Native, tất cả các điều kiện của UI đều phải đặt trong render(), và được kiểm soát bằng “state”. Các thành phần trong render() sẽ quy định UI trông như thế nào đối với từng state, và khi bạn chọn setState()thì React Native sẽ xác định những phần cần thay đổi và làm thay bạn.

Ví dụ, bạn muốn tạo một view với label mang tên “Hello World” cùng với một nút nhấn. Mỗi một cú nhấp chuột vào nút thì sẽ thay đổi trạng thái từ “Hello World” sang “Goodbye World” và ngược lại. Trong Objective-C, mình sẽ phải viết code như sau:

if ([label.text isEqual:@”Hello World”]) {
    label.text = @”Goodbye World”;
} else {
    label.text = @”Hello World”;
}

Cách làm này thì vẫn ổn nhưng code UI này hoàn toàn tách biệt với chỗ mà mình đã tạo label trước đó (chỗ này có thể nằm trong code hoặc trong Interface Builder).

Đối với React Native, chúng ta có thể quy định nút buttonClicked trong state và label trong render() như dưới đây:

<Text>
    {this.state.buttonClicked ? ‘Hello World’ : ‘Goodbye World’}
</Text>

Và Button handler thì đơn giản như sau:

this.setState({buttonClicked: !this.state.buttonClicked});

Bằng cách này, tất cả view code đều nằm chung một chỗ và state có thể kiểm soát tất cả. Điều này cũng giúp cho việc đọc và debug code dễ hơn.

🙅 Có ích cho bạn: Cách phân biệt Props và State

#2. Flexbox

Công cụ layout UI mà mình ghét ban đầu giờ lại trở thành một trong những thứ mình thích nhất trong React Native.

Mình phải thừa nhận rằng công cụ này rất khó để nắm bắt nhưng khi đã làm chủ nó rồi thì bạn có thể làm UI cho nhiều kích cỡ màn hình khác nhau một cách nhanh chóng và dễ dàng.

Mình đã từng mê mẩn visual aids của Interface Builder trong Xcode. Nhưng Autolayout giờ đây lại trở nên quá phức tạp so với Flexbox. CSS-esque mà Flexbox sử dụng giúp chúng ta có thể tái sử dụng các style một cách dễ dàng như copy paste vậy.

Và điều tuyệt nhất của Flexbox chính là bạn có thể tweak style value đến mức hoàn hảo một cách nhanh chóng.

#3. Live/Hot Reload

Mỗi khi có sự thay đổi, bạn có thể nhìn thấy button của mình trông như thế nào thông qua chức năng Live/Hot Reload.

Điều này dễ dàng như bạn đang sử dụng lệnh Command + S vậy. React Native sẽ được điều chỉnh để tự động re-render góc nhìn hiện tại trên iPhone Simulator mà bạn không phải đụng đến Xcode.

Đây là một lợi ích rất tuyệt vời vì bạn vừa có thể tiết kiệm thời gian khi không phải viết lại code vừa có góc nhìn sắc nét hơn trong app cũng như có thể tweak UI mà không cần điều chỉnh lại màn hình.

#4. Android

Mình đã từng do dự khi học React Native vì mình thích phát triển iOS native hơn và mình cũng chẳng có gì để phàn nàn về iOS native.

Mặt khác, mình cũng đã từng làm Android native và nhận ra rằng nó chẳng tuyệt vời chút nào.

React Native có thể giải quyết bài toán này. React Native đã mang đến một cuộc cách mạng trong việc phát triển mobile app khi chúng ta có thể phát triển 2 platform trên cùng 1 code base.

🙅 Đừng bỏ qua: Khóa học miễn phí React Native cơ bản cho người mới

Chương 3: Những mong chờ tiếp theo với React Native

#1. Nhớ về Xcode

Đến giờ, mình vẫn nhớ về Xcode hay rộng hơn là về IDE. Mình đã có một số bước phát triển rất tốt với React Native nhưng nó chẳng hề đơn giản.

Sublime Text và những plugin sau này mình cũng đã thử qua và nhận thấy chúng chưa thật sự tốt. Sublime có thể autocomplete dựa trên các biến khác trong cùng một file nhưng vẫn thiếu đi một chút chất lượng của Xcode.

Vì vậy mà mình vẫn phải luôn cần đến các tài liệu hướng dẫn react native để tham khảo.

Một số hạn chế như việc gõ React.PropTypes.fvà có IDE cũng không giúp mình biết được liệu mình đang tìm “func” hay “function” cũng cần phải nhắc đến. Mình cũng nhớ đến editor của Xcode – chức năng cho phép bạn so sánh từng file với nhau tại git commit cuối cùng và thậm chí là có thể undo lại những thay đổi cụ thể trước đó trên cơ sở mỗi dòng.

Mình nhận ra rằng một chương trình thứ ba có thể giúp mình thực hiện điều này khi sử dụng React Native nhưng sẽ thật tuyệt vời nếu như nó có thể kết hợp tất cả lại với nhau như IDE.

Để có thể chạy một dự án React Native, mình cần phải launch một terminal để có thể bắt đầu npm packager, Chrome cho debugger, Sublime để chỉnh sửa code, và cuối cùng là Xcode để chạy dự án và khởi động simulator.

Đó chỉ là những lời phàn nàn nho nhỏ cho một hệ thống khổng lồ nhưng với mình thì đây vẫn là những hạn chế khi sử dụng React Native. Mình hy vọng rằng Nuclide (IDE của Facebook) sẽ sớm khắc phục những vấn đề trên.

#2. Bridging

Facebook đã và sẽ không chuyển tất cả API từ iOS sang React Native, vì vậy đối với những file bị thiếu, họ sẽ “bridge” mọi thứ thông qua JavaScript.

Mặc dù không muốn nhưng vẫn phải nhấn mạnh lại rằng lần đầu tiên sử dụng React Native, mình chẳng thể tìm ra tài liệu tham khảo nào ra hồn.

Mỗi lần cần bridge một thứ gì đó thì mình gần như muốn bỏ cuộc vì những thứ đó vốn đã có sẵn trên Objective-C.

Sau này, khi Facebook giải thích cụ thể hơn cách thức bridge và đưa ra ví dụ thì mọi thứ không còn đáng sợ nữa.

Mặc dù vẫn còn một chút rắc rối nhưng dần dần mình cũng nhìn thấy những bridge ảo được làm ra trong các Open Source và chúng cũng đã có sẵn trên npm. Thực tế thì hầu hết API của iOS đều đã có sẵn ở đó.

#3. Bug, Tài liệu và Cộng đồng Open Source

Hầu hết những phàn nàn của mình về React Native sẽ không bao giờ diễn ra nếu mình bắt đầu học về nó hôm nay. Bug được khắc phục mỗi ngày và những bản release mới được thông báo hàng tuần.

Các tài liệu tham khảo lập trình iOS bằng React Native đã tốt hơn nhưng vẫn cần phải tiếp tục cải thiện. Facebook và cộng đồng cũng đang rất nghiêm túc trong việc phát triển framework này.

Thật tuyệt vời khi đã bắt đầu có nhiều người đề cập đến React Native trên GitHub và đặt câu hỏi trên Stack OverFlow.

Nếu bạn là một iOS dev và đang cân nhắc về React Native thì hãy nhớ rằng bạn không đơn độc. React Native rất tuyệt vời và bạn nên thử tìm hiểu nó với một tinh thần cởi mở.

Đừng tự giam cầm mình trong những giới hạn thoải mái, dễ chịu của bản thân như mình đã trải qua.

Hãy bước ra khỏi vùng an toàn và bạn sẽ khám phá được những điều tuyệt vời mà bản thân chưa từng biết đến.

Bạn đã cảm thấy React Native đang để học chưa? Có thì bắt đầu thôi.

• Cài đặt React Native trên Windows
• Cách debug ứng dụng React Native trên thiết bị thật
• Học React Native từ cơ bản – Sách dành cho người mới