Понимание JavaScript-фреймворков для фронтенда — Изучение веб-разработки
JavaScript-фреймворки являются неотъемлемой частью современной веб-разработки,предоставляя разработчикам проверенные и протестированныеинструменты для создания масштабируемых и интерактивных веб-приложений. Многиесовременные компании используют фреймворки для своих решений, поэтому многие задачи связанные с разработкой клиентской части веб-приложений теперь требуют опыта работы с ними.
Начинающему разработчику веб-интерфейсов, может быть трудно понять, с чего начать изучение фреймворков — их выбор разнообразен, а новые появляются постоянно. В основном же они работают аналогичным образом, но делают некоторые вещи по-разному, также есть некоторые специфичные вещи, которые следует соблюдать при использовании фреймворков.
Этим набором статей мы постараемся дать вам удобную отправную точку, чтобы помочь вам начать изучать основы. Мы не стремимся научить вас всему, что вам нужно знать о React / ReactDOM, или Vue, или какой-то другой конкретной среде; Документация этих фреймворков отлично выполняют эту работу.
- Почему я должен использовать фреймворк? Какие проблемы он решит?
- Какие вопросы я должен задать себе при выборе определённого фреймворка? Нужен ли мне какой-либо из них вовсе?
- Какими возможностями обладают фреймворки? Как они работают в целом и в чём отличия их имплементаций этих возможностей?
- Как они связаны с «ванильным» JavaScript, или HTML?
После этого мы предоставим некоторые учебные пособия, охватывающие основы некоторых фреймворков, чтобы предоставить вам достаточно контекста, чтобы вы могли начать углубляться в этой теме. Мы хотим, чтобы вы изучали фреймворки прагматично, не забывая о фундаментальных практиках веб-разработки, таких как, например, доступность.
Начните прямо сейчас с «Введение в фронтенд фреймворки» (en-US)
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.
- 1. Introduction to client-side frameworks (en-US)
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 (en-US)
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 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 (en-US)
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.
Appcomponent structure and styling in place, ready for individual component definition and interactivity, which we’ll add later.- 3. Componentizing our React app (en-US)
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 (en-US)
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 (en-US)
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 (en-US)
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 screenreader users.
- 7. React resources (en-US)
Our final article provides you with a list of React resources that you can use to go further in your learning.
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.Примечание: Ember tutorials last tested in May 2020, with Ember/Ember CLI version 3.18.0.
github.io/ember-todomvc-tutorial/ (this also includes a few additional features not covered in the tutorial).- 1. Getting started with Ember (en-US)
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 (en-US)
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 (en-US)
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.
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 (en-US)
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 (en-US)
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 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 (en-US)
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 (en-US)
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 (en-US)
At this point we’ve got a fully working component; we’re now ready to add multiple
ToDoItemcomponents to our App. In this artcle we’ll look at adding a set of todo item data to ourApp.vuecomponent, which we’ll then loop through and display insideToDoItemcomponents using thev-fordirective.- 4. Adding a new todo form: Vue events, methods, and models (en-US)
We now have sample data in place, and a loop that takes each bit of data and renders it inside a
ToDoItemin 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 (en-US)
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 (en-US)
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 (en-US)
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-ifandv-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 (en-US)
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 (en-US)
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.
This is what we’ll cover in this article.
We’ll also look at adding functionality to delete todo items.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:
- They are popular choices that will be around for a while — like with any software tool, it is good to stick with actively-developed choices that are likely to not be discontinued next week, and which will be desirable additions to your skillset when looking for a job.
- They have strong communities and good documentation. It is very important to be able to get help with learning a complex subject, especially when you are just starting out.
- We don’t have the resources to cover all modern frameworks. That list would be very difficult to keep up-to-date anyway, as new ones appear all the time.
- As a beginner, trying to choose what to focus on out of the huge number of choices available is a very real problem. Keeping the list short is therefore helpful.
We want to say this up front — 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 intial 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.
Last modified: , by MDN contributors
Веб-фреймворк Django (Python) — Изучение веб-разработки
Django является чрезвычайно популярным и полнофункциональным серверным веб-фреймворком, написанным на Python. Данный модуль расскажет о том, почему Django один из самых популярных серверных веб-фреймворков, как установить среду разработки, и как начать использовать его для создания собственных веб-приложений.
Перед началом работы с этим модулем вам не обязательно уже быть знакомым с Django. Вам бы пригодилось общее понимание того, что такое серверное веб-программирование и веб-фреймворки, почерпнутое, в идеале, из топиков другого нашего модуля Первые шаги серверного программирования веб-сайтов.
Рекомендуется базовое понимание концепций программирования и языка Python, но это не обязательно для освоения основных понятий.
Примечание: Python является одним из самых доступных в чтении и понимании для новичков языком программирования.
Тем не менее, если вы захотите глубже понять этот модуль, в Интернете сейчас доступны многочисленные бесплатные книги и учебные пособия (новички в программирование возможно захотят посетить Python for Non Programmers на вики-страницах python.org).
- Введение в Django
В этой первой статье по Django мы ответим на вопрос «Что такое Django?» и сделаем обзор того, что делает этот веб-фреймворк особенным. Мы кратко рассмотрим основные особенности, включая некоторую продвинутую функциональность, на которой у нас не будет возможности подробно остановиться в этом модуле. Мы также покажем вам некоторые из основных строительных блоков приложения Django, чтобы дать вам представление о том, что он может сделать, прежде чем вы перейдёте к установке и начнёте экспериментировать.
- Установка среды разработки Django
Теперь, когда вы знаете, что такое Django, мы покажем вам, как установить и протестировать среду разработки Django для Windows, Linux (Ubuntu) и Mac OS X — какую бы операционную систему вы не использовали, эта статья должна дать вам понимание того, что вам потребуется, чтобы начать разработку Django-приложений .
- Учебник Django: Веб-сайт местной библиотеки
Первая статья в нашей серии практических уроков объясняет, что вы узнаете, и представит обзор веб-сайта «местной библиотеки», над которым мы будем работать и развиваться в последующих статьях.
- Учебник Django часть 2: Создание скелета веб-сайта
В этой статье показано, как вы можете создать проект веб-сайта «каркас» в качестве основы, после чего вы сможете заполнить параметры сайта, urls, модели, представления и шаблоны.
- Учебник Django часть 3: Использование моделей
В этой статье показано, как определить модели для сайта местной библиотеки — модели представляют структуры данных, в которых мы хотим хранить данные нашего приложения, а также позволяют Django хранить данные в базе данных для нас (и модифицировать позже). Она раскрывает, что такое модель, как она объявляется и некоторые из основных типов полей. В ней также кратко показаны некоторые из основных способов доступа к данным модели.
- Учебник Django часть 4: Django admin веб-сайта
Теперь, когда мы создали модели для сайта местной библиотеки, мы будем использовать Django Admin, чтобы добавить данные о книгах в библиотеке. Сначала мы покажем вам, как регистрировать и администрировать модели сайта а затем мы покажем вам, как входить в систему и создавать некоторые данные. В конце мы покажем некоторые способы дальнейшего улучшения представлений сайта.
- Учебник Django часть 5: Создание главной страницы
Теперь мы готовы добавить код для отображения нашей первой полной страницы — главной страницы сайта местной библиотеки, которая показывает, сколько записей у нас есть для каждого типа модели, и предоставляет ссылки на боковых панелях на другие наши страницы. По пути мы получим практический опыт написания основных карт и представлений URL, получения записей из базы данных и использования шаблонов.
- Учебник Django часть 6: Общий список и подробные представления
Это руководство расширяет наш сайт местной библиотеки, добавляя список и подробные страницы для книг и авторов.
Здесь мы узнаем об общих представлениях на основе классов и покажем, как они могут уменьшить количество кода, который вы должны писать для случаев общего использования. Мы также перейдём к обработке URL-адресов более подробно, покажем, как выполнить базовое сопоставление шаблонов.- Учебник Django часть 7: Структура сессий
Это руководство расширяет наш сайт местной библиотеки, добавляя счётчик посещений домашней страницы. Это относительно простой пример, но он показывает, как вы можете использовать структуру сессии, чтобы обеспечить постоянное поведение анонимных пользователей на ваших собственных сайтах.
- Учебник Django часть 8: Авторизация и права пользователей
В этом уроке мы покажем вам, как разрешить пользователям входить на ваш сайт со своими учётными записями и как управлять тем, что они могут делать и видеть на основе того, зарегистрированы ли они или нет, и их допусках. В рамках этой демонстрации мы расширим сайт местной библиотеки, добавив страницы входа и выхода, а также страницы пользователей и персональные страницы для просмотра книг, которые были взяты на руки.
- Учебник Django часть 9: Работа с формами
В этом уроке мы покажем вам, как работать с HTML Forms в Django, и в частности, самый простой способ писать формы для создания, обновления и удаления экземпляров модели. В рамках этой демонстрации мы расширим сайт местной библиотеки, чтобы библиотекари могли вносить новые книги, создавать, обновлять и удалять авторов, используя наши собственные формы (а не использовать приложение администратора).
- Учебник Django часть10: Тестирование веб-приложения Django
По мере роста веб-сайтов становится сложнее проверять вручную — требуется больше проверок, поскольку взаимодействие между компонентами усложняется, небольшое изменение в одной области может потребовать дополнительные тесты для проверки его влияния на другие области. Один из способов смягчить эти проблемы — написать автоматизированные тесты, которые можно легко и надёжно запускать каждый раз, когда вы вносите изменения. В этом руководстве показано, как автоматизировать модульное тестирование вашего сайта с помощью тестовой среды Django.
- Учебник Django часть 11: Деплой Django на продакшн
Теперь вы создали (и протестировали) удивительный сайт местной библиотеки, вам захочется установить его на общедоступный веб-сервер, чтобы к нему мог получить доступ персонал библиотеки и пользователи Интернета. В этой статье представлен обзор того, как вы можете найти хост для развёртывания вашего веб-сайта и что вам нужно сделать, чтобы подготовить ваш сайт к выпуску.
- Безопасность веб-приложений Django
Защита пользовательских данных является неотъемлемой частью любой разработки сайта. Ранее мы объяснили некоторые из наиболее распространённых угроз безопасности в статье Web security — Эта статья даёт практическую демонстрацию того, как встроенные средства защиты Django справляются с такими угрозами.
Здесь мы узнаем об общих представлениях на основе классов и покажем, как они могут уменьшить количество кода, который вы должны писать для случаев общего использования. Мы также перейдём к обработке URL-адресов более подробно, покажем, как выполнить базовое сопоставление шаблонов.
Следующее задание проверит ваше понимание того, как создать сайт с помощью Django, как описано в руководствах, перечисленных выше.
- DIY Django мини-блог
В этом задании вы будете использовать некоторые знания, которые вы узнали из этого модуля, чтобы создать свой собственный блог.
Last modified: , by MDN contributors
Семантический пользовательский интерфейс
2.5.0
Начать Новое в версии 2.4
Semantic — это среда разработки, которая помогает создавать красивые, отзывчивые макеты с использованием удобного для человека HTML.
Семантический пользовательский интерфейс рассматривает слова и классы как взаимозаменяемые понятия.
Классы используют синтаксис естественных языков, например отношения существительное/модификатор, порядок слов и множественное число, чтобы интуитивно связывать понятия.
Получите те же преимущества, что и BEM или SMACSS, но без скуки.
Один
Два
Три
Semantic использует простые фразы, называемые поведениями, которые запускают функциональные возможности.
Любое произвольное решение в компоненте включено в качестве параметра, который разработчики могут изменить.
$(‘выбрать.выпадающий’) .dropdown(‘установить выбранный’, [‘метеор’, ‘эмбер’]) ;
SkillsAngularCSSEmberHTMLJavascriptMeteorNodeJS
SkillsAngularCSSEmberHTMLJavascriptMeteorNodeJS
Ведение журнала производительности позволяет отслеживать узкие места, не копаясь в трассировках стека.
У вас сейчас нет доступа к средствам разработки? Посмотрите этот короткий клип.
$(‘.sequenced.images .image’) .переход({ отладка: правда, анимация: «покачивание», продолжительность: 500, интервал : 200 }) ;
Semantic поставляется с интуитивно понятной системой наследования и переменными темы высокого уровня, которые дают вам полную свободу проектирования.
Разработайте свой пользовательский интерфейс один раз, а затем используйте один и тот же код везде.
Выберите тему
Посмотреть
Добавить в корзину
Сохранить на потом
Rate
Единственная догма из этого фреймворка: все произвольное изменчиво .
Руководство по темам
Создайте весь свой сайт с помощью одного стека пользовательского интерфейса. Поделитесь своим пользовательским интерфейсом между несколькими проектами.
Интерфейс просмотра
Semantic UI — это бесплатный проект с открытым исходным кодом , который уже используется в нескольких крупномасштабных производственных средах.
Посетите GitHub
Определения не ограничиваются только кнопками на странице. Компоненты Semantic допускают несколько различных типов определений: элементы, коллекции, представления, модули и поведения, которые охватывают всю гамму дизайна интерфейса.
См. примеры компоновки
Этот сайт использует файлы cookie
- . Воспользуйтесь нашим справочным центром .
- Проверьте наш FAQ
Добавить в друзья
Пандит
Присоединился в 1998 г.
22 друга
Отметка добавила вас в друзья
Вы добавили Лену в группу Близкие друзья
Ева только что написала на вашу страницу
Молли@thebears.com
23 Новый Платья
Доставка
Выберите вариант доставки
Биллинг
Введите платежную информацию
Подтвердить заказ
Проверить детали заказа
Выберите страну
Фильтр сообщений
Поиск
http://
Добавить теги
Мне нравится развлекаться
Получать еженедельный информационный бюллетень о пуделях
Сделать профиль моей собаки общедоступным
Инструменты сборки, регистрация производительности, поддержка пользовательских определений, многоуровневое наследование тем — мечта разработчика.
Начать сейчас
Объявление о совершенно новом Begin и нашей новой HTML-инфраструктуре Enhance
Брайан Леру
@brianleroux
31 августа 2022 г.
tl;dr: грядет совершенно новый Begin, разработанный с нуля вместе с Enhance, нашей совершенно новой структурой HTML, основанной на стандартах.
Enhance доступен сегодня для всех (и не требует Begin). Вместе мы надеемся, что Begin + Enhance поможет трансформировать способы создания веб-приложений с полным стеком интерфейсными веб-разработчиками и дизайнерами.
Следующее «Начало» скоро поступит в продажу. Подпишитесь на обновления здесь!
Существующие пользователи Begin: помимо получения приоритетного доступа к новому Begin, мы также будем поддерживать рабочие процессы CI/CD ваших текущих приложений Begin на неограниченный срок. Мы ценим ваше доверие и уважаем, что стабильность важна для наших клиентов.
Фон
В конце 2019 года мы запустили Begin: платформу функциональных веб-приложений (FWA), предназначенную для разработки бессерверных веб-приложений с минимальным кодом. Сегодня десятки тысяч приложений успешно работают, и мы рады объявить о новой версии платформы, которая включает в себя все ваши отзывы и все, что мы узнали о создании FWA за последние два года.
В то время как люди любят создавать FWA (и все большее число из вас делает это), разработчики часто борются с современной экосистемой JavaScript, особенно при разработке внешнего интерфейса. Более того, Begin в первую очередь предоставил вам решать (или выяснять), как лучше построить внешний интерфейс вашего FWA.
Мы услышали вас громко и ясно: мы отказались от нашей ответственности перед этой важной областью стека веб-разработки. Поэтому в прошлом году мы начали создавать то, что в конечном итоге стало Enhance, и мы очень рады представить его сегодня.
Начало: Улучшенный
Современные фреймворки JavaScript часто запирают вас в нишевых экосистемах с пользовательскими диалектами и проталкивают через вращающуюся дверь критических изменений.
Мы видели трэш — и сломанные сборки — которые вызывают эти фреймворки. Нам это надоело, и мы знаем, что вам тоже.
Итак, мы занимаем позицию и исправляем эти хрупкие библиотеки с помощью нашего самого лучшего инструмента: веб-стандартов.
Паутина — невероятно долговечная среда. В то время как фреймворки часто ломаются, веб-браузеры должны оставаться полностью стабильными и обратно совместимыми в течение многих лет и даже десятилетий. Вот почему подход Enhance, основанный на веб-стандартах, обеспечивает надежную основу для создания легких, гибких и ориентированных на будущее веб-приложений.
Принцип Enhance заключается в постепенном построении простого HTML, а затем постепенного усовершенствуйте на пути к готовому веб-приложению. (Подробнее о нашей основной философии читайте здесь.)
Начиная с Enhance, вы получаете ориентированный на HTML проект с маршрутизацией на основе файлов, многократно используемыми пользовательскими элементами, настраиваемой служебной системой CSS и сопоставленными маршрутами данных API, которые развертываются в изолированных одноцелевых облачных функциях.