Рубрика «react.js» - 11

в 14:15, , рубрики: javascript, React, react.js, ReactJS, Блог компании JUG.ru Group

React.js State of the art (интервью с Max Stoiber) - 1

Современная разработка веб-интерфейсов сосредоточена вокруг нескольких больших сообществ. На протяжении последних пяти лет React завоевывал симпатии программистов из самых разных отраслей. React – это одна-единственная библиотека, сделавшая MVC рудиментарным в программировании веб-интерфейсов. Сегодня React используется крупнейшими компаниями для разработки самых разнообразных продуктов — Facebook, Airbnb, BBC, Coursera, eBay, Expedia, IMDB, список можно продолжать.

Одной из уникальных особенностей мира React является крупнейшее и очень активное сообщество опенсорс-разработчиков вокруг него. Max Stoiber — один из людей, благодаря которым React стал тем, чем он является на сегодня как проект. На протяжении последних нескольких лет он работал над популярнейшим boilerplate проектом в сообществе и внедрял новейшие и лучшие технологии в массовое использование.

Мы поговорили с Максом о новых веяниях в сообществе, о статической типизации для разработки с React, о новом подходе стилизации компонентов и о snapshot-тестировании.

К секретам разработки на React можно приобщиться ниже в интервью.
Читать полностью »

в 8:01, , рубрики: javascript, mongodb, node.js, php, react.js, ReactJS, redux

React.js на русском языке. Часть третья - 1

Перевод официальной документации библиотеки React.js на русском языке.

Оглавление:

1 — Часть первая
2 — Часть вторая
3 — Часть третья

Отрисовка элементов

Элементы являются самыми мелкими компонентами приложения. Элемент описывает то, что вы хотите увидеть на экране:

const element = <h1>Hello, world</h1>;

В отличие от DOM-элементов браузера, элементы React являются простыми объектами, которые создаются проще. React DOM постоянно следит за обновлением элементов в DOM.

Примечание:

Элементы можно перепутать с более широким понятием, таким как «компоненты». В следующем разделе мы изучим компоненты. Элементы являются строительным материалом для компонентов и прежде, чем двигаться дальше, мы советуем вам ознакомиться с этим разделом.

Читать полностью »

в 21:33, , рубрики: javascript, mongodb, node.js, php, react.js, ReactJS, redux

React.js на русском языке. Часть вторая - 1

Перевод официальной документации библиотеки React.js на русском языке.

Оглавление:

1 — Часть первая
2 — Часть вторая

Внедрение JSX

Ознакомьтесь с этим объявлением переменных:

const element = <h1>Hello, world!</h1>;

Этот забавный синтаксис тега не представляет собой ни строку, ни HTML. Он называется JSX и представляет собой расширение языка в JavaScript. Мы рекомендуем использовать его при работе с React, чтобы описать как должен выглядеть UI. JSX может напоминать вам HTML разметку, но он полноценно работает в JavaScript.

JSX производит «элементы» React. В следующем разделе мы будем изучать их.
Читать полностью »

в 6:55, , рубрики: javascript, React, react.js, ReactJS
image

Мне очень нравиться концепция и подход React.js, что решил сделать перевод официальной документации React.js на русский язык. В одном посте все конечно не поместиться, так что это будет цикл постов.

Для чего я это сделал? Хочется внести свой вклад в данную библиотеку и скорее всего данный перевод будет полезен, кто сильно хочет учить и развиваться в данном направление, но имеет проблемы с английски языком.

Установка

React представляет собой многофункциональную библиотеку, которой можно пользоваться при создании различных проектов, новых приложений, а также, библиотеку можно внедрять в созданные ранее проекты.

Знакомство с React

Если вы хотите просто ознакомиться с библиотекой, вы можете использовать онлайн-инструмент CodePen. Попробуйте начать с легкого примера кода «Hello World». При этом, не нужно ничего устанавливать, вы можете просто модифицировать код и наблюдать, как работает программа.

Создание одностраничного приложения

Create React App – это лучший инструмент для создания нового одностраничного приложения.
Читать полностью »

в 5:10, , рубрики: $mol, angular.js, asynchronous, becycle, bem, benchmarks, build system, compositing, crossplatform, css, dependency, error proof, exception handling, FRP, inheritance, javascript, lazy execution, lazy initialization, lazy load, life cycle, localization, logging, mam, modules, namespaces, node.js, oorp, parallelism, polymer.js, postcss, proxy, react.js, reactive programming, reverse engineering, sourcemap, synchronization, TypeScript, vanilla.js, view.tree, Разработка веб-сайтов, разработка мобильных приложений

Сколько нужно времени, чтобы просто вывести на экран большой список, используя современные фреймворки?

Список на 2000 строк ReactJS AngularJS Raw HTML SAPUI5 $mol
Появление списка 170 ms 420 ms 260 ms 1200 ms 50 ms
Обновление всех его данных 75 ms 75 ms 260 ms 1200 ms 10 ms

Напишем нехитрое приложение — личный список задач. Какие у него будут характеристики?

ToDoMVC ReactJS AngularJS PolymerJS VanillaJS $mol
Размер ( html + js + css + templates ) * gzip 322 KB 326 KB 56 KB 20 KB 23 KB
Время загрузки 1.4 s 1.5 s 1.0 s 1.7 s 0.7 s
Время создания и удаления 100 задач 1.3 s 1.7 s 1.4 s 1.6 s 0.5s

Небольшая головоломка: перед вами синхронный код, загружающий и обрабатывающий содержимое 4 файлов, но с сервера они грузятся параллельно. Как такое может быть?

Синхронная параллельная загрузка ресурсов

А теперь прошу за мной в кроличью нору, настало время удивительных историй...

Читать полностью »

в 12:14, , рубрики: javascript, jsx, react.js, ReactJS, Разработка веб-сайтов, уже в который раз

Довольно часто приходится слышать, что React и особенно JSX-шаблоны – это плохо, и хороший разработчик так не делает. Однако нечасто объясняется, чем именно вредит смешивание верстки и шаблонов в одном файле. И с этим мы попробуем сегодня разобраться.

Подход "каждой технологии свой файл" использовался с начала существования веба, поэтому неудивительно, что слом этого шаблона вызывает отторжение некоторых разработчиков. Но перед тем, как заявлять "нет, мы так делать не будем никогда", будет полезно разобраться истории и понять, почему JSX пользоваться можно, а смешивать скрипты и html – нет.

Читать полностью »

в 7:36, , рубрики: Bootstrap, isomorphic, javascript, node.js, react-router, react.js, ReactJS, redux

React.js: собираем с нуля изоморфное - универсальное приложение. Часть 2: добавляем bootstrap, страницы и роутинг - 1

Разработка изоморфного приложения глазами моей жены

Это продолжение статьи про разработку изоморфного приложения с нуля на React.js. В этой части мы добавим несколько страниц, bootstrap, роутинг, концепцию Flux и ее популярную реализацию Redux.

Читать полностью »

в 7:45, , рубрики: babel, eslint, express.js, isomorphic, javascript, node.js, react.js, ReactJS, Universal, webpack

image

Лицо моей жены, когда она вычитывала эту статью

Я решил написать цикл статей, который и сам был бы счастлив найти где-то полгода назад. Он будет интересен в первую очередь тем, кто хотел бы начать разрабатывать классные приложения на React.js, но не знает, как подступиться к зоопарку разных технологий и инструментов, которые необходимо знать для полноценной front-end разработки в наши дни.

Я хочу с нуля реализовать, пожалуй, наиболее востребованный сценарий: у нас есть серверная часть, которая предоставляет REST API. Часть его методов требует, чтобы пользователь веб-приложения был авторизован.

Читать полностью »

в 10:14, , рубрики: couchdb, hoodie, javascript, pouchdb, react.js, ReactJS, Разработка веб-сайтов

Наша цель, написать offline-first приложение — SPA которое загружается и сохраняет полную функциональность в отсутствии интернет-соединения. В первой части повествования мы научились пользоваться браузерной базой данных. Сегодня мы настроим синхронизацию с серверной бд и подключим авторизацию. В результате мы получим возможность редактировать наши данные на разных устройствах даже в оффлайне с последующей синхронизацией при появлении соединения.

Читать полностью »

в 12:59, , рубрики: ListView, ListView android, react native, react.js, ReactJS, Блог компании Wix.com, разработка мобильных приложений, Разработка под android, метки:

Повторное использование ранее размещенных в памяти строк, которые при прокрутке выходят за пределы экрана, ― широко распространенная техника оптимизации использования компонента ListView, изначально реализованная в iOS и Android. Реализация ListView как компонента React Native по умолчанию не содержит непосредственно эту оптимизацию, но имеет ряд других приятных преимуществ. Тем не менее, это отличный образец, достойный изучения. Рассмотрение этой реализации в рамках изучения React также будет интересным мысленным экспериментом.

Списки являются важной частью разработки мобильных приложений

Списки – это сердце и душа мобильных приложений. Множество приложений отображают списки: это и список публикаций в вашей ленте приложения Facebook, и списки бесед в Messenger, и список сообщений электронной почты Gmail, и список фотографий в Instagram, и список твитов в Twitter и т.д.

Когда ваши списки становятся более сложными, со значительным количеством источников данных, тысячами строк, медиа-файлами, требующими большого объема памяти, их разработка также становится сложнее.

С одной стороны, вы хотите сохранить скорость работы вашего приложения, т.к. прокручивание со скоростью 60 FPS стало золотым стандартом нативного опыта взаимодействия (UX). С другой стороны, вы хотите сохранить низкое потребление памяти, потому что мобильные устройства не располагают избыточными ресурсами. Не всегда просто выполнить оба эти условия.

Повторное использование строк для высокоэффективной работы со списками React Native ListView - 1

Поиск идеальной реализации элемента ListView

Основополагающим правилом разработки программного обеспечение является то, что нельзя предусмотреть оптимизацию для любого сценария. Читать полностью »

1...101112...14
Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js