`
aresn000
  • 浏览: 1492 次
文章分类
社区版块
存档分类
最新评论

2016 我的心路历程:从 Vue 到 Webpack 到 iView

阅读更多

2016年工作中做过最自豪的两件事情:

  • 把 Vue.js 和 Webpack 技术栈引进公司并逐步成为前端规范;
  • 开源 iView 项目。

初识 Vue

第一次接触

使用 Vue.js 已经有一年半时间了,在接触 Vue 之前,有写过半年多的 Angular,所以刚了解 Vue 时,与很多开发者一样,认为 Vue 是一个轻量级的或是移动端的 ng,就好比 zepto 之于 jQuery。直到 15 年 10 月,打算用 Vue 开发一个个人项目时,才开始认真地学习它,发现 Vue 的使用方法和 API 设计如此优美简洁,而且中文文档甚是详细,我觉得这也是 Vue 受很多中国开发者喜爱的原因,许多初中级开发者、英文不好的、jQ导向的,在刚接触 MVVM 时,这点很有价值,再者 Vue 的使用和学习门槛相比 ng 和 React 的要求都要低,概念理解起来也容易。

比起 Angular,Vue 最大的特点就是对数据双向绑定这件事处理的很优雅。ng 中你需要注入依赖服务,比如 $scope 和 $rootScope,变量写起来也散落在各处,而且有时候还得用 $apply 来告知,这对于很多初学者来说是很麻烦的事情。我以前是写 jQuery 的,所以还是喜欢用 jQ 的很多东西,比如 ajax,而 Vue 在数据使用上很灵活,可以引用外部变量,可以在各种情况下直接修改,不需要额外的工作,所以当看到 Vue 双向绑定这一特性时,就决定尝试用它了。

一个人搞了一个产品

从 14 年毕业到 15 年底,就一直在两个规模不大的创业团队工作,先后做了 5 款产品,都是 App,涉及的面也很广,比如 Canvas、Hybrid 什么的。在初创团队工作就像打了鸡血一样,每天早上起床都迫不及待地开始写代码,对工作的热爱绝对不是只把它当做一件赚钱的事情,所有人都是有理想和技术追求的,所以那段时间我做的东西都很用心、精致。

两年的创业经历也把我锻炼成了一个对产品有理解、追求细节、美观的一个人。

从 15 年中旬开始,由于项目需要,我开始接触 Python,这也是我第一次接触后端语言,以前对服务端的开发是一点不懂的。不知道是 Python 本身的原因,还是我理解的快,上手其实并不难,而且没多久就已经可以熟练的写起来了(现在接触的东西多了,觉得那时学习的快,是有一套很好的架构和有人带,先能写,然后慢慢了解其中奥妙,这种办法对于程序员掌握一门新技术还是很有效的)。

我相信但凡写过 Python 的人,都会用优雅来形容它,比如一行代码带有循环的赋值:

user_hash = dict((str(user.id), user.to_base_dict()) for user in users)

其实写后端和写前端,很多地方是想通的,只是概念上有区别。只不过后端专注在数据的获取、缓存和整理上,加以各种服务,前端则在获取数据、整理数据、可视化数据。

学会了 Python,发现这个时候可以自己独立做一点东西了,于是就有了 一个人搞了一个产品 。不卖关子了,这个产品就是 TalkingCoder,从产品、设计、前端、后端、运维、iOS & Android 客户端,几乎都是我一人撸的了,只不过在写移动 App 时,有两位兄弟帮忙写了个壳。

从产品和技术复杂度上,TalkingCoder 很接近 知乎 和 Segmentfault,基于关注内容推荐的 Feed 流、文章、提问(最佳实践)。看一下用到的技术栈:

 

 

后端当然是基于 Python 了,主要用 Tornado 框架提供 Framework 和 WebService 及 APIService(也巧,貌似 知乎 和 Segmentfault 也用的Tornado)。Tornado 是一个单线程、单进程、非阻塞式的 Web框架,性能很不错。Sqlalchemy 提供 ORM(Model层),这东西很好,尤其是对于我这样不太擅长写 sql 的人。Celery 提供了 worker ,完成一些不影响用户使用的定时任务(统计)、耗时任务(发邮件)等,通过异步,不阻塞主线程。Redis 主要用于存储用户的 token,数据库用的是 MySQL(阿里云RDS),同时还用了下阿里云的 SLB 负载均衡(其实没有什么好均衡的,量又到不了知乎那级别,主要还是做https的支持和域名绑定,对Nginx不是很熟,17年要学一下了,毕竟 SLB 的费用一年也好几百呢

  • 大小: 87 KB
0
0
分享到:
评论
1 楼 aresn000 2017-01-20  
编辑器有问题,发不全,可以到这里看https://gold.xitu.io/post/5880108f8d6d810058ae0def

相关推荐

    vue初始化模板 vue init webpack命令下载的模板

    执行vue init webpack 命令报错,连接超时是因为去github下载webpack-template 而很多公司屏蔽了github vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 使用步骤 1.c/users/xxxxx/...

    vue2 + webpack5相适配的 能成功打包的 package.json 文件

    vue2 项目 + webpack 打包工具,是一个非常经典的组合,但是在...小记:这只是配置的 package.json 文件,更有配置好的 webpack.config.js 文件,以及整个完整的 vue2+webpack5 整个的项目,因为上传的规定可以找我来拿

    vue init webpack 依赖的webpack包

    解决vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 20.205.243.166:443问题,方便在...2、执行vue init webpack your_vue_app --offline即可

    vue2+webpack搭建h5框架

    4. **单向数据流**:Vue2采用从父到子的单向数据绑定,确保数据流清晰可追踪。 5. **生命周期钩子**:Vue2组件有多个生命周期钩子函数,如created、mounted、updated等,开发者可以在特定阶段执行相应的逻辑。 **...

    webpack4整合vue

    Webpack 4 整合 Vue.js 是现代前端开发中常见的任务,...以上就是关于 "webpack4 整合 vue" 的详细知识点,这个过程涵盖了从安装、配置到打包的整个流程,以及如何利用 Webpack 和 Vue.js 的特性来构建高效前端应用。

    vue2+iview+webpack 和vue3+vben+vite的技术对比的ppt

    标题:Vue2+IView+Webpack 与 Vue3+Vben+Vite 技术对比分析 内容概要: 这份PPT主要对比了基于Vue2的IView和Webpack技术栈与基于Vue3的Vben和Vite技术栈之间的差异,探讨了为何选择更新的技术和框架。报告中详细...

    vue-webpack模板

    8. **生产环境优化**:Webpack还支持生产环境的优化,例如代码分割(code splitting)以减少首屏加载时间,UglifyJS插件进行代码压缩,提取CSS到单独文件以提高页面加载速度等。 9. **Vue Router**:在Webpack模板...

    vue25webpack416vuerouter15基础开发模板

    在“vue2.5-webpack4.16-onepage-base-h5-master”这个压缩包中,我们可以预见到以下内容: 1. **项目结构**:包含`src`目录,其中含有Vue应用的主要源代码,如`App.vue`(主组件)、`main.js`(入口文件)、`...

    vue和webpack整合的完整demo

    Vue.js是一个轻量级的JavaScript框架,以其易学易用、高效和可组件化的特性受到开发者喜爱。Webpack则是一个模块打包工具,能够将各种资源(如JavaScript、CSS、图片等)视为模块进行管理和优化,是现代前端构建流程...

    vue-webpack-starter:Vue.js Webpack精益模板

    Vue Webpack入门我想要一个Vue.js轻量级入门模板,其工具版本比官方Vue-cli中使用的工具要少,因此我从头开始创建了自己的工具。 该模板可供使用,可以开始使用Vue.js单个文件组件开发单页应用程序。 它使用Webpack...

    vue2.6+webpack5+typescript

    在这个“vue2.6+webpack5+typescript”环境中,我们将探讨如何将这三个强大的技术结合在一起,创建一个高效的前端开发环境。 1. **Vue 2.6**: Vue 2.6 是 Vue.js 的一个重要版本,它带来了许多改进和新特性。例如,...

    egg-vue-webpack-boilerplate:Egg Vue服务器端渲染(SSR)客户端渲染(CSR)

    Egg-Vue-Webpack-样板 基于Egg + Vue + Webpack SSR服务端渲染和CSR前端渲染工程框架项目,包括前台系统(SSR MPA)和后台管理系统(SSR SPA)。 文件 系统功能 前台博客系统 采用Egg + Vue服务端渲染 博客首页 文章...

    vue入门 webpack+loader \vue-cli

    vue init webpack-simple vue-demo ``` 6. **安装依赖**: ```shell cd vue-demo cnpm install ``` 7. **安装 UI 库**: ```shell bower install bootstrap ``` 8. **启动项目**: ```shell cnpm run dev `...

    毕业设计:考勤系统(Vue+Webpack+ElementUI)

    前端:Vue+Webpack+ElementUI 服务端:nodejs(KOA) 数据库:mysql 使用Vue.js、Webpack和ElementUI开发一个考勤系统是一个很好的毕业设计项目,可以锻炼前端开发能力。以下是一个考勤系统的基本功能模块: 1. **用户...

    vue+webpack项目开发模板

    Vue.js 是一款轻量级的前端 JavaScript 框架,以其易用性、组件化开发模式和高效的虚拟 DOM 而受到开发者喜爱。Webpack 是一个模块打包器,它能够将 JavaScript、CSS、图片等资源打包成优化过的静态文件,便于在...

    webpack5配置之vue3

    基于webpack5构建的vue3项目,可用来学习webpack5的常用配置,和常见优化。https://webpack.docschina.org/plugins/image-minimizer-webpack-plugin/#root。 基于webpack5构建的vue3项目,可用来学习webpack5的常用...

    vue的webpack项目

    首先,Webpack模板生成的Vue项目意味着项目已经配置好了基础的构建流程,包括源代码和输出目录、loader配置(处理不同类型的文件,如Babel转换ES6+语法到ES5)、插件(如HtmlWebpackPlugin自动生成HTML入口文件引用...

    devextreme-vuets-webpack:DevExtreme Vue TS Webpack项目模板

    devexreme-vuets-webpack 一个DevExtreme Vue.ts项目 构建设置 # install dependencies npm install # or yarn install # serve with hot reload at localhost:8080 npm run dev # build for production with ...

    vue-webpack-template:vue+webpack模版脚手架

    "vue-webpack-template" 就是这样一种模板,它预先配置好了Vue.js和Webpack的集成,为开发者提供了一个快速启动新项目的基础。 Vue.js 的核心特性包括: 1. **组件化**:Vue.js 的设计中心就是组件,每个组件都是...

Global site tag (gtag.js) - Google Analytics