程序 or 框架?
程序是已经成型的应用,你需要的是为它搭建环境、添加配置,然后就可以运行起来;框架则是应用的骨架,你需要为它添加数据模型、业务逻辑,它才能成为应用,开始提供服务。
事实上,对于Web开发来说,程序和框架的区别正越来越模糊,比如几乎妇孺皆知的Wordpress,它是一个博客程序,但它丰富的插件以及高度的 自定义能够支持很大程度上的二次开发,在这点上它比起一些PHP框架也并不逊色。我个人认为,如果重心在于提供服务而不是掌握技术,有WordPress 这样的程序是没有必要使用框架的。
可惜的是,由于Nodejs还很年轻,目前还没有WordPress这样的程序,因此目前在Node.js开发里,如果想做出自己想要的作品,框架是必然的选择。如果是某些特定类型的应用,可以尝试一些开源的程序,比如要用Nodejs做博客,有Hexo、Ghost等。
回到顶部
Node.js Web框架有哪些?
Node.js里的Web框架分为API框架和Web应用框架。前者能够开发出RESTful的API,后者也能开发出RESTful API,但还包括模板、渲染等为前端所准备的功能。
API框架的使用场景是为跨平台应用提供统一的数据模型,而渲染由前端/客户端自行解决。目前比较知名的API框架有
restify(文档、Github、NPM)
ActionHero.js(官网、Github、NPM)
LoopBack(官网、Github、NPM)
Frisby(官网、Github、NPM)
Fortune.js(官网、Github、NPM)
Web应用框架顾名思义,就是为了打造Web应用所开发的框架。这里有两种风格的Web应用框架。
一个是Sinatra风格,另一个是Rails风格。Sinatra和Rails都是Ruby语言的Web框架,后者的影响力更大也更为知名。这里简单的解释一下两种风格是什么意思。
Sinatra风格是指高度可配置,注重开发的自由度。代表性的Nodejs Web框架有:
Express(官网、Github、NPM)TJ大神开发,Node.js官方推荐
hapi(官网、Github、NPM)
koa.js(官网、Github、NPM)
flaliron(官网、Github、NPM)
total.js(官网、Github、NPM)
locomotive(官网、Github、NPM)
Rails风格则是指不重复自己和约定优于配置,以及严格遵循MVC结构开发。代表性的框架有:
Sails.js(官网、Github、NPM)
geddy(官网、Github、NPM)
CompoundJS(官网、Github、NPM) 原railswayjs
这两种风格无所谓谁优谁劣,全凭使用者的偏好。
而在这两种Web框架之外,还有更大型的框架,即全栈框架,其中的代表是MEAN。
回到顶部
MEAN?
MEAN指MongoDB+Express+Angular.js+Node.js,这一组合包括运行环境、数据库、Web框架和前端引擎。被称为 全栈框架(Full-stack framework)。这其中除了Node.js之外,每一个都是可替换的,目标是创建从前端到后端,全部使用javascript的Web应用。
由于这一框架的完善性,有人将其称为LAMP的接班人。LAMP即PHP的典型运行环境,Linux+Apache+MySql+PHP,被大量的用于各种虚拟主机上。
MEAN看似庞大,但事实上要构建完整的现代化Web应用,特别是SPA(单页面应用),这几个组件都是难以缺少的,并且,其中每一项几乎都是目前 情况下的最佳选择,因此用于学习和重头开始打造新的Web应用是非常合适的。但由于实际业务的独特性,很可能要替换其中的组件,比如用Mysql来替换 MongoDB,因此,学习其中的原理和架构,打造自己的类MEAN框架也是一种选择。
作为个人和小团队来说,全栈框架MEAN基本上足够了,但目前大多数全栈框架还包含一项特性,那就是实时,拥有实时功能的框架我们又称为实时框架。
回到顶部
Node.js非适用于Web发现论网站Web App都已经包括同部前端、数据库、业务模块、功能模块等等型项目使用Node.js零始进行Web发许型团队能够 胜任于型团队说现实候框架Web发利器于发说几乎必少何选择Node.js Web发框架呢首先我必须要弄清楚我需要——
程序 or 框架
程序已经型应用需要搭建环境、添加配置运行起;框架则应用骨架需要添加数据模型、业务逻辑才能应用始提供服务
事实于Web发说程序框架区别越越模糊比几乎妇孺皆知Wordpress博客程序丰富插件及高度 自定义能够支持程度二发点比起些PHP框架并逊色我认重于提供服务掌握技术WordPress 程序没必要使用框架
惜由于Nodejs轻目前没WordPress程序目前Node.js发想做自想要作品框架必选择某些特定类型应用尝试些源程序比要用Nodejs做博客Hexo、Ghost等
Node.js Web框架哪些
Node.jsWeb框架API框架Web应用框架前者能够发RESTfulAPI者能发RESTful API包括模板、渲染等前端所准备功能
API框架使用场景跨平台应用提供统数据模型渲染由前端/客户端自行解决目前比较知名API框架
restify(文档、Github、NPM)
ActionHero.js(官网、Github、NPM)
LoopBack(官网、Github、NPM)
Frisby(官网、Github、NPM)
Fortune.js(官网、Github、NPM)
Web应用框架顾名思义打造Web应用所发框架两种风格Web应用框架
Sinatra风格另Rails风格SinatraRails都Ruby语言Web框架者影响力更更知名简单解释两种风格意思
Sinatra风格指高度配置注重发自由度代表性Nodejs Web框架:
Express(官网、Github、NPM)TJ神发Node.js官推荐
hapi(官网、Github、NPM)
koa.js(官网、Github、NPM)
flaliron(官网、Github、NPM)
total.js(官网、Github、NPM)
locomotive(官网、Github、NPM)
Rails风格则指重复自约定优于配置及严格遵循MVC结构发代表性框架:
Sails.js(官网、Github、NPM)
geddy(官网、Github、NPM)
CompoundJS(官网、Github、NPM) 原railswayjs
两种风格所谓谁优谁劣全凭使用者偏
两种Web框架外更型框架即全栈框架其代表MEAN
MEAN
MEAN指MongoDB+Express+Angular.js+Node.js组合包括运行环境、数据库、Web框架前端引擎称 全栈框架(Full-stack framework)其除Node.js外每都替换目标创建前端端全部使用javascriptWeb应用
由于框架完善性其称LAMP接班LAMP即PHP典型运行环境Linux+Apache+MySql+PHP量用于各种虚拟主机
MEAN看似庞事实要构建完整现代化Web应用特别SPA(单页面应用)几组件都难缺少并且其每项几乎都目前 情况佳选择用于习重始打造新Web应用非合适由于实际业务独特性能要替换其组件比用Mysql替换 MongoDB习其原理架构打造自类MEAN框架种选择
作团队说全栈框架MEAN基本足够目前数全栈框架包含项特性实拥实功能框架我称实框架
实框架
实框架(Real-time framework)指包含webSocket双向通信功能能够服务器客户端做实通信框架
服务端客户端自由通信需求直都由于HTTP协议本身局限性催Comet等变通即使离实相距甚远 Node.js兴起另HTML5技术webSocket渐渐熟突发现实通信变触手及于webSocket技术 Node.js量应用其知名模块socket.io各种全栈框架纷纷加入实特性应更广阔发需求
目前代表性实框架:
Meteor(官网、Github、NPM)
MEAN.io(官网、Github、NPM)
Derby(官网、Github、NPM)
SocketStream(官网、Github、NPM)
说实目前能看实通信应用场景其实其集于聊室、to-do、实图表、线游戏等领域其领域使用实特性没必要且服务器资源浪费目前否要采用实框架要看具体项目定
基本Node.js Web框架现状相信看于选择何种框架读者已经数吧再介绍容易搞混概念解释我选择
YEOMAN
第见词我MEAN联系事实截同两东西YEOMAN由YO(脚手架)、grunt(构建工具)、bower(包管理器)代表种工作流与框架发思维式完全同具体介绍见
YEOMAN能够框架达类似目都构建Web应用做准备要要采用YEOMAN则见仁见智我看习 YEOMAN本身需要少间并且定习门槛至少目前使用框架发相经济YEOMAN种模式推广再习 迟更何况定Node.js项目经验再习YEOMAN要轻松
事实我认YEOMAN种Generator+package Manager模式Node.js本身崇尚微模块 概念即论功能都模块化甚至模块要拆模块通搭积木式构建应用能够彻底解耦于容易调试 Javascript说助于定位修复应用问题Generator种理念催产物通选择同配置选项积木搭起 于种模式目前家处于实验急于进行实际应用
2015-2016前端知识体系
总结了下前端这两年的主流技术,大部分技术在我的博客里有较深入的研究学习,对应技 ,博客持续更新中,欢迎大家关注~
一、框架与组件
bootstrap等UI框架设计与实现
伸缩布局:grid网格布局
基础UI样式:元素reset、按钮、图片、菜单、表单
组件UI样式:按钮组、字体图标、下拉菜单、输入框组、导航组、面包屑、分页、标签、轮播、弹出框、列表、多媒体、警告
响应式布局:布局、结构、样式、媒体、javascript响应式
第三方插件:插件管理
jQuery、zepto使用原理以及插件开发
支持amd、cmd、全局变量的模块化封装
$.fn.method = function(){}
mvc/mvvm框架原理设计,vue/angular/avalon等
directive设计:html、text、class、html、attr、repeat、ref,可扩展
filter设计:bool、upperCase、lowerCase,可扩展
表达式设计:if-else等实现
viewmodel结构设计:例如数据,元素,方法的挂载与作用域
数据更变检测:函数触发,脏数据检测、对象hijacking
polymer/angular2思想与设计思路
import技术
template和script引入方式
css样式命名空间隔离
简单复用第三方库
reactjs原理与使用
virtual dom单向数据绑定
js执行语法方式
UI由状态控制
commonJS/AMD/CMD
模块引入
模块定义
模块标识
UMD解决不同规范兼容性的问题,例如webpack封装
模块懒执行(CMD)与与预执行(AMD)
loadJs模块化加载原理与实现
创建script标签,需要id映射到资源url
onload加载模块队列判断
全部加载完成后触发
加载失败问题优化
requirejs、modjs、seajs
polyfill、shim原理与实现
polyfill提供了开发者们希望浏览器原生提供支持的功能特性
shim将新的API引入到旧的环境中,且仅靠旧环境中已有的手段实现
virtual Dom、Incremental DOM
1.用js对象树表示dom树结构,根据该对象树构建dom树
2.状态改变时,重新构建对象,和旧的对象对比,记录两个对象树差异
3.将对象树差异应用到dom中
小结:js对象模拟dom(elem.js),virtual dom diff算法(diff.js)、差异渲染dom(patch.js)
incremental dom在状态改变时扫描旧对象树将差异直接应用到dom中
shadow dom
隔离外部环境用于封装组件:结构、样式、行为
实现形式:新标签、class类属性 + 构建编译
webwork与service Worker
webwork与主线程机制,on/post
serviceworker可作为浏览器请求代理
应用场景