Tại sao tôi chuyển từ React sang Svelte và những người khác sẽ theo dõi

[ad_1]

Ảnh của Aryan Singh trên Bapt

React là lựa chọn của tôi trong nhiều năm

vào tháng 10 Ngày 14, 2015, tôi đã tổ chức buổi gặp mặt React Vancouver khai mạc. Đó là lúc tôi đã sử dụng React cho phần tốt hơn của năm và muốn mang các nhà phát triển có cùng chí hướng đến với nhau.

Hồi đó, tôi dám nói rằng, đó là một cuộc cách mạng trong thế giới web. So với các lựa chọn thay thế như jQuery, Backbone.js hoặc Angular 1.x, phát triển với React cảm thấy trực quan, mới mẻ và hiệu quả. Cá nhân, ý tưởng về các khối xây dựng biệt lập (còn gọi là các thành phần) thực sự hấp dẫn tôi vì nó tự nhiên dẫn đến một cơ sở mã có cấu trúc, được tổ chức tốt và dễ bảo trì hơn.

Trong những năm tới, tôi đã theo dõi chặt chẽ về Angular 2.x +, Vue et al nhưng không ai cảm thấy mình là một lựa chọn bất ngờ để nhảy tàu.

Sau đó, tôi đã biết về Svelte

Lần đầu tiên tôi biết về Svelte vào giữa năm 2018, gần một năm trước phiên bản 3.0 đã được phát hành (xem bên dưới). "Máy tính, xây dựng cho tôi một ứng dụng." bởi Rich Harris là điều khiến tôi bị cuốn hút trên Svelte.

Nếu bạn không quen thuộc với Svelte (https://svelte.dev/), vui lòng truy cập trang web và dành 5 phút để đọc phần giới thiệu.

Đọc nó? Có thật không? Tuyệt vời 👍

Khi tôi xem video, câu hỏi chính trong đầu tôi là liệu có đáng để học Svelte hay không và bắt đầu sử dụng nó cho các dự án mới hoặc thậm chí hiện có. Nói một cách công bằng, Svelte đã gây ấn tượng với tôi nhưng vẫn chưa đủ để nắm lấy nó đầy đủ.

Svelte 3.x

22 tháng 4 năm 2019 – Svelte 3: Suy nghĩ lại về phản ứng là bài đăng trên blog đã chờ đợi.

Xin vui lòng dành chút thời gian để đọc bài đăng trên blog và xem video – đó là về bảng tính nhưng tôi hứa đó là niềm vui 😉

Tại sao điều này lại trở nên lớn như vậy? Đối với một người, nhóm Svelte đã nói về phiên bản 3 khá nhiều và tôi muốn thấy nó hoạt động. Mặt khác, Svelte và lời hứa của nó đã kích thích tôi nhiều hơn cả React khi tôi nghe về nó lần đầu tiên.

Tôi đã cố vấn cho các nhà phát triển web vào thời điểm đó và đã dành khá nhiều thời gian để tăng tốc độ cho họ Phản ứng. Những thứ như JSX, CSS-in-JS, Redux, tạo phản ứng ứng dụng, SSR và các khái niệm khác cần phải học, hiểu và ở một mức độ nhất định được làm chủ để phát triển ứng dụng React.

Không có điều gì là cần thiết với Svelte.

  



 Xin chào {name}!

App.svelte

Đủ đơn giản? Tôi đồng ý. Trên thực tế, nó rất đơn giản, tôi giới thiệu nó cho những người bạn mới biết về phát triển web.

Thật nhanh, điều gì đang xảy ra trong mã đó?

Kịch bản Thẻ là nơi logic của thành phần tồn tại.

Thẻ kiểu định nghĩa CSS của thành phần này – không có rò rỉ nào bên ngoài thành phần này, vì vậy chúng tôi có thể sử dụng một cách an toàn h1 và nó chỉ áp dụng cho thành phần này. Đó là CSS thực sự, không phải là một đối tượng Javascript giả vờ là CSS hoặc một chuỗi ký tự chuỗi giả vờ là CSS.

Ở phía dưới là HTML của thành phần. Sử dụng các biến với {myVariable} . So với JSX của React, Svelte cho phép bạn sử dụng các thẻ HTML chính xác như cho lớp thay vì forHtml và className . Xem "Sự khác biệt về thuộc tính" trong tài liệu React để biết danh sách tất cả các thuộc tính không phải là HTML tiêu chuẩn.

Hãy xây dựng lại các ví dụ React

Để cho bạn biết ý tưởng của Svelte trông như thế nào so với Phản ứng lại, hãy xây dựng lại những gì được liệt kê trên https://reactjs.org/.[19459003[[19459030[AThànhphầnđơngiản

Xem đoạn mã ở trên.

Một thành phần có trạng thái

Bản demo tương tác

  

Giây: {giây}

App.svelte

Phản ứng: 33 dòng
Svelte: 6 dòng

]

Bản demo tương tác

  


   TODO 
  
  
    
      Những gì cần phải được thực hiện?

App.svelte

  


  {#each mục dưới dạng mục}
     {item.text} 
  {/mỗi}

TodoList.svelte

Phản ứng: 66 dòng
Svelte: 43 dòng

Bản demo tương tác

  


  



   Đầu vào 
  
    Nhập một số đánh dấu
  
    <h3> Đầu ra </h3>
  <div
    className="content">
      {@html md.render (giá trị)}
  </div>
</div>
</code> </pre><figcaption> App.svelte </figcaption></figure>
</p>
<p> Phản ứng: 42 dòng <br /> Svelte: 24 dòng </p>
<blockquote><p> Ít mã hơn [ítlỗihơn</p>
<p> code = hiệu suất tốt hơn = trải nghiệm người dùng tốt hơn <br /> Ít mã hơn = ít bảo trì hơn = nhiều thời gian hơn để phát triển các tính năng </p></blockquote>
<h2 id="what-else-do-i-like-about-svelte"> Tôi thích gì khác về Svelte? </h2>
<h3 id="reactivity"> Tính phản ứng </h3>
<p> tính năng mạnh mẽ là <em> tuyên bố phản ứng </em>. Hãy bắt đầu với một ví dụ: </p>
<figure class="kg-card kg-code-card">
<pre> <code class="language-svelte"> <script>
  hãy đếm = 0;
  $: nhân đôi = đếm * 2;

  hàm xử lýClick () {
    đếm + = 1;
  }
</script>

<button on:click={handleClick}>
  Đã nhấp {đếm} {đếm === 1? 'thời gian': 'lần'}
</button>

<p> {Count} nhân đôi là {nhân đôi} </p> </code> </pre><figcaption> Tuyên bố phản ứng của Svelte </figcaption></figure>
</p>
<p> Bất cứ khi nào bạn có các biến phụ thuộc vào các biến khác, hãy khai báo với <code> $: myVariable = [code that references other variables] </code>. Ở trên, bất cứ khi nào <code> đếm </code> thay đổi, <code> đã nhân đôi </code> được tính toán lại tự động và cập nhật giao diện người dùng để phản ánh giá trị mới. </p>
<h3 id="stores"> Lưu trữ </h3>
<p> được chia sẻ trên các thành phần, Svelte cung cấp khái niệm về cửa hàng. Hướng dẫn giải thích các cửa hàng tốt. Không cần phải đọc hướng dẫn dài dòng – các cửa hàng rất đơn giản. </p>
<p> <strong> Cửa hàng có nguồn gốc </strong> </p>
<p> Thông thường, một cửa hàng phụ thuộc vào các cửa hàng khác. Đây là nơi Svelte cung cấp <code> có nguồn gốc () </code> để kết hợp các cửa hàng. Xem hướng dẫn để biết chi tiết. </p>
<h3 id="await-as-a-logic-block"> Chờ đợi như một khối logic </h3>
<p> Được rồi, cái này khá thanh lịch. Hãy bắt đầu với mã (bản demo tương tác): </p>
<pre> <code class="language-svelte"> <script>
  hãy để githubRepoInfoPromise;
  hãy repoName = 'mikenikles / ghost-v3-google-cloud-Storage';

  const loadRepoInfo = async () => {
    const answer = await fetch (`https://api.github.com/repose/$ {repoName}`);
    if (hồi đáp.status === 200) {
      trả về đang chờ answer.json ();
    } khác {
      ném lỗi mới (answer.statusText);
    }
  }

  const xử lýClick = () => {
    githubRepoInfoPromise = loadRepoInfo ();
  }
</script>

<input type="text" placeholder="user/repo" bind:value={repoName} />
<button on:click={handleClick}>
  tải thông tin repo Github
</button>

{#await githubRepoInfoPromise}
  <p> ... đang tải </p>
{: sau đó là apiResponse}
  <p> {apiResponse? `$ {apiResponse.full_name} được viết bằng $ {apiResponse.l Language}`: ''} </p>
{: lỗi bắt}
  <p style="color: red"> {error.message} </p>
{/ await} </code> </pre>
<p> Xem khối <code> #await </code> trong HTML? Trong ứng dụng trong thế giới thực, bạn sẽ có thành phần Đang tải, thành phần lỗi và thành phần thực tế để hiển thị phản hồi API trong trường hợp này. Hãy thử nhập tên repo không hợp lệ vào hộp văn bản để kích hoạt trường hợp lỗi. </p>
<h2 id="but-wait-what-about-"> "Nhưng chờ đã, còn …" </h2>
<h3 id="open-source-components"> các thành phần nguồn mở? </h3>
<p> Phản hồi chính tôi nhận được khi giới thiệu Svelte với ai đó là "nhưng còn về hệ sinh thái, các thành phần, hướng dẫn, công cụ, v.v." </p>
<p> Vâng, không có nơi nào có nhiều thành phần Svelte nguồn mở như có các thành phần cho Phản ứng. Tuy nhiên, có nói rằng, bạn có thường xuyên sử dụng một thành phần React nguồn mở và tích hợp nó mà không có bất kỳ vấn đề hoặc chi phí không cần thiết nào không? Tôi cho rằng nhiều người trong chúng ta trong cộng đồng Javascript đã trở nên quá phụ thuộc vào <code> cài đặt npm ... </code> để ghép một ứng dụng web. Thường xây dựng các thành phần của riêng bạn, đặc biệt là ở Svelte, dẫn đến tổng thời gian sử dụng ít hơn. Tôi không có dữ liệu để chứng minh rằng, nó dựa trên kinh nghiệm cá nhân của tôi. </p>
<p> Mặc dù vậy, có một danh sách các thành phần Svelte ngày càng tăng cho bất cứ ai thấy thoải mái khi sử dụng lại các thành phần nguồn mở. </p>
<h3 id="finding-a-job"> một công việc? </h3>
<p> Rất nhiều cơ hội, xem https://sveltejobs.dev/. Đội ngũ kỹ thuật gian lận của Apple đang tìm kiếm một nhà phát triển Svelte (kể từ tháng 12 năm 2019). </p>
<p> Cũng cần nhớ rằng, sự cạnh tranh nhỏ hơn nhiều so với việc xin một công việc đòi hỏi React, Vue, Angular, v.v. </p>
<h2 id="and-then-there-s-sapper-to-deploy-svelte-apps"> Và sau đó, có Sapper để triển khai các ứng dụng Svelte </h2>
<p> Phát triển một ứng dụng chỉ là một phần của chiếc bánh đầy đủ – ứng dụng cũng cần được triển khai. Đối với điều này, nhóm Svelte cung cấp Sapper. Đó là toàn bộ bài viết, vì vậy bây giờ xin hãy xem trang web để biết chi tiết. </p>
<h2 id="conclusion"> Kết luận </h2>
<p> Điều đó đưa tôi đến phần thứ hai của tiêu đề blog này, "tại sao những người khác sẽ theo dõi . " Mỗi ngày, các nhà phát triển web mới bắt đầu hành trình của họ và điều đầu tiên nhiều người gặp phải là không chắc chắn nên học gì trước. Tôi nói rằng tương lai là về sự đơn giản, thời gian nhanh chóng để tiếp thị và tôi không thể nghĩ ra điều gì đơn giản và nhanh chóng hơn thế này: </p>
<pre> <code class="language-svelte"> <script>
  đặt tên = 'thế giới';
</script>

<style>
  h1 {
    màu: xanh;
  }
</style>

<h1> Xin chào {name}! </h1> </code> </pre>
<p> Đừng đánh tôi trên Twitter @mikenikles với phản hồi của bạn. </p>
<p> 👋 </p>
</p></div>
<p> <script async src="http://platform.twitter.com/widgets.js" charset="utf-8"> ]
[ad_2]
<br /><a>Source link: webdesignernews </a></p>

	
	<div class="blog-share text-center"><div class="is-divider medium"></div><div class="social-icons share-icons share-row relative icon-style-outline " ><a href="whatsapp://send?text=T%E1%BA%A1i%20sao%20t%C3%B4i%20chuy%E1%BB%83n%20t%E1%BB%AB%20React%20sang%20Svelte%20v%C3%A0%20nh%E1%BB%AFng%20ng%C6%B0%E1%BB%9Di%20kh%C3%A1c%20s%E1%BA%BD%20theo%20d%C3%B5i - https://webzado.com/tai-sao-toi-chuyen-tu-react-sang-svelte-va-nhung-nguoi-khac-se-theo-doi/" data-action="share/whatsapp/share" class="icon button circle is-outline tooltip whatsapp show-for-medium" title="Share on WhatsApp"><i class="icon-phone"></i></a><a href="//www.facebook.com/sharer.php?u=https://webzado.com/tai-sao-toi-chuyen-tu-react-sang-svelte-va-nhung-nguoi-khac-se-theo-doi/" data-label="Facebook" onclick="window.open(this.href,this.title,'width=500,height=500,top=300px,left=300px');  return false;" rel="nofollow" target="_blank" class="icon button circle is-outline tooltip facebook" title="Share on Facebook"><i class="icon-facebook" ></i></a><a href="//twitter.com/share?url=https://webzado.com/tai-sao-toi-chuyen-tu-react-sang-svelte-va-nhung-nguoi-khac-se-theo-doi/" onclick="window.open(this.href,this.title,'width=500,height=500,top=300px,left=300px');  return false;" rel="nofollow" target="_blank" class="icon button circle is-outline tooltip twitter" title="Share on Twitter"><i class="icon-twitter" ></i></a><a href="mailto:enteryour@addresshere.com?subject=T%E1%BA%A1i%20sao%20t%C3%B4i%20chuy%E1%BB%83n%20t%E1%BB%AB%20React%20sang%20Svelte%20v%C3%A0%20nh%E1%BB%AFng%20ng%C6%B0%E1%BB%9Di%20kh%C3%A1c%20s%E1%BA%BD%20theo%20d%C3%B5i&body=Check%20this%20out:%20https://webzado.com/tai-sao-toi-chuyen-tu-react-sang-svelte-va-nhung-nguoi-khac-se-theo-doi/" rel="nofollow" class="icon button circle is-outline tooltip email" title="Email to a Friend"><i class="icon-envelop" ></i></a><a href="//pinterest.com/pin/create/button/?url=https://webzado.com/tai-sao-toi-chuyen-tu-react-sang-svelte-va-nhung-nguoi-khac-se-theo-doi/&media=&description=T%E1%BA%A1i%20sao%20t%C3%B4i%20chuy%E1%BB%83n%20t%E1%BB%AB%20React%20sang%20Svelte%20v%C3%A0%20nh%E1%BB%AFng%20ng%C6%B0%E1%BB%9Di%20kh%C3%A1c%20s%E1%BA%BD%20theo%20d%C3%B5i" onclick="window.open(this.href,this.title,'width=500,height=500,top=300px,left=300px');  return false;" rel="nofollow" target="_blank" class="icon button circle is-outline tooltip pinterest" title="Pin on Pinterest"><i class="icon-pinterest" ></i></a><a href="//plus.google.com/share?url=https://webzado.com/tai-sao-toi-chuyen-tu-react-sang-svelte-va-nhung-nguoi-khac-se-theo-doi/" target="_blank" class="icon button circle is-outline tooltip google-plus" onclick="window.open(this.href,this.title,'width=500,height=500,top=300px,left=300px');  return false;" rel="nofollow" title="Share on Google+"><i class="icon-google-plus" ></i></a><a href="//www.linkedin.com/shareArticle?mini=true&url=https://webzado.com/tai-sao-toi-chuyen-tu-react-sang-svelte-va-nhung-nguoi-khac-se-theo-doi/&title=T%E1%BA%A1i%20sao%20t%C3%B4i%20chuy%E1%BB%83n%20t%E1%BB%AB%20React%20sang%20Svelte%20v%C3%A0%20nh%E1%BB%AFng%20ng%C6%B0%E1%BB%9Di%20kh%C3%A1c%20s%E1%BA%BD%20theo%20d%C3%B5i" onclick="window.open(this.href,this.title,'width=500,height=500,top=300px,left=300px');  return false;"  rel="nofollow" target="_blank" class="icon button circle is-outline tooltip linkedin" title="Share on LinkedIn"><i class="icon-linkedin" ></i></a></div></div></div><!-- .entry-content2 -->

	<footer class="entry-meta text-left">
		This entry was posted in <a href="https://webzado.com/category/blog/" rel="category tag">blog</a>. Bookmark the <a href="https://webzado.com/tai-sao-toi-chuyen-tu-react-sang-svelte-va-nhung-nguoi-khac-se-theo-doi/" title="Permalink to Tại sao tôi chuyển từ React sang Svelte và những người khác sẽ theo dõi" rel="bookmark">permalink</a>.	</footer><!-- .entry-meta -->


        <nav role="navigation" id="nav-below" class="navigation-post">
	<div class="flex-row next-prev-nav bt bb">
		<div class="flex-col flex-grow nav-prev text-left">
			    <div class="nav-previous"><a href="https://webzado.com/lam-the-nao-de-tro-thanh-mot-nha-thiet-ke-do-hoa-ma-khong-can-den-truong-dai-hoc/" rel="prev"><span class="hide-for-small"><i class="icon-angle-left" ></i></span> Làm thế nào để trở thành một nhà thiết kế đồ họa mà không cần đến trường đại học</a></div>
		</div>
		<div class="flex-col flex-grow nav-next text-right">
			    <div class="nav-next"><a href="https://webzado.com/trinh-tao-bang-mau-ngau-nhien/" rel="next">Trình tạo bảng màu ngẫu nhiên <span class="hide-for-small"><i class="icon-angle-right" ></i></span></a></div>		</div>
	</div>

	    </nav><!-- #nav-below -->

    	</div><!-- .article-inner -->
</article><!-- #-968 -->




<div id="comments" class="comments-area">

	
	
	
		<div id="respond" class="comment-respond">
		<h3 id="reply-title" class="comment-reply-title">Để lại một bình luận <small><a rel="nofollow" id="cancel-comment-reply-link" href="/tai-sao-toi-chuyen-tu-react-sang-svelte-va-nhung-nguoi-khac-se-theo-doi/#respond" style="display:none;">Hủy</a></small></h3><form action="https://webzado.com/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Email của bạn sẽ không được hiển thị công khai.</span> <span class="required-field-message">Các trường bắt buộc được đánh dấu <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Bình luận <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required>
Tên * 
Email * 
Trang web 
 

Δ

blog

Tại sao tôi chuyển từ React sang Svelte và những người khác sẽ theo dõi

React là lựa chọn của tôi trong nhiều năm

Sau đó, tôi đã biết về Svelte

Svelte 3.x

Xin chào {name}!

Thật nhanh, điều gì đang xảy ra trong mã đó?

Hãy xây dựng lại các ví dụ React

Một thành phần có trạng thái

]

Bản demo tương tác

`TODO Những gì cần phải được thực hiện?`
App.svelte

`{#each mục dưới dạng mục} {item.text} {/mỗi}`
TodoList.svelte

Phản ứng: 66 dòng
Svelte: 43 dòng

TODO

Đầu vào

Liên hệ với chúng tôi