Переводим проект на Feast

Цели

• Только Feast (никаких jQuery и других либ)
• Выбрать проект жертву
• Перевести на Feast

Что дальше?

• mkdir otvet.mail.ru
• cd otvet.mail.ru
• git clone git@github.com:RubaXa/feast-simple-app.git
• npm install
• npm start

Что это дало?

			#! ./public
			#!   ./app/
			#!      ./blocks/
			#!         ./application/   // корневой блок
			#!            application.html
			#!            application.scss
			#!            application.js
			#!            application.spec.js
			#!      ./vendors/
			#!         ./feast/
			#!         ./pilotjs/
			#!      boot.js // файл запуска проект
			#!      sitemap.js // карта сайта
			#!   index.html // точка входа
			#! index.js // простенький сервер
		

index.js

			"use strict";
			#! const feast = require("feast");
			#!+ const app = feast.createSimpleApp({
				#! name: "Ответы@Mail.Ru"
			#!- });
			#! // Всё, вот и весь сервер ;]
		

index.html

Тут ничего интересного

• Конфигурация RequireJS
• Инициализация Socket.io и горячей замены
• Подключение boot.js и запуск приложения

boot.js

			#! import Pilot from "pilotjs";
			#! import sitemap from "./sitemap";
			#! import UIApplication from "./blocks/application/application";
			#! const router = Pilot.create(sitemap);
			#!+ export default function (el, data) {
				#!+ const getViewAttrs = () => ({
					#! name: data.name,
					#! router: router,
					#! route: router.route,
					#! request: router.request
				#!- });
				#! const view = new UIApplication(getViewAttrs());
				#! router.view = view;
				#! router.on("route", () => view.set(getViewAttrs()));
				#! view.renderTo(el);
				#! // ...History API...
				#! return router.nav(location.toString().split("#!").pop()).then(() => router);
			#!- };
		

sitemap.js

			export default {
				"#index": {
					url: "/"
				}
			}
		

Работа c API: api.js

			#! import feast from "feast";
			#! const api = (path, opts) => feast.resource(`/api/v2/${path}`, opts);
			#!+ export default {
				#!+ leaders: {
					#! users: api("usrrating", {body: "rating"}),
					#! questions: api("leadqst", {body: "qst"})
				#!- },
				#! question: api("question", {id: "qid"}),
				#! questions: api("questlist", {body: "qst"})
			#!- };
		

Маршрутизация: sitemap.js

			#! import api from "./api";
			#! import {mock as user} from "./blocks/user-card/user-card.spec";
			#! import {default as categories, index as categoriesIndex} from "./categories";
			#!+ export default {
				#! model: {/* модели доступные всем маршрутам */},

				#!+ "#index": {
					#! url: {/* описание маски */},
					#! model: {/* доп. модели */}
				#!- },

				#!+ "#ask": { ... }
				"#top": { ... }
				#!- "#question": { ... }
			#!- };
		

Модели доступные всем маршрутам

			export default {
				model: {
					#! categories: () => categories,
					#! currentUser: () => currentUser,
					#!+ leaders: {
						#! match: ["#index", "#question"], // список машрутов
						#! fetch: () =>
							#!+ Promise.all([
								#! api.leaders.users.find({n: 8}),
								#! api.leaders.questions.find({n: 5})
							#!- ])
							#!+		.then(results => ({
										users: results[0],
										questions: results[1]
							#!- 	}))
					#!- }
				}
			}
		

Машрутизация: #index

			"#index": {
				url: {
					#! pattern: "/:category?",
					#!+ params: {
						#!+ category: {
							#! validate: (value) => !!categoriesIndex[value]
						#!- }
					#!- }
				},
				model: {
					#! questions: (req) =>
						#! api.questions.find({n: 20, cat: req.params.category}),
					#! category: (req) =>
						#! ({root: categoriesIndex[req.params.category]})
				}
			}
		

Машрутизация: #ask, #top

			"#ask": {
				url: "/ask"
			},

			"#top": {
				url: "/top",
				model: {
					top: () => api.leaders.users.find({n: 20})
				}
			}
		

Машрутизация: #question

			url: "/question/:id",
			model: {
				#! question: (req) =>
				#!		api.question.findOne(req.params.id),
				#! category: (req, waitFor) =>
					#! waitFor("question").then(q =>
						#!+ ({
								active: q.cid,
								root: categoriesIndex[categoriesIndex[q.cid].parent]
						#!- }))
			}
		

Pilot v2.0

			router.getUrl("#index", {category: "auto"});
			// → "/auto"

			router.getUrl("#index", {category: 305});
			// → "/auto"

			router.nav(router.getUrl("#index", {category: "auto"}));
			router.go("#index", {category: 305});
		

Pilot v2.0

			"#index": {
				url: {
					pattern: "/:category?",
					params: {
						category: {
							validate: (value) => !!categoriesIndex[value],
							#! encode: (value) => categoriesIndex[value].urlmame
						}
					}
				}
			}
		

Pilot v2.0

			url: {
				pattern: "path/:toName",
				params: {
					toName: {
						validate: (value) => ...,
						decode: (value) => ...,
						encode: (value) => ...,
					}
				},
				query: {
					// аналогично
				}
			}
		

fn:add-class

			<!-- Bad -->
			<div class="item {attrs.selected ? 'selected' : ''}">
				<span>text</span>
			</div>
			#!+ <!-- Good -->
			<div class="item">
				<fn:add-class **name="selected"** **test="attrs.selected"**/>
				<span>text</span>
			#!- </div>