Це друга стаття про Server Side Rendering і ізоморфних/універсальних програмах на React. Перша під назвою "Спрощуємо універсальне/ізоморфне додаток на React + Router + Redux + Express" була більше про кастомное рішення, ця ж стаття націлена більше на тих, кому не хочеться морочитися, а хочеться готове рішення, з ком'юніті, і взагалі поменше головного болю з налаштуванням, налагодженням, підбором бібліотек і т. д.
+
В даній статті будемо розглядати Next.JS, який володіє перевагами у вигляді відсутності конфігурації, серверного рендеринга і готової екосистеми.
З коробки Next.JS не вміє працювати з Redux, тому в процесі написання пробного проекту я виділив отриманий загальний код в окремий репозиторій next-redux-wrapper, за допомогою якого в цій статті ми зберемо додаток-приклад на Next.JS + Redux.
Читати далі →

На Хабре вже було предостатньо статей про те, як робити універсальне (ізоморфне) додаток на стеку React + Redux + Router + Koa/Express (Google в допомогу), проте я помітив, що всі вони містять повторюваний код для серверного рендеринга. Я вирішив спростити завдання і виділити цей загальний код в бібліотеку, так і з'явився на світ react-router-redux-middleware, працює приблизно так:
import Express from "express";
import from config "./webpack.config";
import createRouter from "./src/createRouter";
import createStore from "./src/createStore";
import {createExpressMiddleware} from "react-router-redux-middleware";

const app = Express();
app.use(createExpressMiddleware({
createRouter: (history) => (createRouter(history)),
createStore: ({req, res}) => (createStore())
}));
app.use(Express.static(config.output.path));
app.слухати(port);

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

Анонсована превью-версія WinJS 4.0: універсальний UX, інтеграція з AngularJS, оновлений ListView

Ми раді представити вам прев'ю-версію Windows-бібліотеки для JavaScript 4.0 (WinJS 4.0). У нашому попередньому релізі (WinJS 3.0) ми фокусувалися на тому, щоб забезпечити крос-браузерну сумісність. З WinJS 4.0 ми почали додавати нові можливості, щоб бібліотека продовжувала бути хорошим фреймворком для розробки Windows-додатків, так і додатків для вебу.



Готуючись до цього релізу, ми орієнтувалися на відгуки співтовариства і ваші доповнення, які допомогли нам сфокусуватися навколо кількох критичних напрямків:

  • Універсальний досвід взаємодії — люди хочуть, щоб їх застосування працювали там же, де і вони: на телефонах, планшетах, комп'ютерах і навіть на телевізорі у кімнаті. Форм-фактор пристроїв постійно розвивається, щоб краще відповідати потребам людини: де-то це клавіатура, що підключається до планшета, з тим, щоб зробити роботу більш продуктивною, де-то це підключення телефону до телевізора, щоб можна було розслабитися на дивані і досліджувати контент, і так далі. Елементи управління WinJS полегшують створення чуйних додатків, які не тільки можуть працювати на екранах різного розміру, але і враховувати різні способи введення. Ми хочемо допомогти вам загострити досвід взаємодії під кожен пристрій і форм-фактор, так щоб ви могли сфокусуватися на створенні самих додатків.
  • Відмінна взаємодія з іншими — WinJS спроектований з прицілом на сумісність. Ми віримо, що у вас повинна бути можливість легко використовувати разом WinJS і ваші улюблені фреймфорки на JS. Наприклад, WinJS-обгортка для AngularJS дозволить вам прозоро використовувати WinJS у ваших проектах на AngularJS.
  • Потужний ListView — WinJS повинен підтримувати вашу розробку додатків, надаючи кращі елементи управління. Наша реалізація ListView була істотно оптимізована з точки зору продуктивності і підтримує широкий спектр сценаріїв. Ми додали нові можливості, наприклад, підтримку чергування стилів, заголовки і підвали для списків і поліпшене виділення елементів.


Ми щасливі поділитися з вами цією попередньою версією. Якщо у вас будуть якісь проблеми, будь ласка, відправте нам запит на включення або повідомте про проблему через GitHub.

Ви можете почати використовувати превью WinJS 4.0 сьогодні через ваш улюблений пакетний менеджер (Bower, npm або NuGet), посилання на CDN, завантаживши Zip-архів з нашого сайту або клонировав репозитарій для складання власної копії на GitHub.

Далі в статті ми розповімо докладніше про фокусних областях, названих вище. Сподіваємося, вам теж сподобаються нові можливості WinJS 4.0.


Читати далі →

Розширення функціональності елементів управління Windows за допомогою AttachedProperty



Наріжним каменем розробки додатків для Windows (WPF, SilverLight, WP, WinRT) є патерн MVVP. Який заснований на концепції зв'язування моделі представлення даних і користувальницького інтерфейсу, що дозволяє, використовуючи декларативне опис UI допомогою XAML позбавиться від codebegind (так я і не придумав/знайшов російського перекладу) і перенести всю логіку роботи з користувальницьким інтерфейсом у модель представлення.

На жаль, реалізувати всі можливі функції в фреймвоках виробнику фізично неможливо і часто виникає ситуація, коли вирішити потрібну завдання наявними засобами не можна. Якщо проблема проста і одноразова, то вона вирішується швидко в місці виникнення, через codebehind подання. Але якщо одна і та ж функціональність потрібна в багатьох місцях, необхідно реалізувати зручний механізм повторного використання рішення.

Написати цю статтю мене спонукала стаття habrahabr.ru/company/edusty/blog/253635/. У статті знайдене рішення конкретної проблеми і запропоновано остаточне рішення. Однак для її використання необхідно codebehind для кожного текстового блоку викликати код. Більш того, якщо дані припускають зміна в процесі роботи необхідно стежити за їх зміною. В процесі своєї роботи такі рішення зустрічаю досить часто, вони відрізняються реалізацією, але їх все відрізняє одне незмінне властивість, складність підтримки і супроводу коду.
Читати далі →

Превью інструментів SDK для розробки додатків під Windows 10



Друзі, поспішаємо поділитися великою і важливою новиною для розробників: у рамках програми <a href=«insider.windows.com>Windows Insider доступні превью інструментів SDK для розробки додатків під Windows 10.


Читати далі →

Простий прийом платежів по банківських картах в Windows Універсальний Apps

У 2013 році PayOnline за підтримки Microsoft випустив PayOnline Payment SDK. Це дозволило розробникам мобільних додатків під Windows (на той момент — під Windows Store і Windows Phone) інтегрувати прийом платежів у додатку за лічені хвилини. У цьому пості ми коротко розповімо про Payment SDK, його перехід на Універсальний Apps і з'явилася підтримки рекурентних (регулярних) платежів у додатках.



Читати далі →

Створення універсальних веб-додатків за допомогою Web App Template


Всім привіт!

Сьогодні ми з вами будемо знайомитися з інструментом для створення веб-додатків для Windows і Windows Phone, Web Application Template.

У цій статті ми з вами розберемося, що таке веб-додатки та навіщо вони потрібні, а також подивимося, як Web Application Template може допомогти вам при створенні веб-додатків.

Читати далі →

Як використовувати GamePad в браузері і в додатках для Windows на HTML і JavaScript?

Якщо ви розробляєте гри на HTML і JavaScript, то ця стаття для вас. Ми вже багато писали про те, що під Windows 8.x можна розробляти програми HTML/JS, причому, як правило, ви можете з легкістю просто взяти і використовувати ваш поточний движок, що працює в сучасних браузерах.



Просто як приклад: якщо ви робите платформер, то ви можете скористатися таким движком, як Phaser (до речі, він підтримує розробку на TypeScript!), або, нашим Platformer Гра StarterKit для Windows 8. До речі, якщо ви хочете зробити іграшку в жанрі Tower Defense, то у нас є ще один Starter Kit. А якщо ви хочете створити щось тривимірне використанням WebGL, то наше все для вас — це Babylon.js.


GamePad

Але в цій статті я не буду розповідати, як створити саму гру. Ми задамося іншим питанням: як підключити до гри для Windows 8.x або у браузері геймпад? Наприклад, ігровий контролер від Xbox 360, Xbox One:



Будемо вважати, що ви вже підключили сам геймпад до свого ПК (інструкція для Xbox 360, інструкція для Xbox One). Тепер давайте розберемося, що вам потрібно зробити, щоб додати його підтримку у своїй грі.

В якості прикладу я буду використовувати платформер RubbaRabbit з наведеного вище стартет-кита. Ми розглянемо два варіанти: гра для Windows 8.x і гра в браузері.

Читати далі →

WinJS + універсальні програми. Вивчаємо навігацію



Одна з головних речей, про які ви повинні задуматися на етапі проектування програми — як організувати навігацію всередині програми таким чином, щоб користувачам було зручно працювати з контентом, розміщеним у додатку.

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

Сьогодні ми з вами познайомимося з основними шаблонами (макетами) навігації, а також подивимося, як реалізувати їх всередині своєї програми.

Читати далі →

WinJS + універсальні програми. Вивчаємо ListView



попередній статті я розповіла про те, як створювати галерею зображень за допомогою елемента управління FlipView. Сьогодні ми розглянемо елемент управління ListView, який дозволяє не тільки відображати різні дані у вигляді списку, але і працювати з ними — групувати, перетягувати і впорядкування.

Читати далі →