From daa1a2aff136fa9da1fcc97d7da97a2036fabc77 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:51:47 +0100 Subject: unslug uk: move --- .../client-side_javascript_frameworks/index.html | 138 ++++++ .../svelte_getting_started/index.html | 536 +++++++++++++++++++++ .../cross_browser_testing/index.html | 41 ++ .../git_\321\202\320\260_github/index.html" | 86 ---- files/uk/learn/tools_and_testing/github/index.html | 86 ++++ .../understanding_client-side_tools/index.html | 37 ++ .../index.html" | 138 ------ .../znayomymos_zi_svelte/index.html" | 536 --------------------- .../index.html" | 37 -- .../index.html" | 41 -- 10 files changed, 838 insertions(+), 838 deletions(-) create mode 100644 files/uk/learn/tools_and_testing/client-side_javascript_frameworks/index.html create mode 100644 files/uk/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.html create mode 100644 files/uk/learn/tools_and_testing/cross_browser_testing/index.html delete mode 100644 "files/uk/learn/tools_and_testing/git_\321\202\320\260_github/index.html" create mode 100644 files/uk/learn/tools_and_testing/github/index.html create mode 100644 files/uk/learn/tools_and_testing/understanding_client-side_tools/index.html delete mode 100644 "files/uk/learn/tools_and_testing/\321\200\320\276\320\267\321\203\320\274\321\226\320\275\320\275\321\217_javascript-\321\204\321\200\320\265\320\271\320\274\320\262\320\276\321\200\320\272\321\226\320\262_\320\275\320\260_\321\201\321\202\320\276\321\200\320\276\320\275\321\226_\320\272\320\273\321\226\321\224\320\275\321\202\320\260/index.html" delete mode 100644 "files/uk/learn/tools_and_testing/\321\200\320\276\320\267\321\203\320\274\321\226\320\275\320\275\321\217_javascript-\321\204\321\200\320\265\320\271\320\274\320\262\320\276\321\200\320\272\321\226\320\262_\320\275\320\260_\321\201\321\202\320\276\321\200\320\276\320\275\321\226_\320\272\320\273\321\226\321\224\320\275\321\202\320\260/znayomymos_zi_svelte/index.html" delete mode 100644 "files/uk/learn/tools_and_testing/\321\200\320\276\320\267\321\203\320\274\321\226\320\275\320\275\321\217_\321\226\320\275\321\201\321\202\321\200\321\203\320\274\320\265\320\275\321\202\321\226\320\262_\320\262\320\265\320\261-\321\200\320\276\320\267\321\200\320\276\320\261\320\272\320\270_\320\275\320\260_\321\201\321\202\320\276\321\200\320\276\320\275\321\226_\320\272\320\273\321\226\321\224\320\275\321\202\320\260/index.html" delete mode 100644 "files/uk/learn/tools_and_testing/\321\202\320\265\321\201\321\202\321\203\320\262\320\260\320\275\320\275\321\217_\320\272\321\200\320\276\321\201\320\261\321\200\320\260\321\203\320\267\320\265\321\200\320\275\320\276\321\201\321\202\321\226/index.html" (limited to 'files/uk/learn/tools_and_testing') diff --git a/files/uk/learn/tools_and_testing/client-side_javascript_frameworks/index.html b/files/uk/learn/tools_and_testing/client-side_javascript_frameworks/index.html new file mode 100644 index 0000000000..4380250538 --- /dev/null +++ b/files/uk/learn/tools_and_testing/client-side_javascript_frameworks/index.html @@ -0,0 +1,138 @@ +--- +title: Розуміння JavaScript-фреймворків на стороні клієнта +slug: Learn/Tools_and_testing/Розуміння_JavaScript-фреймворків_на_стороні_клієнта +translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks +--- +
{{LearnSidebar}}
+ +

JavaScript frameworks are an essential part of modern front-end web development, providing developers with tried and tested tools for building scalable, interactive web applications. Many modern companies use frameworks as a standard part of their tooling, so many front-end development jobs now require framework experience.

+ +

As an aspiring front-end developer, it can be hard to work out where to begin when learning frameworks — there are so many different frameworks to choose from, new ones appear all the time, they mostly work in a similar way but do some things differently, and there are some specific things to be careful about when using frameworks.

+ +

In this set of articles, we are aiming to give you a comfortable starting point to help you begin learning frameworks. We are not aiming to exhaustively teach you everything you need to know about React/ReactDOM, or Vue, or some other specific framework; the framework teams' own docs do that job already. Instead, we want to back up and first answer more fundamental questions such as:

+ + + +

After that, we'll provide some tutorials covering the essentials of some of the major frameworks, to provide you with enough context and familiarity to start going into greater depth yourself. We want you to go forward and learn about frameworks in a pragmatic way that doesn't forget about web platform fundamental best practices such as accessibility.

+ +

Get started now, with "Introduction to client-side frameworks"

+ +

Prerequisites

+ +

You should really learn the basics of the core web languages first before attempting to move on to learning client-side frameworks — HTML, CSS, and especially JavaScript.

+ +

Your code will be richer and more professional as a result, and you'll be able to troubleshoot problems with more confidence if you understand the fundamental web platform features that the frameworks are building on top of.

+ +
+

Looking to become a front-end web developer?

+ +

We have put together a course that includes all the essential information you need to work towards your goal.

+ +

Get started

+
+ +

Introductory guides

+ +
+
1. Introduction to client-side frameworks
+
We begin our look at frameworks with a general overview of the area, looking at a brief history of JavaScript and frameworks, why frameworks exist and what they give us, how to start thinking about choosing a framework to learn, and what alternatives there are to client-side frameworks.
+
2. Framework main features
+
Each major JavaScript framework has a different approach to updating the DOM, handling browser events, and providing an enjoyable developer experience. This article will explore the main features of “the big 4” frameworks, looking at how frameworks tend to work from a high level and the differences between them.
+
+ +

React tutorials

+ +
+

Note: React tutorials last tested in May 2020, with React/ReactDOM 16.13.1 and create-react-app 3.4.1.

+ +

If you need to check your code against our version, you can find a finished version of the sample React app code in our todo-react repository. For a running live version, see https://mdn.github.io/todo-react-build/.

+
+ +
+
1. Getting started with React
+
In this article we will say hello to React. We'll discover a little bit of detail about its background and use cases, set up a basic React toolchain on our local computer, and create and play with a simple starter app, learning a bit about how React works in the process.
+
2. Beginning our React todo list
+
Let's say that we’ve been tasked with creating a proof-of-concept in React – an app that allows users to add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them. This article will walk you through putting the basic App component structure and styling in place, ready for individual component definition and interactivity, which we'll add later.
+
3. Componentizing our React app
+
At this point, our app is a monolith. Before we can make it do things, we need to break it apart into manageable, descriptive components. React doesn’t have any hard rules for what is and isn’t a component – that’s up to you! In this article, we will show you a sensible way to break our app up into components.
+
4. React interactivity: Events and state
+
With our component plan worked out, it's now time to start updating our app from a completely static UI to one that actually allows us to interact and change things. In this article we'll do this, digging into events and state along the way.
+
5. React interactivity: Editing, filtering, conditional rendering
+
As we near the end of our React journey (for now at least), we'll add the finishing touches to the main areas of functionality in our Todo list app. This includes allowing you to edit existing tasks and filtering the list of tasks between all, completed, and incomplete tasks. We'll look at conditional UI rendering along the way.
+
6. Accessibility in React
+
In our final tutorial article, we'll focus on (pun intended) accessibility, including focus management in React, which can improve usability and reduce confusion for both keyboard-only and screen reader users.
+
7. React resources
+
Our final article provides you with a list of React resources that you can use to go further in your learning.
+
+ +

Ember tutorials

+ +
+

Note: Ember tutorials last tested in May 2020, with Ember/Ember CLI version 3.18.0.

+ +

If you need to check your code against our version, you can find a finished version of the sample Ember app code in the ember-todomvc-tutorial repository. For a running live version, see https://nullvoxpopuli.github.io/ember-todomvc-tutorial/ (this also includes a few additional features not covered in the tutorial).

+
+ +
+
1. Getting started with Ember
+
In our first Ember article we will look at how Ember works and what it's useful for, install the Ember toolchain locally, create a sample app, and then do some initial setup to get it ready for development.
+
2. Ember app structure and componentization
+
In this article we'll get right on with planning out the structure of our TodoMVC Ember app, adding in the HTML for it, and then breaking that HTML structure into components.
+
3. Ember interactivity: Events, classes and state
+
At this point we'll start adding some interactivity to our app, providing the ability to add and display new todo items. Along the way, we'll look at using events in Ember, creating component classes to contain JavaScript code to control interactive features, and setting up a service to keep track of the data state of our app.
+
4. Ember Interactivity: Footer functionality, conditional rendering
+
Now it's time to start tackling the footer functionality in our app. Here we'll get the todo counter to update to show the correct number of todos still to complete, and correctly apply styling to completed todos (i.e. where the checkbox has been checked). We'll also wire up our "Clear completed" button. Along the way, we'll learn about using conditional rendering in our templates.
+
5. Routing in Ember
+
In this article we learn about routing or URL-based filtering as it is sometimes referred to. We'll use it to provide a unique URL for each of the three todo views — "All", "Active", and "Completed".
+
6. Ember resources and troubleshooting
+
Our final Ember article provides you with a list of resources that you can use to go further in your learning, plus some useful troubleshooting and other information.
+
+ +

Vue tutorials

+ +
+

Note: Vue tutorials last tested in May 2020, with Vue 2.6.11.

+ +

If you need to check your code against our version, you can find a finished version of the sample Vue app code in our todo-vue repository. For a running live version, see https://mdn.github.io/todo-vue/dist/.

+
+ +
+
1. Getting started with Vue
+
Now let's introduce Vue, the third of our frameworks. In this article, we'll look at a little bit of Vue background, learn how to install it and create a new project, study the high-level structure of the whole project and an individual component, see how to run the project locally, and get it prepared to start building our example.
+
2. Creating our first Vue component
+
Now it's time to dive deeper into Vue, and create our own custom component — we'll start by creating a component to represent each item in the todo list. Along the way, we'll learn about a few important concepts such as calling components inside other components, passing data to them via props and saving data state.
+
3. Rendering a list of Vue components
+
At this point we've got a fully working component; we're now ready to add multiple ToDoItem components to our App. In this article we'll look at adding a set of todo item data to our App.vue component, which we'll then loop through and display inside ToDoItem components using the v-for directive.
+
4. Adding a new todo form: Vue events, methods, and models
+
We now have sample data in place and a loop that takes each bit of data and renders it inside a ToDoItem in our app. What we really need next is the ability to allow our users to enter their own todo items into the app, and for that, we'll need a text <input>, an event to fire when the data is submitted, a method to fire upon submission to add the data and rerender the list, and a model to control the data. This is what we'll cover in this article.
+
5. Styling Vue components with CSS
+
The time has finally come to make our app look a bit nicer. In this article, we'll explore the different ways of styling Vue components with CSS.
+
6. Using Vue computed properties
+
In this article we'll add a counter that displays the number of completed todo items, using a feature of Vue called computed properties. These work similarly to methods but only re-run when one of their dependencies changes.
+
7. Vue conditional rendering: editing existing todos
+
Now it is time to add one of the major parts of functionality that we're still missing — the ability to edit existing todo items. To do this, we will take advantage of Vue's conditional rendering capabilities — namely v-if and v-else — to allow us to toggle between the existing todo item view and an edit view where you can update todo item labels. We'll also look at adding functionality to delete todo items.
+
8. Focus management with Vue refs
+
We are nearly done with Vue. The last bit of functionality to look at is focus management, or put another way, how we can improve our app's keyboard accessibility. We'll look at using Vue refs to handle this — an advanced feature that allows you to have direct access to the underlying DOM nodes below the virtual DOM, or direct access from one component to the internal DOM structure of a child component.
+
9. Vue resources
+
Now we'll round off our study of Vue by giving you a list of resources that you can use to go further in your learning, plus some other useful tips.
+
+ +

Which frameworks did we choose?

+ +

We are publishing our initial set of articles with guides focusing on three of the major frameworks out there — React/ReactDOM, Ember, and Vue. There is a variety of reasons for this:

+ + + +

We want to say this upfront — we've not chosen the frameworks we are focusing on because we think they are the best, or because we endorse them in any way. We just think they score highly on the above criteria.

+ +

Note that we were hoping to have more frameworks included upon initial publication, but we decided to release the content and then add more framework guides later, rather than delay it longer. If your favourite framework is not represented in this content and you'd like to help change that, feel free to discuss it with us! Get in touch with us via Matrix, or Discourse, or drop us a mail on the mdn-admins list.

diff --git a/files/uk/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.html b/files/uk/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.html new file mode 100644 index 0000000000..ba73b81f2b --- /dev/null +++ b/files/uk/learn/tools_and_testing/client-side_javascript_frameworks/svelte_getting_started/index.html @@ -0,0 +1,536 @@ +--- +title: Знайомимось зі Свелт +slug: >- + Learn/Tools_and_testing/Розуміння_JavaScript-фреймворків_на_стороні_клієнта/znayomymos_zi_svelte +translation_of: >- + Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started +--- +
{{LearnSidebar}}
+{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+ +

У цій статті ми коротко ознайомимося з фреймворком Свелт. Ми побачимо як Свелт працює і що виокремлює його від інших фреймворків та інструментів, які ми вже бачили. Далі ми навчимося налаштовувати наше середовище розробки, створимо простий додаток, зрозуміємо структуру проекту, та побачимо як його запускати локально і збирати для продакшна.

+ + + + + + + + + + + + +
Передумови:Для початку, рекомендуємо ознайомитись з основними мовами – HTML, CSS та JavaScript, та володіти терміналом/командним рядком. +


+ Свелт – компілятор, який генерує маленький та високооптимізований JavaScript код з нашого; вам знадобиться термінал з Нодою та NPM – для компіляції та збирання вашої програми.

+
Мета: +

Налаштувати локальне середовище розробки Svelte, створити та зібрати перший додаток, зрозуміти основи того, як це працює.

+
+ +

Свелт: новий підхід до створення складних інтерфейсів

+ +

Светл пропонує інший підхід до створення веб-додатків, ніж деякі інші фреймворки у цьому модулі. Тоді як Реакт або В'ю виконують основну частину своєї роботи в браузері користувача, під час роботи програми, Свелт зміщує цю роботу на етап компіляції, який відбувається лише під час збирання програми, створюючи високооптимізований ванільний JavaScript.
+
+ Результатом такого підходу є не тільки менші бандли та краща швидкість додатків, але й приємнішний досвід розробки – більш доступний для людей, які мають обмежений досвід роботи з екосистемою сучасних інструментів.
+
+ Свелт тісно притримується класичної моделі веб-розробки HTML, CSS та JS, лише додаючи кілька розширень до HTML та JavaScript. Напевно, в ньому є менше понять та інструментів для вивчення, ніж в деякі інших фреймворках.
+
+ Головними нинішніми недоліками є те, що це молодий фреймворк – тому його екосистема є більш обмеженою щодо інструментарію, підтримки, плагінів, чітких моделей використання тощо, ніж у більш зрілих фреймворків, а також є менше вакансій. Але його переваг повинно бути достатньо, щоб зацікавити вас дослідити його.

+ +
+

Примітка: нещодавно Свелт додав офіційну підтримку TypeScript, одну з найочікуваніших можливостей. Ми розглянемо її згодом у цій серії уроків.

+
+ +

Перед тим, як повернутися до цієї серії уроків, ми рекомендуємо вам прочитати навчальний посібник Свелт, щоб по-справжньому швидко познайомитися з основними поняттями, а потім навчитися будувати щось більш глибоке. Це займе близько 30 хвилин.

+ +

Use cases

+ +

Svelte can be used to develop small pieces of an interface or whole applications. You can either start from scratch letting Svelte drive your UI or you can incrementally integrate it into an existing application.

+ +

Nevertheless, Svelte is particularly appropriate to tackle the following situations:

+ + + +

Moreover, with the help of Sapper (a framework based on Svelte), you can also develop applications with advanced features like server-side rendering, code splitting, file-based routing and offline support. And then there's also Svelte Native, which lets you build native mobile applications.

+ +

How does Svelte work?

+ +

Being a compiler, Svelte can extend HTML, CSS, and JavaScript, generating optimal JavaScript code without any runtime overhead. To achieve this, Svelte extends vanilla web technologies in the following ways:

+ + + +

The compiler only intervenes in very specific situations and only in the context of Svelte components. Extensions to the JavaScript language are minimal and carefully picked in order to not break JavaScript syntax nor alienate developers. In fact, you will be mostly working with vanilla JavaScript.

+ +

First steps with Svelte

+ +

Being a compiler, you can't just add a <script src="svelte.js"> tag to your page and import it into your app. You'll have to set up your development environment in order to let the compiler do its job.

+ +

Requirements

+ +

In order to work with Svelte you need to have Node.js installed. It's recommended that you use the long-term support (LTS) version. Node includes npm (the node package manager), and npx (the node package runner). Note that you can also use the Yarn package manager in place of npm, but we'll assume you are using npm in this set of tutorials. See Package management basics for more information on npm and yarn.

+ +

If you're using Windows, you will need to install some software to give you parity with Unix/macOS terminal in order to use the terminal commands mentioned in this tutorial. Gitbash (which comes as part of the git for Windows toolset) or Windows Subsystem for Linux (WSL) are both suitable. Cmder is another very good and complete alternative. See Command line crash course for more information on these, and on terminal commands in general.

+ +

Also see the following for more information:

+ + + +

Creating your first Svelte app

+ +

The easiest way to create a starter app template is to just download the starter template application. You can do that by visiting sveltejs/template on GitHub or you can avoid having to download and unzip it and just use degit.

+ +

To create your starter app template, run the following terminal commands:

+ +
npx degit sveltejs/template moz-todo-svelte
+cd moz-todo-svelte
+npm install
+npm run dev
+ +
+

Note: degit doesn't do any kind of magic — it just lets you download and unzip the latest version of a git repo's contents. This is much quicker than using git clone because it will not download all the history of the repo, or create a complete local clone.

+
+ +

After running npm run dev, Svelte will compile and build your application. It will start a local server at localhost:5000. Svelte will watch for file updates, and automatically recompile and refresh the app for you when changes are made to the source files. Your browser will display something like this:

+ +

A simple start page that says hello world, and gives a link to the official svelte tutorials

+ +

Application structure

+ +

The starter template comes with the following structure:

+ +
moz-todo-svelte
+├── readme.md
+├── package.json
+├── package-lock.json
+├── rollup.config.js
+├── .gitignore
+├── node_modules
+├── public
+│   ├── favicon.ico
+│   ├── index.html
+│   ├── global.css
+│   └── build
+│       ├── bundle.css
+│       ├── bundle.css.map
+│       ├── bundle.js
+│       └── bundle.js.map
+└── src
+    ├── App.svelte
+    └── main.js
+ +

The contents are as follows:

+ + + +

Having a look at our first Svelte component

+ +

Components are the building blocks of Svelte applications. They are written into .svelte files using a superset of HTML.

+ +

All three sections — <script>, <styles>, and markup — are optional, and can appear in any order you like.

+ +
<script>
+  // logic goes here
+</script>
+
+<style>
+  /* styles go here */
+</style>
+
+<!-- markup (zero or more HTML elements) goes here -->
+ +
+

Note: For more information on the component format, have a look at the svelte documentation.

+
+ +

With this in mind, let's have a look at the src/App.svelte file that came with the starter template. You should see something like the following:

+ +
<script>
+  export let name;
+</script>
+
+<main>
+  <h1>Hello {name}!</h1>
+  <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
+</main>
+
+<style>
+  main {
+    text-align: center;
+    padding: 1em;
+    max-width: 240px;
+    margin: 0 auto;
+  }
+
+  h1 {
+    color: #ff3e00;
+    text-transform: uppercase;
+    font-size: 4em;
+    font-weight: 100;
+  }
+
+  @media (min-width: 640px) {
+    main {
+      max-width: none;
+    }
+  }
+</style>
+ +

The <script> section

+ +

The <script> block contains JavaScript that runs when a component instance is created. Variables declared (or imported) at the top level are 'visible' from the component's markup. Top-level variables is the way Svelte handles the component state, and they are reactive by default. We will explain in detail what this means later on.

+ +
<script>
+  export let name;
+</script>
+ +

Svelte uses the export keyword to mark a variable declaration as a property (or prop), which means it becomes accessible to consumers of the component (e.g. other components). This is one example of Svelte extending JavaScript syntax to make it more useful, while keeping it familiar.

+ +

The markup section

+ +

In the markup section you can insert any HTML you like, and in addition you can insert valid JavaScript expression inside single curly brackets ({}). In this case we are embedding the value of the name prop right after the Hello text.

+ +
<main>
+  <h1>Hello {name}!</h1>
+  <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
+</main>
+ +

Svelte also supports tags like {#if...}, {#each...}, and {#await...} — these examples allow you to conditionally render a portion of the markup, iterate through a list of elements, and work with async values, respectively.

+ +

The <style> section

+ +

If you have experience working with CSS, the following snippet should make sense:

+ +
<style>
+  main {
+    text-align: center;
+    padding: 1em;
+    max-width: 240px;
+    margin: 0 auto;
+  }
+
+  h1 {
+    color: #ff3e00;
+    text-transform: uppercase;
+    font-size: 4em;
+    font-weight: 100;
+  }
+
+  @media (min-width: 640px) {
+    main {
+      max-width: none;
+    }
+  }
+</style>
+ +

We are applying a style to our <h1> element. What will happen other components with <h1> elements in them?

+ +

In Svelte, CSS inside a component's <style> block will be scoped only to that component. This works by adding a class to selected elements, which is based on a hash of the component styles.

+ +

You can see this in action by opening localhost:5000 in a new browser tab, right/Ctrl-clicking on the HELLO WORLD! label, and choosing Inspect:

+ +

Svelte starter app with devtools open, showing classes for scoped styles

+ +

When compiling the app, Svelte changes our h1 styles definition to h1.svelte-1tky8bj, and then modifies every <h1> element in our component to <h1 class="svelte-1tky8bj">, so that it picks up the styles as required.

+ +
+

Note: You can override this behavior and apply styles to a selector globally using the :global(...) modifier (see the Svelte <style> docs for more information).

+
+ +

Making a couple of changes

+ +

Now that we have a general idea of how it all fits together, we can start making a few changes.
+ At this point you can try updating your App.svelte component — for example change the <h1> element on line 6 of App.svelte so that it reads like this:

+ +
<h1>Hello {name} from MDN!</h1>
+ +

Just save your changes and the app running at localhost:5000 will be automatically updated.

+ +

A first look at Svelte reactivity

+ +

In the context of a UI framework, reactivity means that the framework can automatically update the DOM when the state of any component is changed.

+ +

In Svelte, reactivity is triggered simply by assigning a new value to any top level variable in a component. For example, we could include a toggleName() function in our App component, and a button to run it.

+ +

Try updating your <script> and markup sections like so:

+ +
<script>
+  export let name;
+
+  function toggleName() {
+    if (name === 'world') {
+      name = 'svelte'
+    } else {
+      name = 'world'
+    }
+  }
+</script>
+
+<main>
+  <h1>Hello {name}!</h1>
+  <button on:click={toggleName}>Toggle name</button>
+  <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
+</main>
+ +

Whenever the button is clicked, Svelte executes the toggleName() function, which in turn updates the value of the name variable.

+ +

As you can see, the <h1> label is automatically updated. Behind the scenes, Svelte created the JavaScript code to update the DOM whenever the value of the name variable changes, without using any virtual DOM or other complex reconciliation mechanism.

+ +

Note the use of : in on:click. That's Svelte's syntax for listening to DOM events.

+ +

Inspecting main.js: the entry point of our app

+ +

Let’s open src/main.js, which is where the App component is being imported and used. This file is the entry point for our app, and it initially looks like this:

+ +
import App from './App.svelte';
+
+const app = new App({
+  target: document.body,
+  props: {
+    name: 'world'
+  }
+});
+
+export default app;
+ +

main.js starts by importing the Svelte component that we are going to use. Then in line 3 it instantiates it, passing an option object with the following properties:

+ + + +

A look under the hood

+ +

How does Svelte manage to make all these files work together nicely?

+ +

The Svelte compiler processes the <style> section of every component and compiles them into the public/build/bundle.css file.

+ +

It also compiles the markup and <script> section of every component and stores the result in public/build/bundle.js. It also adds the code in src/main.js to reference the features of each component.

+ +

Finally the file public/index.html includes the generated bundle.css and bundle.js files:

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset='utf-8'>
+  <meta name='viewport' content='width=device-width,initial-scale=1'>
+
+  <title>Svelte app</title>
+
+  <link rel='icon' type='image/png' href='/favicon.png'>
+  <link rel='stylesheet' href='/global.css'>
+  <link rel='stylesheet' href='/build/bundle.css'>
+
+  <script defer src='/build/bundle.js'></script>
+</head>
+
+<body>
+</body>
+</html>
+ +

The minified version of bundle.js weighs a little more than 3KB, which includes the "Svelte runtime" (just 300 lines of JavaScript code) and the App.svelte compiled component. As you can see, bundle.js is the only JavaScript file referenced by index.html. There are no other libraries loaded into the web page.

+ +

This is a much smaller footprint than compiled bundles from other frameworks. Take into account that, in the case of code bundles, it's not just the size of the files you have to download that matter. This is executable code that needs to be parsed, executed, and kept in memory. So this really makes a difference, especially in low-powered devices or CPU-intensive applications.

+ +

Following this tutorial

+ +

In this tutorial series you will be building a complete web application. We'll learn all the basics about Svelte and also quite a few advanced topics.

+ +

You can just read the content to get a good understanding of Svelte features, but you'll get the most out of this tutorial if you follow along coding the app with us as you go. To make it easier for you to follow each article, we provide a GitHub repository with a folder containing the source for the app as it is at the start of each tutorial.

+ +

Svelte also provides an online repl, which is a playground for live-coding Svelte apps on the web without having to install anything on your machine. We provide a repl for each article so you can start coding along right away. Let's talk a bit more about how to use these tools.

+ +

Using Git

+ +

The most popular version control system is Git, along with GitHub, a site that provides hosting for your repositories and several tools for working with them.

+ +

We'll be using GitHub so that you can easily download the source code for each article. You will also be able to get the code as it should be after completing the article, just in case you get lost.

+ +

After installing git, to clone the repository you should execute:

+ +
git clone https://github.com/opensas/mdn-svelte-tutorial.git
+ +

Then at the beginning of each article, you can just cd into the corresponding folder and start the app in dev mode to see what its current state should be, like this:

+ +
cd 02-starting-our-todo-app
+npm install
+npm run dev
+ +

If you want lo learn more about git and GitHub, we've compiled a list of links to useful guides — see Git and GitHub.

+ +
+

Note: If you just want to download the files without cloning the git repo, you can use the degit tool like this — npx degit opensas/mdn-svelte-tutorial. You can also download a specific folder with npx degit opensas/mdn-svelte-tutorial/01-getting-started. Degit won't create a local git repo, it will just download the files of the specified folder.

+
+ +

Using the Svelte REPL

+ +

A REPL (read–eval–print loop) is an interactive environment that allows you to enter commands and immediately see the results — many programming languages provide a REPL.

+ +

Svelte's REPL is much more than that. It's an online tool that allows you to create complete apps, save them online, and share with others.

+ +

It's the easiest way to start playing with Svelte from any machine, without having to install anything. It is also widely used by Svelte community. If you want to share an idea, ask for help, or report an issue, it's always extremely useful to create a REPL instance demomstrating the issue.

+ +

Let's have a quick look at the Svelte REPL and how you'd use it. It looks like so:

+ +

the svelte repl in action, showing component code on the left, and output on the right

+ +

To start a REPL, open your browser and navigate to https://svelte.dev/repl.

+ + + +

Whenever you change any file on the REPL, Svelte will recompile the app and update the Result tab. To share your app simply share the url. For example, here's the link for a REPL running our complete app: https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2.

+ +
+

Note: Notice how you can specify Svelte's version in the URL. This is useful when reporting issues related to a specific version of Svelte.

+
+ +

We will provide a REPL at the beginning and end of each article so that you can start coding with us right away.

+ +
+

Note: at the moment the REPL can't handle folder names properly. If you are following the tutorial on the REPL, just create all your components inside the root folder. Then when you see a path in the code, for example import Todos from './components/Todos.svelte', just replace it with a flat URL, e.g. import Todos from './Todos.svelte'.

+
+ +

The code so far

+ +

Git

+ +

Clone the github repo (if you haven't already done it) with:

+ +
git clone https://github.com/opensas/mdn-svelte-tutorial.git
+ +

Then to get to the current app state, run

+ +
cd mdn-svelte-tutorial/01-getting-started
+ +

Or directly download the folder's content:

+ +
npx degit opensas/mdn-svelte-tutorial/01-getting-started
+ +

Remember to run npm install && npm run dev to start your app in development mode.

+ +

REPL

+ +

To code along with us using the REPL, start at

+ +

https://svelte.dev/repl/fc68b4f059d34b9c84fa042d1cce586c?version=3.23.2

+ +

Summary

+ +

This brings us to the end of our initial look at Svelte, including how to install it locally, create a starter app, and how the basics work. In the next article we'll start building our first proper application — a todo list. Before we do that, however, let's recap some of the things we’ve learned.

+ +

In Svelte:

+ + + +

{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}

+ +

In this module

+ + diff --git a/files/uk/learn/tools_and_testing/cross_browser_testing/index.html b/files/uk/learn/tools_and_testing/cross_browser_testing/index.html new file mode 100644 index 0000000000..e13df10951 --- /dev/null +++ b/files/uk/learn/tools_and_testing/cross_browser_testing/index.html @@ -0,0 +1,41 @@ +--- +title: Тестування кросбраузерності +slug: Learn/Tools_and_testing/Тестування_кросбраузерності +translation_of: Learn/Tools_and_testing/Cross_browser_testing +--- +
{{LearnSidebar}}
+ +

This module focuses on testing web projects across different browsers. We look at identifying your target audience (e.g. what users, browsers, and devices do you most need to worry about?), how to go about doing testing, the main issues that you'll face with different types of code and how to mitigate them, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing.

+ +
+

Looking to become a front-end web developer?

+ +

We have put together a course that includes all the essential information you need to work towards your goal.

+ +

Get started

+
+ +

Prerequisites

+ +

You should really learn the basics of the core HTML, CSS, and JavaScript languages first before attempting to use the tools detailed here.

+ +

Guides

+ +
+
Introduction to cross browser testing
+
This article starts the module off by providing an overview of the topic of cross browser testing, answering questions such as "what is cross browser testing?", "what are the most common types of problems you'll encounter?", and "what are the main approaches for testing, identifying, and fixing problems?"
+
Strategies for carrying out testing
+
Next, we drill down into carrying out testing, looking at identifying a target audience (e.g. what browsers, devices, and other segments should you make sure are tested), lo-fi testing strategies (get yourself a range of devices and some virtual machines and do ad-hoc tests when needed), higher tech strategies (automation, using dedicated testing apps), and testing with user groups.
+
Handling common HTML and CSS problems
+
With the scene set, we'll now look specifically at the common cross-browser problems you will come across in HTML and CSS code, and what tools can be used to prevent problems from happening, or fix problems that occur. This includes linting code, handing CSS prefixes, using browser dev tools to track down problems, using polyfills to add support into browsers, tackling responsive design problems, and more.
+
Handling common JavaScript problems
+
Now we'll look at common cross-browser JavaScript problems and how to fix them. This includes information on using browser dev tools to track down and fix problems, using polyfills and libraries to work around problems, getting modern JavaScript features working in older browsers, and more.
+
Handling common accessibility problems
+
Next we turn our attention to accessibility, providing information on common problems, how to do simple testing, and how to make use of auditing/automation tools for finding accessibility issues.
+
Implementing feature detection
+
Feature detection involves working out whether a browser supports a certain block of code, and running different code dependent on whether it does (or doesn't), so that the browser can always provide a working experience rather than crashing/erroring in some browsers. This article details how to write your own simple feature detection, how to use a library to speed up implementation, and native features for feature detection such as @supports.
+
Introduction to automated testing
+
Manually running tests on several browsers and devices, several times per day, can get tedious and time-consuming. To handle this efficiently, you should become familiar with automation tools. In this article, we look at what is available, how to use task runners, and the basics of how to use commercial browser test automation apps such as Sauce Labs and Browser Stack.
+
Setting up your own test automation environment
+
In this article, we will teach you how to install your own automation environment and run your own tests using Selenium/WebDriver and a testing library such as selenium-webdriver for Node. We will also look at how to integrate your local testing environment with commercial apps like the ones discussed in the previous article.
+
diff --git "a/files/uk/learn/tools_and_testing/git_\321\202\320\260_github/index.html" "b/files/uk/learn/tools_and_testing/git_\321\202\320\260_github/index.html" deleted file mode 100644 index 6797857c6e..0000000000 --- "a/files/uk/learn/tools_and_testing/git_\321\202\320\260_github/index.html" +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Git та GitHub -slug: Learn/Tools_and_testing/Git_та_GitHub -translation_of: Learn/Tools_and_testing/GitHub ---- -
{{LearnSidebar}}
- -

All developers will use some kind of version control system (VCS), a tool to allow them to collaborate with other developers on a project without danger of them overwriting each other's work, and roll back to previous versions of the code base if a problem is discovered later on. The most popular VCS (at least among web developers) is Git, along with GitHub, a site that provides hosting for your repositories and several tools for working with them. This module aims to teach you what you need to know about both of them.

- -

Overview

- -

VCSes are essential for software development:

- - - -

VCSes provide tools to meet the above needs. Git is an example of a VCS, and GitHub is a web site + infrastructure that provides a Git server plus a number of really useful tools for working with git repositories individually or in teams, such as reporting issues with the code, reviewing tools, project management features such as assigning tasks and task statuses, and more.

- -
-

Note: Git is actually a distributed version control system, meaning that a complete copy of the repository containing the codebase is made on your computer (and everyone else's). You make changes to your own copy, and then push those changes back up to the server, where an administrator will decide whether to merge your changes with the master copy.

-
- -
-

Looking to become a front-end web developer?

- -

We have put together a course that includes all the essential information you need to work towards your goal.

- -

Get started

-
- -

Prerequisites

- -

To use Git and GitHub, you need:

- - - -

In terms of prerequisite knowledge, you don't need to know anything about web development, Git/GitHub or VCSes to start this module. However, it is recommended that you know some coding so that you have reasonable computer literacy, and some code to store in your repositories!

- -

It is also preferrable that you have some basic terminal knowledge, so for example moving between directories, creating files, and modifying the system PATH.

- -
-

Note: Github is not the only site/toolset you can use with Git. There are other alternatives such as GitLab that you could try, and you could also try setting your own Git server up and using it instead of GitHub. We've only stuck with GitHub in this course to provide a single way that works.

-
- -

Guides

- -

Note that the links below take you to resources on external sites. Eventually we will are aiming to have our own dedicated Git/GitHub course, but for now, these will help you get to grips with the subject in hand.

- -
-
Hello World (from GitHub)
-
This is a good place to start — this practical guide gets you to jump right into using GitHub, learning the basics of Git such as creating repositories and branches, making commits, and opening and merging pull requests.
-
Git Handbook (from GitHub)
-
This Git Handbook goes into a little more depth, explaining what a VCS is, what a repository is, how the basic GitHub model works, Git commands and examples, and more.
-
Forking Projects (from GitHub)
-
Forking projects is essential when you want to contribute to someone else's code. This guide explains how.
-
About Pull Requests (from GitHub)
-
A useful guide to managing pull requests, the way that your suggested code changes are delivered to people's repositories for consideration.
-
Mastering issues (from GitHub)
-
Issues are like a forum for your GitHub project, where people can ask questions and report problems, and you can manage updates (for example assigning people to fix issues, clarifying the issue, letting people know things are fixed). This articles gives you what you need to know about issues.
-
- -
-

Note: There is a lot more that you can do with Git and GitHub, but we feel that the above represents the minimum you need to know to start using Git effectively. As you get deeper into Git, you'll start to realise that it is easy to go wrong when you start using more complicated commands. Don't worry, even professional web developers find Git confusing sometimes, and often solve problems by searching for solutions on the web, or consulting sites like Flight rules for Git and Dangit, git!

-
- -

See also

- - diff --git a/files/uk/learn/tools_and_testing/github/index.html b/files/uk/learn/tools_and_testing/github/index.html new file mode 100644 index 0000000000..6797857c6e --- /dev/null +++ b/files/uk/learn/tools_and_testing/github/index.html @@ -0,0 +1,86 @@ +--- +title: Git та GitHub +slug: Learn/Tools_and_testing/Git_та_GitHub +translation_of: Learn/Tools_and_testing/GitHub +--- +
{{LearnSidebar}}
+ +

All developers will use some kind of version control system (VCS), a tool to allow them to collaborate with other developers on a project without danger of them overwriting each other's work, and roll back to previous versions of the code base if a problem is discovered later on. The most popular VCS (at least among web developers) is Git, along with GitHub, a site that provides hosting for your repositories and several tools for working with them. This module aims to teach you what you need to know about both of them.

+ +

Overview

+ +

VCSes are essential for software development:

+ + + +

VCSes provide tools to meet the above needs. Git is an example of a VCS, and GitHub is a web site + infrastructure that provides a Git server plus a number of really useful tools for working with git repositories individually or in teams, such as reporting issues with the code, reviewing tools, project management features such as assigning tasks and task statuses, and more.

+ +
+

Note: Git is actually a distributed version control system, meaning that a complete copy of the repository containing the codebase is made on your computer (and everyone else's). You make changes to your own copy, and then push those changes back up to the server, where an administrator will decide whether to merge your changes with the master copy.

+
+ +
+

Looking to become a front-end web developer?

+ +

We have put together a course that includes all the essential information you need to work towards your goal.

+ +

Get started

+
+ +

Prerequisites

+ +

To use Git and GitHub, you need:

+ + + +

In terms of prerequisite knowledge, you don't need to know anything about web development, Git/GitHub or VCSes to start this module. However, it is recommended that you know some coding so that you have reasonable computer literacy, and some code to store in your repositories!

+ +

It is also preferrable that you have some basic terminal knowledge, so for example moving between directories, creating files, and modifying the system PATH.

+ +
+

Note: Github is not the only site/toolset you can use with Git. There are other alternatives such as GitLab that you could try, and you could also try setting your own Git server up and using it instead of GitHub. We've only stuck with GitHub in this course to provide a single way that works.

+
+ +

Guides

+ +

Note that the links below take you to resources on external sites. Eventually we will are aiming to have our own dedicated Git/GitHub course, but for now, these will help you get to grips with the subject in hand.

+ +
+
Hello World (from GitHub)
+
This is a good place to start — this practical guide gets you to jump right into using GitHub, learning the basics of Git such as creating repositories and branches, making commits, and opening and merging pull requests.
+
Git Handbook (from GitHub)
+
This Git Handbook goes into a little more depth, explaining what a VCS is, what a repository is, how the basic GitHub model works, Git commands and examples, and more.
+
Forking Projects (from GitHub)
+
Forking projects is essential when you want to contribute to someone else's code. This guide explains how.
+
About Pull Requests (from GitHub)
+
A useful guide to managing pull requests, the way that your suggested code changes are delivered to people's repositories for consideration.
+
Mastering issues (from GitHub)
+
Issues are like a forum for your GitHub project, where people can ask questions and report problems, and you can manage updates (for example assigning people to fix issues, clarifying the issue, letting people know things are fixed). This articles gives you what you need to know about issues.
+
+ +
+

Note: There is a lot more that you can do with Git and GitHub, but we feel that the above represents the minimum you need to know to start using Git effectively. As you get deeper into Git, you'll start to realise that it is easy to go wrong when you start using more complicated commands. Don't worry, even professional web developers find Git confusing sometimes, and often solve problems by searching for solutions on the web, or consulting sites like Flight rules for Git and Dangit, git!

+
+ +

See also

+ + diff --git a/files/uk/learn/tools_and_testing/understanding_client-side_tools/index.html b/files/uk/learn/tools_and_testing/understanding_client-side_tools/index.html new file mode 100644 index 0000000000..faa5717122 --- /dev/null +++ b/files/uk/learn/tools_and_testing/understanding_client-side_tools/index.html @@ -0,0 +1,37 @@ +--- +title: Розуміння інструментів веб-розробки на стороні клієнта +slug: Learn/Tools_and_testing/Розуміння_інструментів_веб-розробки_на_стороні_клієнта +translation_of: Learn/Tools_and_testing/Understanding_client-side_tools +--- +
{{LearnSidebar}}
+ +

Client-side tooling can be intimidating, but this series of articles aims to illustrate the purpose of some of the most common client-side tool types, explain the tools you can chain together, how to install them using package managers, and control them using the command line. We finish up by providing a complete toolchain example showing you how to get productive.

+ +

Get started now, with our "Client-side tooling overview"

+ +

Prerequisites

+ +

You should really learn the basics of the core HTML, CSS, and JavaScript languages first before attempting to use the tools detailed here.

+ +
+

Looking to become a front-end web developer?

+ +

We have put together a course that includes all the essential information you need to work towards your goal.

+ +

Get started

+
+ +

Guides

+ +
+
1. Client-side tooling overview
+
In this article we provide an overview of modern web tooling, what kinds of tools are available and where you’ll meet them in the lifecycle of web app development, and how to find help with individual tools.
+
2. Command line crash course
+
In your development process you'll undoubtedly be required to run some command in the terminal (or on the "command line" — these are effectively the same thing). This article provides an introduction to the terminal, the essential commands you'll need to enter into it, how to chain commands together, and how to add your own command line interface (CLI) tools.
+
3. Package management basics
+
In this article we'll look at package managers in some detail to understand how we can use them in our own projects — to install project tool dependencies, keep them up-to-date, and more.
+
4. Introducing a complete toolchain
+
In the final couple of articles in the series we will solidify your tooling knowledge by walking you through the process of building up a sample case study toolchain. We'll go all the way from setting up a sensible development environment and putting transformation tools in place to actually deploying your app on Netlify. In this article we'll introduce the case study, set up our development environment, and set up our code transformation tools.
+
5. Deploying our app
+
In the final article in our series, we take the example toolchain we built up in the previous article and add to it so that we can deploy our sample app. We push the code to GitHub, deploy it using Netlify, and even show you how to add a simple test into the process.
+
diff --git "a/files/uk/learn/tools_and_testing/\321\200\320\276\320\267\321\203\320\274\321\226\320\275\320\275\321\217_javascript-\321\204\321\200\320\265\320\271\320\274\320\262\320\276\321\200\320\272\321\226\320\262_\320\275\320\260_\321\201\321\202\320\276\321\200\320\276\320\275\321\226_\320\272\320\273\321\226\321\224\320\275\321\202\320\260/index.html" "b/files/uk/learn/tools_and_testing/\321\200\320\276\320\267\321\203\320\274\321\226\320\275\320\275\321\217_javascript-\321\204\321\200\320\265\320\271\320\274\320\262\320\276\321\200\320\272\321\226\320\262_\320\275\320\260_\321\201\321\202\320\276\321\200\320\276\320\275\321\226_\320\272\320\273\321\226\321\224\320\275\321\202\320\260/index.html" deleted file mode 100644 index 4380250538..0000000000 --- "a/files/uk/learn/tools_and_testing/\321\200\320\276\320\267\321\203\320\274\321\226\320\275\320\275\321\217_javascript-\321\204\321\200\320\265\320\271\320\274\320\262\320\276\321\200\320\272\321\226\320\262_\320\275\320\260_\321\201\321\202\320\276\321\200\320\276\320\275\321\226_\320\272\320\273\321\226\321\224\320\275\321\202\320\260/index.html" +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: Розуміння JavaScript-фреймворків на стороні клієнта -slug: Learn/Tools_and_testing/Розуміння_JavaScript-фреймворків_на_стороні_клієнта -translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks ---- -
{{LearnSidebar}}
- -

JavaScript frameworks are an essential part of modern front-end web development, providing developers with tried and tested tools for building scalable, interactive web applications. Many modern companies use frameworks as a standard part of their tooling, so many front-end development jobs now require framework experience.

- -

As an aspiring front-end developer, it can be hard to work out where to begin when learning frameworks — there are so many different frameworks to choose from, new ones appear all the time, they mostly work in a similar way but do some things differently, and there are some specific things to be careful about when using frameworks.

- -

In this set of articles, we are aiming to give you a comfortable starting point to help you begin learning frameworks. We are not aiming to exhaustively teach you everything you need to know about React/ReactDOM, or Vue, or some other specific framework; the framework teams' own docs do that job already. Instead, we want to back up and first answer more fundamental questions such as:

- - - -

After that, we'll provide some tutorials covering the essentials of some of the major frameworks, to provide you with enough context and familiarity to start going into greater depth yourself. We want you to go forward and learn about frameworks in a pragmatic way that doesn't forget about web platform fundamental best practices such as accessibility.

- -

Get started now, with "Introduction to client-side frameworks"

- -

Prerequisites

- -

You should really learn the basics of the core web languages first before attempting to move on to learning client-side frameworks — HTML, CSS, and especially JavaScript.

- -

Your code will be richer and more professional as a result, and you'll be able to troubleshoot problems with more confidence if you understand the fundamental web platform features that the frameworks are building on top of.

- -
-

Looking to become a front-end web developer?

- -

We have put together a course that includes all the essential information you need to work towards your goal.

- -

Get started

-
- -

Introductory guides

- -
-
1. Introduction to client-side frameworks
-
We begin our look at frameworks with a general overview of the area, looking at a brief history of JavaScript and frameworks, why frameworks exist and what they give us, how to start thinking about choosing a framework to learn, and what alternatives there are to client-side frameworks.
-
2. Framework main features
-
Each major JavaScript framework has a different approach to updating the DOM, handling browser events, and providing an enjoyable developer experience. This article will explore the main features of “the big 4” frameworks, looking at how frameworks tend to work from a high level and the differences between them.
-
- -

React tutorials

- -
-

Note: React tutorials last tested in May 2020, with React/ReactDOM 16.13.1 and create-react-app 3.4.1.

- -

If you need to check your code against our version, you can find a finished version of the sample React app code in our todo-react repository. For a running live version, see https://mdn.github.io/todo-react-build/.

-
- -
-
1. Getting started with React
-
In this article we will say hello to React. We'll discover a little bit of detail about its background and use cases, set up a basic React toolchain on our local computer, and create and play with a simple starter app, learning a bit about how React works in the process.
-
2. Beginning our React todo list
-
Let's say that we’ve been tasked with creating a proof-of-concept in React – an app that allows users to add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them. This article will walk you through putting the basic App component structure and styling in place, ready for individual component definition and interactivity, which we'll add later.
-
3. Componentizing our React app
-
At this point, our app is a monolith. Before we can make it do things, we need to break it apart into manageable, descriptive components. React doesn’t have any hard rules for what is and isn’t a component – that’s up to you! In this article, we will show you a sensible way to break our app up into components.
-
4. React interactivity: Events and state
-
With our component plan worked out, it's now time to start updating our app from a completely static UI to one that actually allows us to interact and change things. In this article we'll do this, digging into events and state along the way.
-
5. React interactivity: Editing, filtering, conditional rendering
-
As we near the end of our React journey (for now at least), we'll add the finishing touches to the main areas of functionality in our Todo list app. This includes allowing you to edit existing tasks and filtering the list of tasks between all, completed, and incomplete tasks. We'll look at conditional UI rendering along the way.
-
6. Accessibility in React
-
In our final tutorial article, we'll focus on (pun intended) accessibility, including focus management in React, which can improve usability and reduce confusion for both keyboard-only and screen reader users.
-
7. React resources
-
Our final article provides you with a list of React resources that you can use to go further in your learning.
-
- -

Ember tutorials

- -
-

Note: Ember tutorials last tested in May 2020, with Ember/Ember CLI version 3.18.0.

- -

If you need to check your code against our version, you can find a finished version of the sample Ember app code in the ember-todomvc-tutorial repository. For a running live version, see https://nullvoxpopuli.github.io/ember-todomvc-tutorial/ (this also includes a few additional features not covered in the tutorial).

-
- -
-
1. Getting started with Ember
-
In our first Ember article we will look at how Ember works and what it's useful for, install the Ember toolchain locally, create a sample app, and then do some initial setup to get it ready for development.
-
2. Ember app structure and componentization
-
In this article we'll get right on with planning out the structure of our TodoMVC Ember app, adding in the HTML for it, and then breaking that HTML structure into components.
-
3. Ember interactivity: Events, classes and state
-
At this point we'll start adding some interactivity to our app, providing the ability to add and display new todo items. Along the way, we'll look at using events in Ember, creating component classes to contain JavaScript code to control interactive features, and setting up a service to keep track of the data state of our app.
-
4. Ember Interactivity: Footer functionality, conditional rendering
-
Now it's time to start tackling the footer functionality in our app. Here we'll get the todo counter to update to show the correct number of todos still to complete, and correctly apply styling to completed todos (i.e. where the checkbox has been checked). We'll also wire up our "Clear completed" button. Along the way, we'll learn about using conditional rendering in our templates.
-
5. Routing in Ember
-
In this article we learn about routing or URL-based filtering as it is sometimes referred to. We'll use it to provide a unique URL for each of the three todo views — "All", "Active", and "Completed".
-
6. Ember resources and troubleshooting
-
Our final Ember article provides you with a list of resources that you can use to go further in your learning, plus some useful troubleshooting and other information.
-
- -

Vue tutorials

- -
-

Note: Vue tutorials last tested in May 2020, with Vue 2.6.11.

- -

If you need to check your code against our version, you can find a finished version of the sample Vue app code in our todo-vue repository. For a running live version, see https://mdn.github.io/todo-vue/dist/.

-
- -
-
1. Getting started with Vue
-
Now let's introduce Vue, the third of our frameworks. In this article, we'll look at a little bit of Vue background, learn how to install it and create a new project, study the high-level structure of the whole project and an individual component, see how to run the project locally, and get it prepared to start building our example.
-
2. Creating our first Vue component
-
Now it's time to dive deeper into Vue, and create our own custom component — we'll start by creating a component to represent each item in the todo list. Along the way, we'll learn about a few important concepts such as calling components inside other components, passing data to them via props and saving data state.
-
3. Rendering a list of Vue components
-
At this point we've got a fully working component; we're now ready to add multiple ToDoItem components to our App. In this article we'll look at adding a set of todo item data to our App.vue component, which we'll then loop through and display inside ToDoItem components using the v-for directive.
-
4. Adding a new todo form: Vue events, methods, and models
-
We now have sample data in place and a loop that takes each bit of data and renders it inside a ToDoItem in our app. What we really need next is the ability to allow our users to enter their own todo items into the app, and for that, we'll need a text <input>, an event to fire when the data is submitted, a method to fire upon submission to add the data and rerender the list, and a model to control the data. This is what we'll cover in this article.
-
5. Styling Vue components with CSS
-
The time has finally come to make our app look a bit nicer. In this article, we'll explore the different ways of styling Vue components with CSS.
-
6. Using Vue computed properties
-
In this article we'll add a counter that displays the number of completed todo items, using a feature of Vue called computed properties. These work similarly to methods but only re-run when one of their dependencies changes.
-
7. Vue conditional rendering: editing existing todos
-
Now it is time to add one of the major parts of functionality that we're still missing — the ability to edit existing todo items. To do this, we will take advantage of Vue's conditional rendering capabilities — namely v-if and v-else — to allow us to toggle between the existing todo item view and an edit view where you can update todo item labels. We'll also look at adding functionality to delete todo items.
-
8. Focus management with Vue refs
-
We are nearly done with Vue. The last bit of functionality to look at is focus management, or put another way, how we can improve our app's keyboard accessibility. We'll look at using Vue refs to handle this — an advanced feature that allows you to have direct access to the underlying DOM nodes below the virtual DOM, or direct access from one component to the internal DOM structure of a child component.
-
9. Vue resources
-
Now we'll round off our study of Vue by giving you a list of resources that you can use to go further in your learning, plus some other useful tips.
-
- -

Which frameworks did we choose?

- -

We are publishing our initial set of articles with guides focusing on three of the major frameworks out there — React/ReactDOM, Ember, and Vue. There is a variety of reasons for this:

- - - -

We want to say this upfront — we've not chosen the frameworks we are focusing on because we think they are the best, or because we endorse them in any way. We just think they score highly on the above criteria.

- -

Note that we were hoping to have more frameworks included upon initial publication, but we decided to release the content and then add more framework guides later, rather than delay it longer. If your favourite framework is not represented in this content and you'd like to help change that, feel free to discuss it with us! Get in touch with us via Matrix, or Discourse, or drop us a mail on the mdn-admins list.

diff --git "a/files/uk/learn/tools_and_testing/\321\200\320\276\320\267\321\203\320\274\321\226\320\275\320\275\321\217_javascript-\321\204\321\200\320\265\320\271\320\274\320\262\320\276\321\200\320\272\321\226\320\262_\320\275\320\260_\321\201\321\202\320\276\321\200\320\276\320\275\321\226_\320\272\320\273\321\226\321\224\320\275\321\202\320\260/znayomymos_zi_svelte/index.html" "b/files/uk/learn/tools_and_testing/\321\200\320\276\320\267\321\203\320\274\321\226\320\275\320\275\321\217_javascript-\321\204\321\200\320\265\320\271\320\274\320\262\320\276\321\200\320\272\321\226\320\262_\320\275\320\260_\321\201\321\202\320\276\321\200\320\276\320\275\321\226_\320\272\320\273\321\226\321\224\320\275\321\202\320\260/znayomymos_zi_svelte/index.html" deleted file mode 100644 index ba73b81f2b..0000000000 --- "a/files/uk/learn/tools_and_testing/\321\200\320\276\320\267\321\203\320\274\321\226\320\275\320\275\321\217_javascript-\321\204\321\200\320\265\320\271\320\274\320\262\320\276\321\200\320\272\321\226\320\262_\320\275\320\260_\321\201\321\202\320\276\321\200\320\276\320\275\321\226_\320\272\320\273\321\226\321\224\320\275\321\202\320\260/znayomymos_zi_svelte/index.html" +++ /dev/null @@ -1,536 +0,0 @@ ---- -title: Знайомимось зі Свелт -slug: >- - Learn/Tools_and_testing/Розуміння_JavaScript-фреймворків_на_стороні_клієнта/znayomymos_zi_svelte -translation_of: >- - Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started ---- -
{{LearnSidebar}}
-{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
- -

У цій статті ми коротко ознайомимося з фреймворком Свелт. Ми побачимо як Свелт працює і що виокремлює його від інших фреймворків та інструментів, які ми вже бачили. Далі ми навчимося налаштовувати наше середовище розробки, створимо простий додаток, зрозуміємо структуру проекту, та побачимо як його запускати локально і збирати для продакшна.

- - - - - - - - - - - - -
Передумови:Для початку, рекомендуємо ознайомитись з основними мовами – HTML, CSS та JavaScript, та володіти терміналом/командним рядком. -


- Свелт – компілятор, який генерує маленький та високооптимізований JavaScript код з нашого; вам знадобиться термінал з Нодою та NPM – для компіляції та збирання вашої програми.

-
Мета: -

Налаштувати локальне середовище розробки Svelte, створити та зібрати перший додаток, зрозуміти основи того, як це працює.

-
- -

Свелт: новий підхід до створення складних інтерфейсів

- -

Светл пропонує інший підхід до створення веб-додатків, ніж деякі інші фреймворки у цьому модулі. Тоді як Реакт або В'ю виконують основну частину своєї роботи в браузері користувача, під час роботи програми, Свелт зміщує цю роботу на етап компіляції, який відбувається лише під час збирання програми, створюючи високооптимізований ванільний JavaScript.
-
- Результатом такого підходу є не тільки менші бандли та краща швидкість додатків, але й приємнішний досвід розробки – більш доступний для людей, які мають обмежений досвід роботи з екосистемою сучасних інструментів.
-
- Свелт тісно притримується класичної моделі веб-розробки HTML, CSS та JS, лише додаючи кілька розширень до HTML та JavaScript. Напевно, в ньому є менше понять та інструментів для вивчення, ніж в деякі інших фреймворках.
-
- Головними нинішніми недоліками є те, що це молодий фреймворк – тому його екосистема є більш обмеженою щодо інструментарію, підтримки, плагінів, чітких моделей використання тощо, ніж у більш зрілих фреймворків, а також є менше вакансій. Але його переваг повинно бути достатньо, щоб зацікавити вас дослідити його.

- -
-

Примітка: нещодавно Свелт додав офіційну підтримку TypeScript, одну з найочікуваніших можливостей. Ми розглянемо її згодом у цій серії уроків.

-
- -

Перед тим, як повернутися до цієї серії уроків, ми рекомендуємо вам прочитати навчальний посібник Свелт, щоб по-справжньому швидко познайомитися з основними поняттями, а потім навчитися будувати щось більш глибоке. Це займе близько 30 хвилин.

- -

Use cases

- -

Svelte can be used to develop small pieces of an interface or whole applications. You can either start from scratch letting Svelte drive your UI or you can incrementally integrate it into an existing application.

- -

Nevertheless, Svelte is particularly appropriate to tackle the following situations:

- - - -

Moreover, with the help of Sapper (a framework based on Svelte), you can also develop applications with advanced features like server-side rendering, code splitting, file-based routing and offline support. And then there's also Svelte Native, which lets you build native mobile applications.

- -

How does Svelte work?

- -

Being a compiler, Svelte can extend HTML, CSS, and JavaScript, generating optimal JavaScript code without any runtime overhead. To achieve this, Svelte extends vanilla web technologies in the following ways:

- - - -

The compiler only intervenes in very specific situations and only in the context of Svelte components. Extensions to the JavaScript language are minimal and carefully picked in order to not break JavaScript syntax nor alienate developers. In fact, you will be mostly working with vanilla JavaScript.

- -

First steps with Svelte

- -

Being a compiler, you can't just add a <script src="svelte.js"> tag to your page and import it into your app. You'll have to set up your development environment in order to let the compiler do its job.

- -

Requirements

- -

In order to work with Svelte you need to have Node.js installed. It's recommended that you use the long-term support (LTS) version. Node includes npm (the node package manager), and npx (the node package runner). Note that you can also use the Yarn package manager in place of npm, but we'll assume you are using npm in this set of tutorials. See Package management basics for more information on npm and yarn.

- -

If you're using Windows, you will need to install some software to give you parity with Unix/macOS terminal in order to use the terminal commands mentioned in this tutorial. Gitbash (which comes as part of the git for Windows toolset) or Windows Subsystem for Linux (WSL) are both suitable. Cmder is another very good and complete alternative. See Command line crash course for more information on these, and on terminal commands in general.

- -

Also see the following for more information:

- - - -

Creating your first Svelte app

- -

The easiest way to create a starter app template is to just download the starter template application. You can do that by visiting sveltejs/template on GitHub or you can avoid having to download and unzip it and just use degit.

- -

To create your starter app template, run the following terminal commands:

- -
npx degit sveltejs/template moz-todo-svelte
-cd moz-todo-svelte
-npm install
-npm run dev
- -
-

Note: degit doesn't do any kind of magic — it just lets you download and unzip the latest version of a git repo's contents. This is much quicker than using git clone because it will not download all the history of the repo, or create a complete local clone.

-
- -

After running npm run dev, Svelte will compile and build your application. It will start a local server at localhost:5000. Svelte will watch for file updates, and automatically recompile and refresh the app for you when changes are made to the source files. Your browser will display something like this:

- -

A simple start page that says hello world, and gives a link to the official svelte tutorials

- -

Application structure

- -

The starter template comes with the following structure:

- -
moz-todo-svelte
-├── readme.md
-├── package.json
-├── package-lock.json
-├── rollup.config.js
-├── .gitignore
-├── node_modules
-├── public
-│   ├── favicon.ico
-│   ├── index.html
-│   ├── global.css
-│   └── build
-│       ├── bundle.css
-│       ├── bundle.css.map
-│       ├── bundle.js
-│       └── bundle.js.map
-└── src
-    ├── App.svelte
-    └── main.js
- -

The contents are as follows:

- - - -

Having a look at our first Svelte component

- -

Components are the building blocks of Svelte applications. They are written into .svelte files using a superset of HTML.

- -

All three sections — <script>, <styles>, and markup — are optional, and can appear in any order you like.

- -
<script>
-  // logic goes here
-</script>
-
-<style>
-  /* styles go here */
-</style>
-
-<!-- markup (zero or more HTML elements) goes here -->
- -
-

Note: For more information on the component format, have a look at the svelte documentation.

-
- -

With this in mind, let's have a look at the src/App.svelte file that came with the starter template. You should see something like the following:

- -
<script>
-  export let name;
-</script>
-
-<main>
-  <h1>Hello {name}!</h1>
-  <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
-</main>
-
-<style>
-  main {
-    text-align: center;
-    padding: 1em;
-    max-width: 240px;
-    margin: 0 auto;
-  }
-
-  h1 {
-    color: #ff3e00;
-    text-transform: uppercase;
-    font-size: 4em;
-    font-weight: 100;
-  }
-
-  @media (min-width: 640px) {
-    main {
-      max-width: none;
-    }
-  }
-</style>
- -

The <script> section

- -

The <script> block contains JavaScript that runs when a component instance is created. Variables declared (or imported) at the top level are 'visible' from the component's markup. Top-level variables is the way Svelte handles the component state, and they are reactive by default. We will explain in detail what this means later on.

- -
<script>
-  export let name;
-</script>
- -

Svelte uses the export keyword to mark a variable declaration as a property (or prop), which means it becomes accessible to consumers of the component (e.g. other components). This is one example of Svelte extending JavaScript syntax to make it more useful, while keeping it familiar.

- -

The markup section

- -

In the markup section you can insert any HTML you like, and in addition you can insert valid JavaScript expression inside single curly brackets ({}). In this case we are embedding the value of the name prop right after the Hello text.

- -
<main>
-  <h1>Hello {name}!</h1>
-  <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
-</main>
- -

Svelte also supports tags like {#if...}, {#each...}, and {#await...} — these examples allow you to conditionally render a portion of the markup, iterate through a list of elements, and work with async values, respectively.

- -

The <style> section

- -

If you have experience working with CSS, the following snippet should make sense:

- -
<style>
-  main {
-    text-align: center;
-    padding: 1em;
-    max-width: 240px;
-    margin: 0 auto;
-  }
-
-  h1 {
-    color: #ff3e00;
-    text-transform: uppercase;
-    font-size: 4em;
-    font-weight: 100;
-  }
-
-  @media (min-width: 640px) {
-    main {
-      max-width: none;
-    }
-  }
-</style>
- -

We are applying a style to our <h1> element. What will happen other components with <h1> elements in them?

- -

In Svelte, CSS inside a component's <style> block will be scoped only to that component. This works by adding a class to selected elements, which is based on a hash of the component styles.

- -

You can see this in action by opening localhost:5000 in a new browser tab, right/Ctrl-clicking on the HELLO WORLD! label, and choosing Inspect:

- -

Svelte starter app with devtools open, showing classes for scoped styles

- -

When compiling the app, Svelte changes our h1 styles definition to h1.svelte-1tky8bj, and then modifies every <h1> element in our component to <h1 class="svelte-1tky8bj">, so that it picks up the styles as required.

- -
-

Note: You can override this behavior and apply styles to a selector globally using the :global(...) modifier (see the Svelte <style> docs for more information).

-
- -

Making a couple of changes

- -

Now that we have a general idea of how it all fits together, we can start making a few changes.
- At this point you can try updating your App.svelte component — for example change the <h1> element on line 6 of App.svelte so that it reads like this:

- -
<h1>Hello {name} from MDN!</h1>
- -

Just save your changes and the app running at localhost:5000 will be automatically updated.

- -

A first look at Svelte reactivity

- -

In the context of a UI framework, reactivity means that the framework can automatically update the DOM when the state of any component is changed.

- -

In Svelte, reactivity is triggered simply by assigning a new value to any top level variable in a component. For example, we could include a toggleName() function in our App component, and a button to run it.

- -

Try updating your <script> and markup sections like so:

- -
<script>
-  export let name;
-
-  function toggleName() {
-    if (name === 'world') {
-      name = 'svelte'
-    } else {
-      name = 'world'
-    }
-  }
-</script>
-
-<main>
-  <h1>Hello {name}!</h1>
-  <button on:click={toggleName}>Toggle name</button>
-  <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
-</main>
- -

Whenever the button is clicked, Svelte executes the toggleName() function, which in turn updates the value of the name variable.

- -

As you can see, the <h1> label is automatically updated. Behind the scenes, Svelte created the JavaScript code to update the DOM whenever the value of the name variable changes, without using any virtual DOM or other complex reconciliation mechanism.

- -

Note the use of : in on:click. That's Svelte's syntax for listening to DOM events.

- -

Inspecting main.js: the entry point of our app

- -

Let’s open src/main.js, which is where the App component is being imported and used. This file is the entry point for our app, and it initially looks like this:

- -
import App from './App.svelte';
-
-const app = new App({
-  target: document.body,
-  props: {
-    name: 'world'
-  }
-});
-
-export default app;
- -

main.js starts by importing the Svelte component that we are going to use. Then in line 3 it instantiates it, passing an option object with the following properties:

- - - -

A look under the hood

- -

How does Svelte manage to make all these files work together nicely?

- -

The Svelte compiler processes the <style> section of every component and compiles them into the public/build/bundle.css file.

- -

It also compiles the markup and <script> section of every component and stores the result in public/build/bundle.js. It also adds the code in src/main.js to reference the features of each component.

- -

Finally the file public/index.html includes the generated bundle.css and bundle.js files:

- -
<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset='utf-8'>
-  <meta name='viewport' content='width=device-width,initial-scale=1'>
-
-  <title>Svelte app</title>
-
-  <link rel='icon' type='image/png' href='/favicon.png'>
-  <link rel='stylesheet' href='/global.css'>
-  <link rel='stylesheet' href='/build/bundle.css'>
-
-  <script defer src='/build/bundle.js'></script>
-</head>
-
-<body>
-</body>
-</html>
- -

The minified version of bundle.js weighs a little more than 3KB, which includes the "Svelte runtime" (just 300 lines of JavaScript code) and the App.svelte compiled component. As you can see, bundle.js is the only JavaScript file referenced by index.html. There are no other libraries loaded into the web page.

- -

This is a much smaller footprint than compiled bundles from other frameworks. Take into account that, in the case of code bundles, it's not just the size of the files you have to download that matter. This is executable code that needs to be parsed, executed, and kept in memory. So this really makes a difference, especially in low-powered devices or CPU-intensive applications.

- -

Following this tutorial

- -

In this tutorial series you will be building a complete web application. We'll learn all the basics about Svelte and also quite a few advanced topics.

- -

You can just read the content to get a good understanding of Svelte features, but you'll get the most out of this tutorial if you follow along coding the app with us as you go. To make it easier for you to follow each article, we provide a GitHub repository with a folder containing the source for the app as it is at the start of each tutorial.

- -

Svelte also provides an online repl, which is a playground for live-coding Svelte apps on the web without having to install anything on your machine. We provide a repl for each article so you can start coding along right away. Let's talk a bit more about how to use these tools.

- -

Using Git

- -

The most popular version control system is Git, along with GitHub, a site that provides hosting for your repositories and several tools for working with them.

- -

We'll be using GitHub so that you can easily download the source code for each article. You will also be able to get the code as it should be after completing the article, just in case you get lost.

- -

After installing git, to clone the repository you should execute:

- -
git clone https://github.com/opensas/mdn-svelte-tutorial.git
- -

Then at the beginning of each article, you can just cd into the corresponding folder and start the app in dev mode to see what its current state should be, like this:

- -
cd 02-starting-our-todo-app
-npm install
-npm run dev
- -

If you want lo learn more about git and GitHub, we've compiled a list of links to useful guides — see Git and GitHub.

- -
-

Note: If you just want to download the files without cloning the git repo, you can use the degit tool like this — npx degit opensas/mdn-svelte-tutorial. You can also download a specific folder with npx degit opensas/mdn-svelte-tutorial/01-getting-started. Degit won't create a local git repo, it will just download the files of the specified folder.

-
- -

Using the Svelte REPL

- -

A REPL (read–eval–print loop) is an interactive environment that allows you to enter commands and immediately see the results — many programming languages provide a REPL.

- -

Svelte's REPL is much more than that. It's an online tool that allows you to create complete apps, save them online, and share with others.

- -

It's the easiest way to start playing with Svelte from any machine, without having to install anything. It is also widely used by Svelte community. If you want to share an idea, ask for help, or report an issue, it's always extremely useful to create a REPL instance demomstrating the issue.

- -

Let's have a quick look at the Svelte REPL and how you'd use it. It looks like so:

- -

the svelte repl in action, showing component code on the left, and output on the right

- -

To start a REPL, open your browser and navigate to https://svelte.dev/repl.

- - - -

Whenever you change any file on the REPL, Svelte will recompile the app and update the Result tab. To share your app simply share the url. For example, here's the link for a REPL running our complete app: https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2.

- -
-

Note: Notice how you can specify Svelte's version in the URL. This is useful when reporting issues related to a specific version of Svelte.

-
- -

We will provide a REPL at the beginning and end of each article so that you can start coding with us right away.

- -
-

Note: at the moment the REPL can't handle folder names properly. If you are following the tutorial on the REPL, just create all your components inside the root folder. Then when you see a path in the code, for example import Todos from './components/Todos.svelte', just replace it with a flat URL, e.g. import Todos from './Todos.svelte'.

-
- -

The code so far

- -

Git

- -

Clone the github repo (if you haven't already done it) with:

- -
git clone https://github.com/opensas/mdn-svelte-tutorial.git
- -

Then to get to the current app state, run

- -
cd mdn-svelte-tutorial/01-getting-started
- -

Or directly download the folder's content:

- -
npx degit opensas/mdn-svelte-tutorial/01-getting-started
- -

Remember to run npm install && npm run dev to start your app in development mode.

- -

REPL

- -

To code along with us using the REPL, start at

- -

https://svelte.dev/repl/fc68b4f059d34b9c84fa042d1cce586c?version=3.23.2

- -

Summary

- -

This brings us to the end of our initial look at Svelte, including how to install it locally, create a starter app, and how the basics work. In the next article we'll start building our first proper application — a todo list. Before we do that, however, let's recap some of the things we’ve learned.

- -

In Svelte:

- - - -

{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}

- -

In this module

- - diff --git "a/files/uk/learn/tools_and_testing/\321\200\320\276\320\267\321\203\320\274\321\226\320\275\320\275\321\217_\321\226\320\275\321\201\321\202\321\200\321\203\320\274\320\265\320\275\321\202\321\226\320\262_\320\262\320\265\320\261-\321\200\320\276\320\267\321\200\320\276\320\261\320\272\320\270_\320\275\320\260_\321\201\321\202\320\276\321\200\320\276\320\275\321\226_\320\272\320\273\321\226\321\224\320\275\321\202\320\260/index.html" "b/files/uk/learn/tools_and_testing/\321\200\320\276\320\267\321\203\320\274\321\226\320\275\320\275\321\217_\321\226\320\275\321\201\321\202\321\200\321\203\320\274\320\265\320\275\321\202\321\226\320\262_\320\262\320\265\320\261-\321\200\320\276\320\267\321\200\320\276\320\261\320\272\320\270_\320\275\320\260_\321\201\321\202\320\276\321\200\320\276\320\275\321\226_\320\272\320\273\321\226\321\224\320\275\321\202\320\260/index.html" deleted file mode 100644 index faa5717122..0000000000 --- "a/files/uk/learn/tools_and_testing/\321\200\320\276\320\267\321\203\320\274\321\226\320\275\320\275\321\217_\321\226\320\275\321\201\321\202\321\200\321\203\320\274\320\265\320\275\321\202\321\226\320\262_\320\262\320\265\320\261-\321\200\320\276\320\267\321\200\320\276\320\261\320\272\320\270_\320\275\320\260_\321\201\321\202\320\276\321\200\320\276\320\275\321\226_\320\272\320\273\321\226\321\224\320\275\321\202\320\260/index.html" +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: Розуміння інструментів веб-розробки на стороні клієнта -slug: Learn/Tools_and_testing/Розуміння_інструментів_веб-розробки_на_стороні_клієнта -translation_of: Learn/Tools_and_testing/Understanding_client-side_tools ---- -
{{LearnSidebar}}
- -

Client-side tooling can be intimidating, but this series of articles aims to illustrate the purpose of some of the most common client-side tool types, explain the tools you can chain together, how to install them using package managers, and control them using the command line. We finish up by providing a complete toolchain example showing you how to get productive.

- -

Get started now, with our "Client-side tooling overview"

- -

Prerequisites

- -

You should really learn the basics of the core HTML, CSS, and JavaScript languages first before attempting to use the tools detailed here.

- -
-

Looking to become a front-end web developer?

- -

We have put together a course that includes all the essential information you need to work towards your goal.

- -

Get started

-
- -

Guides

- -
-
1. Client-side tooling overview
-
In this article we provide an overview of modern web tooling, what kinds of tools are available and where you’ll meet them in the lifecycle of web app development, and how to find help with individual tools.
-
2. Command line crash course
-
In your development process you'll undoubtedly be required to run some command in the terminal (or on the "command line" — these are effectively the same thing). This article provides an introduction to the terminal, the essential commands you'll need to enter into it, how to chain commands together, and how to add your own command line interface (CLI) tools.
-
3. Package management basics
-
In this article we'll look at package managers in some detail to understand how we can use them in our own projects — to install project tool dependencies, keep them up-to-date, and more.
-
4. Introducing a complete toolchain
-
In the final couple of articles in the series we will solidify your tooling knowledge by walking you through the process of building up a sample case study toolchain. We'll go all the way from setting up a sensible development environment and putting transformation tools in place to actually deploying your app on Netlify. In this article we'll introduce the case study, set up our development environment, and set up our code transformation tools.
-
5. Deploying our app
-
In the final article in our series, we take the example toolchain we built up in the previous article and add to it so that we can deploy our sample app. We push the code to GitHub, deploy it using Netlify, and even show you how to add a simple test into the process.
-
diff --git "a/files/uk/learn/tools_and_testing/\321\202\320\265\321\201\321\202\321\203\320\262\320\260\320\275\320\275\321\217_\320\272\321\200\320\276\321\201\320\261\321\200\320\260\321\203\320\267\320\265\321\200\320\275\320\276\321\201\321\202\321\226/index.html" "b/files/uk/learn/tools_and_testing/\321\202\320\265\321\201\321\202\321\203\320\262\320\260\320\275\320\275\321\217_\320\272\321\200\320\276\321\201\320\261\321\200\320\260\321\203\320\267\320\265\321\200\320\275\320\276\321\201\321\202\321\226/index.html" deleted file mode 100644 index e13df10951..0000000000 --- "a/files/uk/learn/tools_and_testing/\321\202\320\265\321\201\321\202\321\203\320\262\320\260\320\275\320\275\321\217_\320\272\321\200\320\276\321\201\320\261\321\200\320\260\321\203\320\267\320\265\321\200\320\275\320\276\321\201\321\202\321\226/index.html" +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: Тестування кросбраузерності -slug: Learn/Tools_and_testing/Тестування_кросбраузерності -translation_of: Learn/Tools_and_testing/Cross_browser_testing ---- -
{{LearnSidebar}}
- -

This module focuses on testing web projects across different browsers. We look at identifying your target audience (e.g. what users, browsers, and devices do you most need to worry about?), how to go about doing testing, the main issues that you'll face with different types of code and how to mitigate them, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing.

- -
-

Looking to become a front-end web developer?

- -

We have put together a course that includes all the essential information you need to work towards your goal.

- -

Get started

-
- -

Prerequisites

- -

You should really learn the basics of the core HTML, CSS, and JavaScript languages first before attempting to use the tools detailed here.

- -

Guides

- -
-
Introduction to cross browser testing
-
This article starts the module off by providing an overview of the topic of cross browser testing, answering questions such as "what is cross browser testing?", "what are the most common types of problems you'll encounter?", and "what are the main approaches for testing, identifying, and fixing problems?"
-
Strategies for carrying out testing
-
Next, we drill down into carrying out testing, looking at identifying a target audience (e.g. what browsers, devices, and other segments should you make sure are tested), lo-fi testing strategies (get yourself a range of devices and some virtual machines and do ad-hoc tests when needed), higher tech strategies (automation, using dedicated testing apps), and testing with user groups.
-
Handling common HTML and CSS problems
-
With the scene set, we'll now look specifically at the common cross-browser problems you will come across in HTML and CSS code, and what tools can be used to prevent problems from happening, or fix problems that occur. This includes linting code, handing CSS prefixes, using browser dev tools to track down problems, using polyfills to add support into browsers, tackling responsive design problems, and more.
-
Handling common JavaScript problems
-
Now we'll look at common cross-browser JavaScript problems and how to fix them. This includes information on using browser dev tools to track down and fix problems, using polyfills and libraries to work around problems, getting modern JavaScript features working in older browsers, and more.
-
Handling common accessibility problems
-
Next we turn our attention to accessibility, providing information on common problems, how to do simple testing, and how to make use of auditing/automation tools for finding accessibility issues.
-
Implementing feature detection
-
Feature detection involves working out whether a browser supports a certain block of code, and running different code dependent on whether it does (or doesn't), so that the browser can always provide a working experience rather than crashing/erroring in some browsers. This article details how to write your own simple feature detection, how to use a library to speed up implementation, and native features for feature detection such as @supports.
-
Introduction to automated testing
-
Manually running tests on several browsers and devices, several times per day, can get tedious and time-consuming. To handle this efficiently, you should become familiar with automation tools. In this article, we look at what is available, how to use task runners, and the basics of how to use commercial browser test automation apps such as Sauce Labs and Browser Stack.
-
Setting up your own test automation environment
-
In this article, we will teach you how to install your own automation environment and run your own tests using Selenium/WebDriver and a testing library such as selenium-webdriver for Node. We will also look at how to integrate your local testing environment with commercial apps like the ones discussed in the previous article.
-
-- cgit v1.2.3-54-g00ecf