Hatırlatma! ReasonReact'ın React yazmanın en iyi yolu olmasının nedeni budur.

Kullanıcı arayüzleri oluşturmak için React kullanıyor musunuz? Ben de öyleyim. Şimdi, ReactML uygulamalarınızı neden ReasonML kullanarak yazmanız gerektiğini öğreneceksiniz.

React, kullanıcı arayüzleri yazmak için oldukça iyi bir yoldur. Fakat daha serin hale getirebilir miyiz? Daha iyi?

Daha iyi hale getirmek için önce sorunlarını tanımlamamız gerekir. Peki, bir JavaScript kütüphanesi olarak React'in asıl sorunu nedir?

Tepki başlangıçta JavaScript için geliştirilmedi

React'e daha yakından bakarsanız, bazı ana ilkelerinin JavaScript'e yabancı olduğunu göreceksiniz. Değişmezlik, işlevsel programlama ilkeleri ve özellikle de yazım sistemi hakkında konuşalım.

Ölçülebilirlik React'in temel ilkelerinden biridir. Sahne veya devletinizi değiştirmek istemezsiniz çünkü bunu yaparsanız tahmin edilemeyen sonuçlar yaşayabilirsiniz. JavaScript’te, kutunun dışında bir değişkenlik yok. Veri yapılarımızı bir sözleşmeyle değişmez tutuyoruz ya da bunu başarmak için değişmez JS gibi kütüphaneler kullanıyoruz.

React, işlevsel programlama prensiplerine dayanmaktadır çünkü uygulamaları fonksiyonların kompozisyonlarıdır. Her ne kadar JavaScript birinci sınıf işlevler gibi bu özelliklerden bazılarına sahip olsa da, işlevsel bir programlama dili değildir. Güzel bir bildirim kodu yazmak istediğimizde, Lodash / fp veya Ramda gibi harici kütüphaneler kullanmamız gerekir.

Peki, tip sisteminden ne haber? Tepki olarak, PropTypes vardı. Statik olarak yazılmış bir dil olmadığı için JavaScript türlerini taklit etmek için kullandık. Gelişmiş statik yazmadan yararlanmak için yine Flow ve TypeScript gibi dış bağımlılıkları kullanmamız gerekir.

Tepki ve JavaScript karşılaştırması

Gördüğünüz gibi, JavaScript React’in temel ilkeleriyle uyumlu değil.

React ile JavaScript ile uyumlu olan başka bir programlama dili var mı?

Neyse ki, ReasonML’imiz var.

Sebep olarak, kutunun dışında değişmezlik elde ediyoruz. İşlevsel programlama dili olan OCaml'a dayandığından beri, dilin kendisinde de yerleşik olan bu özelliklere sahibiz. Sebep ayrıca kendi başına güçlü bir tip sistemi de sağlar.

Tepki, JavaScript ve Sebep karşılaştırması

Sebep, React’in temel ilkeleri ile uyumludur.

neden

Bu yeni bir dil değil. 20 yıldan fazla süredir devam eden işlevsel bir programlama dili olan OCaml için alternatif bir JavaScript benzeri sözdizimi ve araç zinciridir. Sebep, projelerinde OCaml'ı zaten kullanan Facebook geliştiricileri tarafından yaratıldı (Flow, Infer).

Nedeni, C'ye benzeyen sözdizimiyle OCaml'ı JavaScript veya Java gibi ana dillerden gelen insanlar için ulaşılabilir hale getirir. Size daha iyi belgeler (OCaml ile karşılaştırıldığında) ve çevresinde büyüyen bir topluluk sağlar. Ayrıca, mevcut JavaScript kod tabanınızla entegrasyonunuzu kolaylaştırır.

OCaml, Sebep için destek dili olarak hizmet eder. Sebep OCaml ile aynı semantiklere sahiptir - sadece sözdizimi farklıdır. Bu, OCaml’ı Reason’un JavaScript benzeri sözdizimini kullanarak yazabileceğiniz anlamına gelir. Sonuç olarak, OCaml’ın güçlü tip sistemi ve desen eşleştirmesi gibi harika özelliklerinden yararlanabilirsiniz.

Reason’un sözdiziminin bir örneğine bakalım.

let fizzbuzz = (i) =>
  anahtar (i mod 3, i mod 5) {
  | (0, 0) => "FizzBuzz"
  | (0, _) => "Fizz"
  | (_, 0) => "Buzz"
  | _ => string_of_int (i)
  };
(için 1 ile 100 arasında) {
  Js.log (fizzbuzz (I))
};

Bu örnekte model eşleştirmeyi kullanıyor olsak da, yine de JavaScript’le oldukça benzer, değil mi?

Ancak, tarayıcılar için kullanılabilir tek dil hala JavaScript'tir, yani onu derlemeliyiz.

BuckleScript

Reason’ın güçlü özelliklerinden biri, Reason kodunuzu alan ve harika ölü kod elemeleriyle onu okunaklı ve performanslı JavaScript’e derleyen BuckleScript derleyicisidir. Derlenmiş JavaScript kodunu hala okuyabileceklerinden, herkesin Reason'ı tanımadığı bir ekip üzerinde çalışıyorsanız okunabilirliği takdir edeceksiniz.

JavaScript ile olan benzerlik o kadar yakındır ki, Sebep kodunun bazılarının derleyici tarafından değiştirilmesine gerek kalmaz. Böylece, kodda herhangi bir değişiklik yapmadan, statik olarak yazılmış dilin avantajlarından yararlanabilirsiniz.

let = = a, b) => a + b;
ekle (6, 9);

Bu, hem Sebepte hem de JavaScript'te geçerli koddur.

BuckleScript dört kütüphaneyle birlikte gönderilir: Belt (OCaml standart kütüphanesi yetersiz) adlı standart kütüphane ve JavaScript, Node.js ve DOM API'lerine bağlar.

BuckleScript OCaml derleyicisini temel aldığından, Babil'den çok daha hızlı ve TypeScript'ten birkaç kat daha hızlı, cayır cayır yanan hızlı bir derleme elde edersiniz.

JavaScript Nedeniyle yazılmış FizzBuzz algoritmamızı derleyelim.

Sebep’in BuckleScript ile JavaScript’e kod derlemesi

Gördüğünüz gibi, ortaya çıkan JavaScript kodu oldukça okunaklı. Bir JavaScript geliştiricisi tarafından yazılmış gibi görünüyor.

Sebep yalnızca JavaScript’i değil aynı zamanda yerel ve bytecode’u da derler. Böylece, Reason sözdizimini kullanarak tek bir uygulama yazabilir ve MacOS, Android ve iOS telefonlarda tarayıcıda çalıştırabilirsiniz. Nedeninde yazılan Jared Forsyth tarafından Gravitron adında bir oyun var ve bu daha önce bahsettiğim tüm platformlarda çalıştırılabilir.

JavaScript birlikte çalışma

BuckleScript ayrıca bize JavaScript birlikte çalışabilirliği de sağlar. Çalışma JavaScript kodunuzu yalnızca Reason kod tabanınıza yapıştıramazsınız, Reason kodunuz da bu JavaScript koduyla etkileşime girebilir. Bu, Reason kodunu mevcut JavaScript kod tabanınıza kolayca entegre edebileceğiniz anlamına gelir. Ayrıca, NPM ekosistemindeki tüm JavaScript paketlerini Sebep kodunuzda kullanabilirsiniz. Örneğin, Flow, TypeScript ve Reason'ı tek bir projede bir araya getirebilirsiniz.

Ancak, bu kadar basit değil. Sebepte JavaScript kitaplıkları veya kodu kullanmak için önce Sebep ciltlemeleri yoluyla onu Sebep'e aktarmanız gerekir. Başka bir deyişle, Reason’ın güçlü tür sisteminden yararlanabilmek için yazılmamış JavaScript kodunuz için türlere ihtiyacınız var.

Sebep kodunuzda bir JavaScript kütüphanesi kullanmanız gerektiğinde, Reason Package Index (Redex) veritabanına göz atarak kütüphanenin Reason'a zaten aktarılmış olup olmadığını kontrol edin. Reason ve JavaScript kütüphanelerinde Reason ciltlemeleri ile yazılmış farklı kütüphaneleri ve araçları toplayan bir web sitesidir. Kütüphanenizi orada bulduysanız, onu bir bağımlılık olarak kurabilir ve Neden uygulamanızda kullanabilirsiniz.

Ancak, kütüphanenizi bulamadıysanız, Nedenlerini kendiniz yazmanız gerekir. Reason ile yeni başlıyorsanız, ciltleme yazmanın başlamak istediğiniz bir şey olmadığını, çünkü Reason’un ekosistemindeki en zorlayıcı şeylerden biri olduğunu unutmayın.

Neyse ki, Nedeni bağlama yazma hakkında bir yazı yazıyorum, bu yüzden bizi izlemeye devam edin!

Bir JavaScript kütüphanesinden bazı işlevlere ihtiyaç duyduğunuzda, bir kütüphanenin Sebep ciltlerini bir bütün olarak yazmanıza gerek yoktur. Bunu yalnızca kullanmanız gereken işlevler veya bileşenler için yapabilirsiniz.

ReasonReact

Bu makale, ReactReact kütüphanesi sayesinde React'teki React'i yazmakla ilgilidir.

Belki de şimdi “Neden Neden React'i Sebep olarak kullanmam gerektiğini bilmiyorum” diye düşünüyorsunuz.

Bunu yapmak için ana nedenden zaten bahsettik - Sebep, React ile JavaScript'ten daha uyumlu. Neden daha uyumlu? Çünkü React, OCaml için Reason veya daha doğrusu geliştirilmiştir.

Sebep Yoluna Giden Yol

React’in ilk prototipi Facebook tarafından geliştirilmiştir ve OCaml’ın kuzeni Standard Meta Language (StandardML) ile yazılmıştır. Sonra OCaml'a taşındı. React ayrıca JavaScript'e de kopyalandı.

Bunun nedeni tüm webin JavaScript kullanmasıydı ve “Şimdi OCaml'da kullanıcı arayüzü kuracağız” demesi pek akıllıca değildi. Ve çalıştı - JavaScript'te Tepki yaygın olarak kabul edildi.

Böylece, JavaScript kitaplığı olarak React'e alışmıştık. Diğer kütüphaneler ve diller ile birlikte tepki verin - Elm, Redux, Recompose, Ramda ve PureScript - JavaScript'te popüler bir programlama yaptı. Flow ve TypeScript'in yükselişiyle birlikte statik yazma da popüler oldu. Sonuç olarak, statik tipli fonksiyonel programlama paradigması, ön uç dünyasında yaygınlaştı.

Bloomberg, 2016'da OCaml'i JavaScript'e dönüştüren derleyici BuckleScript'i geliştirdi ve geliştirdi. Bu, OCaml’ın güçlü tip sistemini kullanarak ön uçta güvenli kod yazmalarını sağladı. Onlar optimize ve cayır cayır yanan hızlı OCaml derleyicisini aldılar ve JavaScript üreten kod için arka uç üreten yerel kodunu değiştirdiler.

İşlevsel programlamanın, BuckleScript'in piyasaya sürülmesi ile birlikte popülaritesi, Facebook için başlangıçta bir ML dilinde yazılmış orijinal React fikrine geri dönmek için ideal bir iklim oluşturdu.

ReasonReact

OCaml anlambilim ve JavaScript sözdizimini alıp Nedeni yarattılar. Ayrıca Redct ilkelerinin durumsal bileşenlere yerleştirilmesi gibi ek işlevlerle React - ReasonReact kütüphanesi etrafındaki Reason sarıcısını yarattılar. Böylece React'i orijinal köklerine geri döndürdüler.

Sebepte Tepkilerin Gücü

React JavaScript’e girdiğinde, çeşitli kütüphaneleri ve araçları tanıtarak JavaScript’i React’in ihtiyaçlarına göre ayarladık. Bu aynı zamanda projelerimiz için daha fazla bağımlılık anlamına geliyordu. Bu kütüphanelerin hala geliştirilme aşamasında olduklarını ve düzenli olarak değişikliklerin ihlal edildiğinden bahsetmiyorum. Dolayısıyla bu bağımlılıkları projelerinizde dikkatli tutmanız gerekir.

Bu, JavaScript geliştirmeye başka bir karmaşıklık katmanı daha ekledi.

Tipik React uygulamanız en azından şu bağımlılıklara sahip olacaktır:

  • statik yazım - Akış / TypeScript
  • değişmezlik - değişmezJS
  • yönlendirme - ReactRouter
  • biçimlendirme - Güzel
  • astarlama - ESLint
  • yardımcı işlev - Ramda / Lodash

Şimdi ReasonReact için JavaScript React'i değiştirelim.

Hala tüm bu bağımlılıklara ihtiyacımız var mı?

  • statik yazım - yerleşik
  • değişmezlik - yerleşik
  • yönlendirme - dahili
  • biçimlendirme - yerleşik
  • astar - yerleşik
  • yardımcı işlevler - yerleşik

Bu yerleşik özellikler hakkında daha fazla bilgiyi diğer yazımda bulabilirsiniz.

ReasonReact uygulamasında, gelişiminizi kolaylaştıran birçok önemli özellik dilin kendisine dahil edildiğinden, bunlara ve diğer birçok bağımlılığa ihtiyaç duymazsınız. Bu nedenle, paketlerinizi korumak daha kolay olacak ve zamanla karmaşıklıkta bir artış elde edemezsiniz.

Bu, 20 yaşından büyük olan OCaml'a teşekkürler. Tüm temel ilkeleri yerinde ve istikrarlı olan olgunlaşmış bir dildir.

Sarmak

Başlangıçta, Sebep yaratıcıları iki seçeneğe sahipti. JavaScript'i almak ve bir şekilde daha iyi hale getirmek. Bunu yaparak tarihi yükleriyle de uğraşmaları gerekecek.

Ancak, farklı bir yola gittiler. OCaml'ı mükemmel bir dille olgunlaşmış bir dil olarak alıp, JavaScript'i andıracak şekilde değiştirdiler.

Tepki ayrıca OCaml'ın ilkelerine dayanmaktadır. Bu nedenle, Reason ile kullanırken daha iyi bir geliştirici deneyimi edineceksiniz. Reason'daki React React bileşenlerini oluşturmanın daha güvenli bir yolunu temsil eder, çünkü güçlü tip sistem arkanızdan gelir ve JavaScript (eski) sorunlarının çoğuyla uğraşmanıza gerek kalmaz.

Sıradaki ne?

JavaScript dünyasından geliyorsanız, JavaScript ile sözdizimi benzerliği nedeniyle Reason'a başlamanız daha kolay olacaktır. React'te programlama yapıyorsanız, ReasonReact React ile aynı zihinsel modele sahip olduğundan ve çok benzer bir iş akışına sahip olduğundan, tüm React bilgilerinizi kullanabileceğiniz için sizin için daha kolay olacaktır. Bu, sıfırdan başlamanıza gerek olmadığı anlamına gelir. Gelişirken Nedeni öğreneceksiniz.

Nedeni projelerinizde kullanmaya başlamanın en iyi yolu, aşamalı olarak yapmaktır. Sebep kodunu alıp, JavaScript’te ve diğer yollarda kullanabileceğinizi zaten söyledim. ReasonReact ile aynı şeyi yapabilirsiniz. ReasonReact bileşeninizi alıp, React JavaScript uygulamanızda kullanın, ya da tam tersi.

Bu artımlı yaklaşım, Facebook Messenger uygulamasının geliştirilmesinde Nedeni yaygın olarak kullanan Facebook geliştiricileri tarafından seçildi.

Reason'da React'i kullanarak bir uygulama oluşturmak ve Reason'un temellerini pratik bir şekilde öğrenmek istiyorsanız, birlikte bir Tic Tac Toe oyunu inşa edeceğimiz diğer makaleme bakın.

Herhangi bir sorunuz, eleştiriniz, gözleminiz veya iyileştirme ipucunuz varsa, aşağıya yorum yazmaktan veya Twitter veya blogum aracılığıyla bana ulaşmaktan çekinmeyin.