徐祁

YOHO.cn，NanJing

YOHO!前端技术变革

.html

.css

.js

img

BE

PHPer

JAVAer...

  • 目录组织
  • 页面逻辑和渲染
  • 静态资源安置
  • JS/CSS修改
  • css编程特性
  • 模块封装
  • 基于配置文件打包
@import "compass";

.d-day {
    @include opacity(0.1);
}
$icon: sprite-map("path/to/icon/*.png", $spacing: 5px);

.d-day {
    background: sprite($icon, iconName);
}
  • 模块化、模块依赖
  • 语法近似CommonJS
/**
 * module dday
 * @date: 2016/4/23
 */

define('module/dday', function(require, exports, module) {
    var mo = require('other/module/path');

    exports.someApi = someApi;
    //module.exports = dday;
});

 Spmjs

  • Static/Seajs Package Manager
  • 自动包裹包定义
  • 开发调试  spm doc || spm-server
  • 打包
var mo = require('other/module/path');

module.exports = dday;
//exports.someApi = someApi;
  • 前后端独立、完善的开发环境
  • 前后端公用模板引擎
  • 静态资源持续集成与发布

NodeJS

Express

Gulp

Server

Schema

Statics

Template.hbs

Static dev server

Js/Css compile

Upload to Ftp

pm2

CDN

generator-yoho

还有问题：

  • 模板管理困难
  • 优化了前端工作方式，并没有优化合作方式

前端是什么

Service

PHP

Adapter

API Cache

Template

Cache

Render

JSON

API

大前端 = 前端 + 中间层

依赖Ruby环境

弱水三千，只取一瓢饮

不硬依赖任何环境

灵活

可扩展

快

社区支持，可用插件多

@include不符合编码习惯

我们发现了隔壁这家伙

 Spmjs

社区支持低

外部依赖重

官方放弃，转ant-tool

代码分块难

指定入口分块打包

loader / plugin

活跃的社区

轻依赖

中间层 用NodeJS是否更好？

  • 只做中间层
  • 统一大前端技术栈
  • 活跃的npm社区带来更多可能性

Service

library/api

model/*

controller/*

request-promise

cb (render/send)

promise.then

cb(data)

eslint

stylelint

gulp

Postcss

Webpack

webpack-dev-server

  • 基于Express的表现层框架
  • 基于接口的定义
  • 现代的前端开发工作流
  • 前后端分离，业务模块分离
  • 单元测试100% coverage
Made with Slides.com