Typowe technologie internetowe po stronie klientaCommon client-side web technologies

"Witryny sieci Web powinny wyglądać od wewnątrz do zewnątrz"."Websites should look good from the inside and out."
-Paul Cookson- Paul Cookson

Aplikacje ASP.NET Core są aplikacjami sieci Web, a zazwyczaj polegają na technologiach sieci Web po stronie klienta, takich jak HTML, CSS i JavaScript.ASP.NET Core applications are web applications and they typically rely on client-side web technologies like HTML, CSS, and JavaScript. Dzieląc zawartość strony (kod HTML) z układu i stylów (CSS) oraz jej zachowaniem (za pośrednictwem języka JavaScript), złożone aplikacje sieci Web mogą korzystać z oddzielenia zasad.By separating the content of the page (the HTML) from its layout and styling (the CSS), and its behavior (via JavaScript), complex web apps can leverage the Separation of Concerns principle. Przyszłe zmiany struktury, projektu lub zachowania aplikacji mogą być łatwiejsze, gdy nie są intertwined te problemy.Future changes to the structure, design, or behavior of the application can be made more easily when these concerns are not intertwined.

Chociaż język HTML i CSS są stosunkowo stabilne, JavaScript, za pomocą struktur aplikacji i narzędzi, deweloperzy współpracują z programem w celu kompilowania aplikacji opartych na sieci Web, rozwijając się z szybkością breakneck.While HTML and CSS are relatively stable, JavaScript, by means of the application frameworks and utilities developers work with to build web-based applications, is evolving at breakneck speed. W tym rozdziale przedstawiono kilka sposobów używania języka JavaScript przez deweloperów sieci Web oraz ogólne omówienie wizualizacji i przereagowania na biblioteki po stronie klienta.This chapter looks at a few ways that JavaScript is used by web developers and provides a high-level overview of the Angular and React client-side libraries.

Uwaga

Blazorstanowi alternatywę dla platform języka JavaScript do tworzenia rozbudowanych, interaktywnych interfejsów użytkownika klienta. provides an alternative to JavaScript frameworks for building rich, interactive client user interfaces. Obsługa po stronie klienta Blazor jest nadal w wersji zapoznawczej, dlatego na potrzeby tego rozdziału jest już poza zakresem.Client-side Blazor support is still in preview, so for now it's out of scope for this chapter.

HTMLHTML

HTML jest standardowym językiem znaczników używanym do tworzenia stron sieci Web i aplikacji sieci Web.HTML is the standard markup language used to create web pages and web applications. Jego elementy tworzą bloki konstrukcyjne stron, reprezentujące sformatowany tekst, obrazy, wejścia formularzy i inne struktury.Its elements form the building blocks of pages, representing formatted text, images, form inputs, and other structures. Gdy przeglądarka wysyła żądanie do adresu URL, niezależnie od tego, czy pobierana jest strona, czy aplikacja, pierwszy zwrócony element jest dokumentem HTML.When a browser makes a request to a URL, whether fetching a page or an application, the first thing that is returned is an HTML document. Ten dokument HTML może odwoływać się do lub zawierać dodatkowe informacje na temat wyglądu i układu w formie CSS lub zachowania w formie języka JavaScript.This HTML document may reference or include additional information about its look and layout in the form of CSS, or behavior in the form of JavaScript.

CSSCSS

CSS (kaskadowe arkusze stylów) służy do kontrolowania wyglądu i układu elementów HTML.CSS (Cascading Style Sheets) is used to control the look and layout of HTML elements. Style CSS mogą być stosowane bezpośrednio do elementu HTML, zdefiniowane oddzielnie na tej samej stronie lub zdefiniowane w osobnym pliku i przywoływane przez stronę.CSS styles can be applied directly to an HTML element, defined separately on the same page, or defined in a separate file and referenced by the page. Style kaskadowo na podstawie sposobu ich używania do wybierania danego elementu HTML.Styles cascade based on how they are used to select a given HTML element. Na przykład styl może dotyczyć całego dokumentu, ale zostałby zastąpiony przez styl, który ma zastosowanie do określonego elementu.For instance, a style might apply to an entire document, but would be overridden by a style that applied to a particular element. Analogicznie, styl specyficzny dla elementu zostałby zastąpiony przez styl stosowany do klasy CSS, która została zastosowana do elementu, który z kolei zostałby zastąpiony przez styl przeznaczony dla określonego wystąpienia tego elementu (za pośrednictwem jego identyfikatora).Likewise, an element-specific style would be overridden by a style that applied to a CSS class that was applied to the element, which in turn would be overridden by a style targeting a specific instance of that element (via its ID). Rysunek 6-1Figure 6-1

Reguły specyfikowania CSS

Rysunek 6-1.Figure 6-1. Reguły specyficzne dla CSS, w kolejności.CSS Specificity rules, in order.

Najlepiej zachować style w swoich oddzielnych plikach arkusza stylów, a następnie użyć kaskadowego umieszczania na podstawie zaznaczenia, aby zaimplementować style spójne i wielokrotnego użytku w aplikacji.It's best to keep styles in their own separate stylesheet files, and to use selection-based cascading to implement consistent and reusable styles within the application. Należy unikać umieszczania reguł stylu w kodzie HTML i stosowania stylów do określonych poszczególnych elementów (a nie całych klas elementów lub elementów, które mają określoną klasę CSS), powinien być wyjątek, a nie reguła.Placing style rules within HTML should be avoided, and applying styles to specific individual elements (rather than whole classes of elements, or elements that have had a particular CSS class applied to them) should be the exception, not the rule.

Preprocesora CSSCSS preprocessors

Arkusze stylów CSS nie obsługują logiki warunkowej, zmiennych i innych funkcji języka programowania.CSS stylesheets lack support for conditional logic, variables, and other programming language features. W ten sposób duże arkusze stylów często zawierają dość dużo powtórzeń, ponieważ ten sam kolor, czcionka lub inne ustawienie są stosowane do wielu różnych odmian elementów HTML i klas CSS.Thus, large stylesheets often include quite a bit of repetition, as the same color, font, or other setting is applied to many different variations of HTML elements and CSS classes. Preprocesora CSS mogą ułatwić arkuszom stylów zastosowanie suchej zasady przez dodanie obsługi zmiennych i logiki.CSS preprocessors can help your stylesheets follow the DRY principle by adding support for variables and logic.

Najpopularniejsze preprocesora CSS to Sass i mniejsze.The most popular CSS preprocessors are Sass and LESS. Zarówno w przypadku rozszerzeń CSS, jak i są zgodne z poprzednimi wersjami, co oznacza, że zwykły plik CSS jest prawidłowym plikiem Sass lub LESS.Both extend CSS and are backward compatible with it, meaning that a plain CSS file is a valid Sass or LESS file. Sass jest oparty na języku Ruby i mniej jest oparty na kodzie JavaScript, a oba są zwykle uruchamiane jako część lokalnego procesu tworzenia.Sass is Ruby-based and LESS is JavaScript based, and both typically run as part of your local development process. Dostępne są zarówno narzędzia wiersza polecenia, jak i wbudowana obsługa programu Visual Studio do uruchamiania ich przy użyciu zadań Gulp lub grunt.Both have command-line tools available, as well as built-in support in Visual Studio for running them using Gulp or Grunt tasks.

JavaScriptJavaScript

JavaScript to dynamiczny, interpretowany język programowania, który został znormalizowany w specyfikacji języka ECMAScript.JavaScript is a dynamic, interpreted programming language that has been standardized in the ECMAScript language specification. Jest to język programowania w sieci Web.It is the programming language of the web. Podobnie jak w przypadku CSS, skrypty JavaScript można definiować jako atrybuty wewnątrz elementów HTML, jako bloki skryptu na stronie lub w oddzielnych plikach.Like CSS, JavaScript can be defined as attributes within HTML elements, as blocks of script within a page, or in separate files. Podobnie jak w przypadku CSS, zaleca się, aby zorganizować JavaScript w osobnych plikach, tak jak to możliwe, z poziomu kodu HTML znalezionego na poszczególnych stronach sieci Web lub w widokach aplikacji.Just like CSS, it's recommended to organize JavaScript into separate files, keeping it separated as much as possible from the HTML found on individual web pages or application views.

Podczas pracy z JavaScript w aplikacji sieci Web, istnieje kilka zadań, które zwykle trzeba wykonać:When working with JavaScript in your web application, there are a few tasks that you'll commonly need to perform:

  • Zaznaczanie elementu HTML i pobieranie i/lub aktualizowanie jego wartości.Selecting an HTML element and retrieving and/or updating its value.

  • Wykonywanie zapytań do internetowego interfejsu API w celu uzyskania danych.Querying a Web API for data.

  • Wysyłanie polecenia do internetowego interfejsu API (i reagowanie na wywołanie zwrotne z jego wynikiem).Sending a command to a Web API (and responding to a callback with its result).

  • Wykonywanie walidacji.Performing validation.

Wszystkie te zadania można wykonać wyłącznie JavaScript, ale wiele bibliotek istnieje, aby ułatwić wykonywanie tych zadań.You can perform all of these tasks with JavaScript alone, but many libraries exist to make these tasks easier. Jedną z pierwszych i najbardziej pomyślnych bibliotek jest jQuery, która jest w dalszym ciągu popularną opcją uproszczenia tych zadań na stronach sieci Web.One of the first and most successful of these libraries is jQuery, which continues to be a popular choice for simplifying these tasks on web pages. W przypadku aplikacji jednostronicowych (aplikacji jednostronicowych), jQuery nie oferuje wielu wymaganych funkcji, które są związane ze współdziałaniem i ofertą reagowania.For Single Page Applications (SPAs), jQuery doesn't provide many of the desired features that Angular and React offer.

Starsze aplikacje sieci Web za pomocą platformy jQueryLegacy web apps with jQuery

Chociaż Ancient przez standardy języka JavaScript, platforma jQuery nadal jest powszechnie używaną biblioteką do pracy z HTML/CSS i kompilowania aplikacji, które tworzą wywołania AJAX do interfejsów API sieci Web.Although ancient by JavaScript framework standards, jQuery continues to be a commonly used library for working with HTML/CSS and building applications that make AJAX calls to web APIs. Jednak system jQuery działa na poziomie modelu DOM (Document Object Model), a domyślnie oferuje tylko bezwzględny, a nie deklaratywny model.However, jQuery operates at the level of the browser document object model (DOM), and by default offers only an imperative, rather than declarative, model.

Załóżmy na przykład, że jeśli wartość pola tekstowego przekracza 10, element na stronie powinien być widoczny.For example, imagine that if a textbox's value exceeds 10, an element on the page should be made visible. W platformie jQuery zwykle jest to implementowane przez zapisanie obsługi zdarzeń z kodem, który sprawdzi wartość pola tekstowego i ustawi widoczność elementu docelowego na podstawie tej wartości.In jQuery, this would typically be implemented by writing an event handler with code that would inspect the textbox's value and set the visibility of the target element based on that value. Jest to bezwzględne podejście oparte na kodzie.This is an imperative, code-based approach. Inna platforma może zamiast tego użyć zapytania wiązania, aby powiązać widoczność elementu z wartością pola tekstowego.Another framework might instead use databinding to bind the visibility of the element to the value of the textbox declaratively. Nie wymaga to pisania żadnego kodu, ale tylko wymaga dekorowania nazwy elementów związanych z atrybutami powiązania danych.This would not require writing any code, but instead only requires decorating the elements involved with data binding attributes. Ponieważ zachowania po stronie klienta zwiększają się bardziej złożone, podejścia do powiązań danych często powodują prostsze rozwiązania z mniejszą ilością kodu i złożoności warunkowej.As client-side behaviors grow more complex, data binding approaches frequently result in simpler solutions with less code and conditional complexity.

jQuery a platforma SPAjQuery vs a SPA Framework

CzynnikFactor jQueryjQuery AngularAngular
Abstrakcyjny model DOMAbstracts the DOM TakYes TakYes
Obsługa technologii AJAXAJAX Support TakYes TakYes
Deklaratywne powiązanie danychDeclarative Data Binding NieNo TakYes
Routing w stylu MVCMVC-style Routing NieNo TakYes
Tworzenia szablonówTemplating NieNo TakYes
Routing linkówDeep-Link Routing NieNo TakYes

Większość funkcji jQuery nie może zostać dodana w sposób wewnętrzny z dodaniem innych bibliotek.Most of the features jQuery lacks intrinsically can be added with the addition of other libraries. Jednak mechanizm SPA, taki jak kątowy, udostępnia te funkcje w bardziej zintegrowany sposób, ponieważ został zaprojektowany ze wszystkimi z nich na myśli od samego początku.However, a SPA framework like Angular provides these features in a more integrated fashion, since it's been designed with all of them in mind from the start. Ponadto jQuery jest bezwzględną biblioteką, co oznacza, że trzeba wywoływać funkcje jQuery w celu wykonywania jakichkolwiek czynności za pomocą jQuery.Also, jQuery is an imperative library, meaning that you need to call jQuery functions in order to do anything with jQuery. Większość pracy i funkcji, które zapewnia platforma SPA, może być wprowadzana w sposób deklaratywny, co nie wymaga faktycznego zapisania kodu.Much of the work and functionality that SPA frameworks provide can be done declaratively, requiring no actual code to be written.

Powiązanie danych to doskonałe przykładowe rozwiązanie.Data binding is a great example of this. W platformie jQuery zwykle przyjmuje tylko jeden wiersz kodu do uzyskania wartości elementu DOM lub ustawienia wartości elementu.In jQuery, it usually only takes one line of code to get the value of a DOM element or to set an element's value. Jednak należy napisać ten kod w dowolnym momencie, gdy trzeba zmienić wartość elementu i czasami będzie miało miejsce w wielu funkcjach na stronie.However, you have to write this code anytime you need to change the value of the element, and sometimes this will occur in multiple functions on a page. Innym typowym przykładem jest widoczność elementu.Another common example is element visibility. W platformie jQuery może istnieć wiele różnych miejsc, w których można napisać kod, aby kontrolować, czy niektóre elementy były widoczne.In jQuery, there might be many different places where you'd write code to control whether certain elements were visible. W każdym z tych przypadków, gdy korzystasz z powiązania danych, nie trzeba pisać kodu.In each of these cases, when using data binding, no code would need to be written. Wystarczy powiązać wartość lub widoczność elementów na ViewModel na stronie, a zmiany w tym ViewModel zostaną automatycznie odzwierciedlone w elementach powiązanych.You'd simply bind the value or visibility of the elements in question to a viewmodel on the page, and changes to that viewmodel would automatically be reflected in the bound elements.

Aplikacji jednostronicowych kątowyAngular SPAs

Wartość kątowa pozostaje jednym z najpopularniejszych struktur języka JavaScript.Angular remains one of the world's most popular JavaScript frameworks. Ze względu na to, że zespół odbudował strukturę od podstaw (przy użyciu języka TypeScript) i pociąga z oryginalnej nazwy AngularJS do zwykłego kątowego.Since Angular 2, the team rebuilt the framework from the ground up (using TypeScript) and rebranded from the original AngularJS name to simply Angular. Teraz w ciągu kilku lat przeprojektowany element skośny nadal jest niezawodną strukturą do tworzenia aplikacji jednostronicowych.Now several years old, the redesigned Angular continues to be a robust framework for building Single Page Applications.

Aplikacje kątowe są kompilowane ze składników.Angular applications are built from components. Składniki łączą szablony HTML z obiektami specjalnymi i kontrolują część strony.Components combine HTML templates with special objects and control a portion of the page. Poniżej przedstawiono prosty składnik z dokumentów o skośności:A simple component from Angular's docs is shown here:

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<h1>Hello {{name}}</h1>`
})

export class AppComponent { name = 'Angular'; }

Składniki są definiowane za pomocą @Component funkcji dekoratora, która pobiera metadane dotyczące składnika.Components are defined using the @Component decorator function, which takes in metadata about the component. Właściwość selektora identyfikuje identyfikator elementu na stronie, w którym zostanie wyświetlony ten składnik.The selector property identifies the ID of the element on the page where this component will be displayed. Właściwość szablonu to prosty szablon HTML, który zawiera symbol zastępczy, który odpowiada właściwości nazwy składnika zdefiniowanej w ostatnim wierszu.The template property is a simple HTML template that includes a placeholder that corresponds to the component's name property, defined on the last line.

Pracując ze składnikami i szablonami, a nie elementami modelu DOM, aplikacje kątowe mogą działać na wyższym poziomie abstrakcji i z mniej ogólnym kodem niż aplikacje zapisywane przy użyciu tylko języka JavaScript (nazywanego również "Wanili JS") lub jQuery.By working with components and templates, instead of DOM elements, Angular apps can operate at a higher level of abstraction and with less overall code than apps written using just JavaScript (also called "vanilla JS") or with jQuery. Kątowy nakłada również pewne kolejność organizowania plików skryptów po stronie klienta.Angular also imposes some order on how you organize your client-side script files. Zgodnie z Konwencją aplikacje kątowe używają wspólnej struktury folderów z plikami skryptów modułów i składników znajdującymi się w folderze aplikacji.By convention, Angular apps use a common folder structure, with module and component script files located in an app folder. Skrypty kątowe związane z kompilowaniem, wdrażaniem i testowaniem aplikacji zwykle znajdują się w folderze wyższego poziomu.Angular scripts concerned with building, deploying, and testing the app are typically located in a higher-level folder.

Aplikacje kątowe można opracowywać przy użyciu interfejsu wiersza polecenia.You can develop Angular apps by using a CLI. Wprowadzenie do programowania kątowego lokalnie (przy założeniu, że masz już zainstalowaną usługę git i npm), składa się z prostego klonowania repozytorium z usługi GitHub i uruchamiania npm install i npm start .Getting started with Angular development locally (assuming you already have git and npm installed) consists of simply cloning a repo from GitHub and running npm install and npm start. Poza tym, kątowy udostępnia własny interfejs wiersza polecenia, który może tworzyć projekty, dodawać pliki i pomagać w testowaniu, tworzeniu i wdrażaniu zadań.Beyond this, Angular ships its own CLI, which can create projects, add files, and assist with testing, bundling, and deployment tasks. Ten interfejs wiersza polecenia wygodę dla sprawia, że jest to szczególnie zgodne z ASP.NET Core, które również oferuje doskonałą obsługę interfejsu wiersza polecenia.This CLI friendliness makes Angular especially compatible with ASP.NET Core, which also features great CLI support.

Firma Microsoft opracowała aplikację referencyjną eShopOnContainers, która obejmuje implementację spa.Microsoft has developed a reference application, eShopOnContainers, which includes an Angular SPA implementation. Ta aplikacja obejmuje moduły kątowe służące do zarządzania koszykiem zakupów online, ładowania i wyświetlania elementów z wykazu oraz do obsługi tworzenia zamówień.This app includes Angular modules to manage the online store's shopping basket, load and display items from its catalog, and handling order creation. Przykładową aplikację można wyświetlić i pobrać z witryny GitHub.You can view and download the sample application from GitHub.

ReactReact

W przeciwieństwie do elementu kątowego, który oferuje pełną implementację wzorca typu Model-View-Controller, reagowanie dotyczy tylko widoków.Unlike Angular, which offers a full Model-View-Controller pattern implementation, React is only concerned with views. Nie jest to struktura, tylko biblioteka, więc aby utworzyć SPA, należy użyć dodatkowych bibliotek.It's not a framework, just a library, so to build a SPA you'll need to leverage additional libraries. Istnieje wiele bibliotek, które są przeznaczone do użycia z reagują na tworzenie rozbudowanych aplikacji jednostronicowych.There are a number of libraries that are designed to be used with React to produce rich single page applications.

Jedną z najważniejszych funkcji reakcji jest użycie wirtualnego modelu DOM.One of React's most important features is its use of a virtual DOM. Wirtualny DOM zapewnia kilka korzyści, w tym wydajność (wirtualny DOM, można zoptymalizować, które części rzeczywistego modelu DOM wymagają aktualizacji) i możliwość testowania (nie trzeba mieć przeglądarki do testowania reakcji i interakcji z jej wirtualnym modelem DOM).The virtual DOM provides React with several advantages, including performance (the virtual DOM can optimize which parts of the actual DOM need to be updated) and testability (no need to have a browser to test React and its interactions with its virtual DOM).

Reagowanie jest również nietypowe w sposobie działania z kodem HTML.React is also unusual in how it works with HTML. Zamiast mieć ścisłe rozdzielenie kodu i znaczników (z odwołaniami do języka JavaScript, które prawdopodobnie są wyświetlane w atrybutach HTML), reaguje dodaje kod HTML bezpośrednio w jego kodzie JavaScript jako JSX.Rather than having a strict separation between code and markup (with references to JavaScript appearing in HTML attributes perhaps), React adds HTML directly within its JavaScript code as JSX. JSX jest składnią podobną do języka HTML, która może kompilować do czystego kodu JavaScript.JSX is HTML-like syntax that can compile down to pure JavaScript. Na przykład:For example:

<ul>
{ authors.map(author =>
    <li key={author.id}>{author.name}</li>
)}
</ul>

Jeśli znasz już język JavaScript, reagowanie na uczenie powinno być proste.If you already know JavaScript, learning React should be easy. Nie ma niemal dużej krzywej szkoleniowej lub specjalnej składni, która jest powiązana ze kątową lub innymi popularnymi bibliotekami.There isn't nearly as much learning curve or special syntax involved as with Angular or other popular libraries.

Ponieważ reagowanie nie jest pełną strukturą, zazwyczaj chcesz, aby inne biblioteki obsługiwały takie elementy, jak routing, wywołania interfejsu API sieci Web i zarządzanie zależnościami.Because React isn't a full framework, you'll typically want other libraries to handle things like routing, web API calls, and dependency management. W tym celu można wybrać najlepszą bibliotekę dla każdej z nich, ale wadą jest to, że należy podjąć wszystkie te decyzje i sprawdzić, czy wszystkie wybrane biblioteki działają prawidłowo, gdy wszystko będzie gotowe.The nice thing is, you can pick the best library for each of these, but the disadvantage is that you need to make all of these decisions and verify all of your chosen libraries work well together when you're done. Jeśli chcesz uzyskać dobry punkt początkowy, możesz użyć zestawu startowego, takiego jak Slingshot reaguje, który składa się z zestawu zgodnych bibliotek wraz z reagowaniem.If you want a good starting point, you can use a starter kit like React Slingshot, which prepackages a set of compatible libraries together with React.

VUEVue

W przewodniku z wprowadzeniem "Vue jest platformą progresywną do kompilowania interfejsów użytkownika.From its getting started guide, "Vue is a progressive framework for building user interfaces. W przeciwieństwie do innych struktur monolitycznych Vue jest zaprojektowana od podstaw, aby można ją było stopniowo wdrożyć.Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. Biblioteka podstawowa jest skoncentrowana tylko na warstwie widoku i można ją łatwo pobrać i zintegrować z innymi bibliotekami lub istniejącymi projektami.The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. Z drugiej strony Vue doskonale nadaje się do korzystania z zaawansowanych aplikacji jednostronicowych w połączeniu z nowoczesne narzędzia i biblioteki pomocnicze.On the other hand, Vue is perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries."

Wprowadzenie do Vue po prostu wymaga uwzględnienia jego skryptu w pliku HTML:Getting started with Vue simply requires including its script within an HTML file:

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Po dodaniu platformy można w sposób deklaratywny renderować dane do modelu DOM przy użyciu prostej składni tworzenia szablonów VUE:With the framework added, you're then able to declaratively render data to the DOM using Vue's straightforward templating syntax:

<div id="app">
  {{ message }}
</div>

a następnie Dodaj następujący skrypt:and then adding the following script:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Jest to wystarczające, aby renderować "Hello Vue!"This is enough to render "Hello Vue!" na stronie.on the page. Należy jednak pamiętać, że VUE nie po prostu renderuje komunikat do DIV.Note, however, that Vue isn't simply rendering the message to the div once. Obsługuje powiązania między danymi i aktualizacjami dynamicznymi, w taki sposób, że jeśli wartość message zmian, wartość w polu <div> jest natychmiast aktualizowana w celu odzwierciedlenia tej wartości.It supports databinding and dynamic updates such that if the value of message changes, the value in the <div> is immediately updated to reflect it.

Oczywiście oznacza to jedynie powierzchnię, z jaką Vue.Of course, this only scratches the surface of what Vue is capable of. W ciągu kilku ostatnich lat uzyskano bardzo duże rozbudowanie popularności i jest to duża społeczność.It's gained a great deal of popularity in the last several years and has a large community. Istnieje ogromna i rosnąca lista składników pomocniczych i bibliotek , które współdziałają z Vue.There's a huge and growing list of supporting components and libraries that work with Vue to extend it as well. Jeśli chcesz dodać zachowanie po stronie klienta do aplikacji sieci Web lub rozważać Kompilowanie pełnego SPA, Vue jest badanie.If you're looking to add client-side behavior to your web application or considering building a full SPA, Vue is worth investigating.

Wybieranie struktury SPAChoosing a SPA Framework

Biorąc pod uwagę, która struktura języka JavaScript będzie najlepiej działała, należy pamiętać o następujących kwestiach:When considering which JavaScript framework will work best to support your SPA, keep in mind the following considerations:

  • Czy Twój zespół zna strukturę i jej zależności (w tym w niektórych przypadkach TypeScript)?Is your team familiar with the framework and its dependencies (including TypeScript in some cases)?

  • Jak ceniona jest struktura i czy zgadzasz się z jej domyślnym sposobem wykonywania zadań?How opinionated is the framework, and do you agree with its default way of doing things?

  • Czy to (czy biblioteka towarzysząca) zawiera wszystkie funkcje wymagane przez aplikację?Does it (or a companion library) include all of the features your app requires?

  • Czy jest to dobrze udokumentowane?Is it well documented?

  • Jak działa Twoja społeczność?How active is its community? Czy tworzone są nowe projekty?Are new projects being built with it?

  • Jak aktywny jest Twój rdzeń zespołu?How active is its core team? Czy problemy są rozwiązywane i są regularnie wysyłane nowe wersje?Are issues being resolved and new versions shipped regularly?

Struktury JavaScript w dalszym ciągu rozwijają się z szybkością breakneck.JavaScript frameworks continue to evolve with breakneck speed. Skorzystaj z wymienionych powyżej zagadnień, aby pomóc w ograniczeniu ryzyka wyboru struktury, z której będziesz później korzystać z programu.Use the considerations listed above to help mitigate the risk of choosing a framework you'll later regret being dependent upon. Jeśli jesteś szczególnie narażony na averse, weź pod uwagę platformę, która oferuje komercyjną pomoc techniczną i/lub opracowaną przez duże przedsiębiorstwo.If you're particularly risk-averse, consider a framework that offers commercial support and/or is being developed by a large enterprise.

Odwołania — technologie sieci Web klientaReferences – Client Web Technologies