前端技术分享



 

     github@longmao

weibo@unclelongmao

Points

  • 前端开发现状
  • 雪球网的前端工作
  • 前端开发技术与工具
  • 前端的工作重点
  • 前端开发资料

前端开发现状

  • 开发环境 不局限于浏览器端,涉及到服务器
    • 角色定位  
      • 工程师
    • 技术体系   
      • 网络
      • 安全 
      • 性能

前端开发现状

  • 传统web产品
    • 功能单一的web html页面 
    • 前端js特效
    • 兼容ie6+
  • 现代的web产品
    • 交互体验功能丰富 
    • 具备设计美感 
    • 适配pc tablet mobile 
    • Retina屏

前端开发现状

  • 注重用户体验
    • 不局限于功能的实现
    • 追求快速响应
    • 个性化的用户需求
      • 针对宽屏的响应性
      • 自定义主题
      • 扁平化

前端开发现状

  • 开发技术
    • 不依赖于原生js
    • 采用成熟的框架
      • backboneJS
      • jQuery UI
    • 打造好产品为目的

前端开发现状

  • 前端代码开发
    • DRY,不要重复自己
    • 开发代码遵循规范
    • 强调模块化开发  
    • 借鉴java等面向对象语言
      • 良好封装
      • 面向对象
      • 抽象
      • 继承
      • 异常处理

雪球网的前端工作

雪球网的前端工作

  • 典型的移动互联网公司,mobile first,native+html5

雪球网的前端工作

  • 前端人员配置
    • 一个负责雪球网社区产品开发
    • 一个负责前端基础架构
    • 一个负责行情美股数据组件开发
    • 一个负责基础组件

雪球网的前端工作

  • 有几点值得借鉴
    • 自由技术环境
    • 开源项目
    • code view
    • 灰度发布  
    • 工程师驱动

前端开发技术与工具


Nodejs


NOdejs

  • 事件驱动 Event Driven
  • 模块管理 module
  • 代码复用 
  • 模板复用  
  • 丰富的库 Node package manager

nodejs

  • 静态web server
    • 部署管理静态资源
  • 动态web server
    • 页面路由控制
    • 渲染页面
    • 搭建测试框架
    • 开发实时应用

SOCKET.IO


SOCKET.IO

  • WebSockets
    • Chrome, Firefox, Safari
  • XHR-Polling
    • IE, Opera

SOCKET.IO

appfog


appfog


BOOTSTRAP 3


Font Awesome


seajs


seajs

  • 类nodejs 模块管理机制
    • define
    • require 同步获取模块
    • require.async 异步获取模块
    • module.exports 向外部提供接口
    • exports 是module.exports的一个引用
  • 简洁的接口
    • 全局变量 : seajs

Less


前端的工作重点

  • web app  后端解耦
  • Mobile First && 体验优先
  • 页面性能优化
    • 加快渲染速度 BigPipe && pAjax
  • 丰富交互组件 ,维护UI库
  • 测试用例, mocha

   前端开发资料


前端开发资料

前端开发资料


前端开发资料


前端开发资料


Q & A


前端技术分享

By Uncle Longmao

前端技术分享

This is the first presentation when I am with zskx

  • 1,916