《Web全栈工程师的自我修养》

1. 什么是全栈工程师

Full-Stack Engineer

Facaebook只招全栈工程师?

Web开发流程

产品经理-->交互设计-->视觉设计-->开发(前端、后端)-->测试-->发布

流水线的优势

“各司其职”的弊端

  • 工程师职责不清导致效率低
  • 工程师缺乏主人感导致产品质量差
  • 工程师缺乏全局的视野影响个人成长
  • 更多角色导致项目效率低下

全栈工程师登上舞台

技术的发展

MEAN(MongoDB-Express-AngularJs-Node.js)

提供PaaS服务的平台越来越多

全栈工程师的发展背景

一专多长

解决问题,而不是醉心技术

2. 如何成为全栈工程师

先精后广,一专多长

围绕商业目标

关注用户体验

每一个糟糕的体验背后都蕴含着商机

用户是谁

大巧若拙

做自己会用的产品

3. 从学生到工程师

校园招聘

获得面试机会

实习

4. 野生程序员的故事

遭遇“野生程序员”

  • 压缩源码和图片
  • 选择合适的图片格式
  • 合并静态资源
  • 开启服务器端的Gzip压缩
  • 使用CDN
  • 延长静态资源缓存时间
  • 把CSS放在页面头部,把JavaScript放在页面底部

Web性能优化分为服务器端和浏览器端两个方面 - 页面加载速度(Page Speed)的优化 - 页面渲染性能(Page Performance)的优化。

什么是“野生程序员”

所谓“野生程序员”,就是没有计算机基础知识和相关教育经历,靠着对计算机开发的兴趣进入这个行业,虽然知识面比较广,但是各方面都一知半解的开发者。

小公司有很多野生程序员

大公司还是创业公司

大公司能给您的

  • 较小的风险
  • 技术最佳实践
  • 垂直专精的技能
  • 服务海量用户的经验
  • 软技能
  • 人脉
  • 心态

5. 工程师事业指南

  • 技术 *成长* 声望

    那个什么都懂的家伙

积累作品集

重视作品集

工程师的作品集

突出重点

6. 全栈工程师眼中的HTTP

HTTP简介

超文本传输协议( HyperText Transfer Protocol, HTTP) - OSI模型(7层) - 应用层(最上层):HTTP、HTTPS、FTP、TELNET、SSH、SMTP、POP3

关于HTTP版本

  • HTTP/1.1 1999年
  • HTTP/2    2015年

    例子

前端视角

尽量减少同一域下的HTTP请求数

尽量减少每一个资源的体积

后台视角

提高服务器的请求处理能力

DDoS攻击

Distributed Denial of Service:分布式拒绝服务

BigPipe

7. 高性能的网站的关键:缓存

什么是缓存

服务器缓存

基本的数据库查询缓存

扩展数据库缓存:memcached

再加一层文件缓存

静态化

浏览器缓存

第一种:Expires

Expires: Thu, 15 Apr 2020 20:00:00 GMT

第二种:Last-Modified

  • Last-Modified: Tue, 01 Mar 2015 03:42:36 GMT
  • If-Modified-Since: Tue, 01 Mar 2015 03:42:36 GMT

    Restful Web API

表征性状态传输( Representational State Transfer, REST)

HTTP 1.1加入的Cache-Control

  • 下面是推荐的浏览器缓存设置最佳实践
    • 对于动态生成的HTML页面使用HTTPS头: Cache-Control: nocache
    • 对于静态HTML页面使用HTTPS头: Last-Modified
    • 其他所有的文件类型都设置Expires头, 并且在文件内容有所修改的时候修改Query String

    浏览器缓存的现实世界

结论

  • QQ空间静态资源在浏览器端使用的缓存策略
  • 对于动态生成的HTML页面使用HTTPS头: Cache-Control: nocache
  • 对于静态HTML页面使用HTTPS头: Last-Modified
  • 其他所有的文件类型都设置Cache-Control头,并且在文件内容有所修改的时候修改文件名

8. 大前端

前端工程师

知识体系

易于上手,难于精通

框架vs库

岗位细分

UI工程师 vs 前端工程师

App UI工程师

9. 向移动端转型

为什么向移动端转型

一个转型故事

行动重于计划

一定要是自己的产品的用户

世界上成功的软件都不是完美的软件,而是在合适的时间发布的、刚刚够用的产品。如果它能活下来,在后面的版本中,它才有机会越来越好。

客户需求只有在实际使用中才能辨明,再多的前期调研也只能发现客户认为他们想要什么,而不是客户实际上想要什么。因此在不了解客户真实需求的情况下,只会多做多错。 --《精益创业》

有哪些方向

混合模式App5

WebView与原生代码通信

混合模式App开发框架

持续集成

Continuous integration,CI

版本控制

Version Control System,VCS

SVN

Apache Subversion(SVN)

Git
使用Git部署代码
版本控制最佳实践
  • 鼓励频繁地提交
  • 确定分支流程
  • 定义主干原则,并且坚守它
  • 不要把逻辑的修改和代码格式化操作混在一起
  • 不相干的代码分开提交
  • 保持工作代码库的“干净”
GitHub工作流

包管理

一个程序只做一件事,并做好

Node.js
  • npm:npm is not an acronym
    Bower
其他软件包管理器
  • Node:npm
  • PHP:Compose
  • Ruby:gem
  • Pbjective-C:CocoaPods
关于版本号

根据semver的规范,版本号用小数点分隔为三个数字。比如v3.2.1中3是主要版本号,2是次要版本号,1是补丁。 - 主要版本号:有API变更导致不兼容旧版本的时候使用。 - 次要版本号:新增功能,但是向前兼容的情况下使用。 - 补丁:修复向前兼容的bug时使用。

构建工具

首先需要良好架构
  • 有合适的分离粒度
  • 最小知识原则
  • DRY(Don't Repeat Yourself),不要重复您自己
  • 最小化预先设计,只设计必需的内容
  • 通过良好的层级,让文件易于找到
  • 在代码层面,有一致且可执行的命名规则
    Make
依赖关系
Grunt和Gulp

Grunt - 配置项过多。每一个插件的使用都需要配置输入项和输出项,使用比较繁琐。 - 子任务间的协作基于文件。基于文件的坏处是,后一个子任务必须等前一个子任务的过程完全结束,才能开始它的流程,这样比较慢。而且磁盘读写速度远远慢于内存读写。

虽然Grunt有先发优势,但是由于它有几个痛点没有很好地解决,所以又诞生了Gulp。

11. 理解编程语言

编程语言是什么

故事接龙

语言的进化

首选语言之争

JavaScript并不总是次优语言

语言的性能

语言的设计理念

全栈工程师最佳实践

通用用途语言 vs 特定领域语言

框架和库拓展了语言

脚本语言的优势

脚本语言不需要编译

脚本语言常常不用关心清理内存

脚本语言常常会针对特定领域优化

脚本语言常常是动态类型语言

脚本语言的抽象层常常更高

脚本语言常常有包管理器

12. 全栈游乐场

VPS

虚拟专用服务器(Virtual Private Server,VPS)

实体主机、VPS、虚拟主机

对于网站的全貌有所了解

  • 初始化。Linode提供一键安装操作系统,等待几分钟操作系统就安装完成了。
  • 安装最新的Apache(或者其他服务器)。启用Apache的rewrite等模块,WordPress的URL重写会用到。
  • 安装MySQL数据库,配置WordPress的数据连接。
  • 配置域名和路由(包括访问路由配置、日志配置、网站域名和别名等)、启动服务器、查看资源利用,等等。
  • 当然,也不要忘了安全防护和设置自动备份。

    时间就是金钱

部署自己的环境

学习Linux

理解HTTP

实践

VPS选择

关注服务器安全

  • 新建一个普通用户,以后都不要用root登录了。
  • 使用SSH的名值对的登录方法,禁用用户名和密码的登录方法。
  • 禁用root账户通过SSH登录。
  • 安装一个防火墙。
  • 安装Fail2Ban,杜绝字典攻击。

    操作系统选择

CentOs、Debian、Ubuntu、Fedora

域名解析

云服务器

13. 软件设计方法

设计模式

关注点 - 高效编写代码 - 高可复用性 - 抽象带来的可读性

创建型模式

创建型模式,就是用来创建对象的模式,它对实例化的过程进行了抽象。创建型模式帮助一个系统独立于如何创建、组合和表示它的那些对象。也可以理解为,创建型模式将创建对象的过程进行了封装,作为客户程序仅仅需要去使用对象,而不再关心创建对象过程中的逻辑。

结构型模式

结构型模式主要解决类、对象、模块之间的耦合关系。

行为型模式

行为型模式为设计模式的最后一种类型,用来识别对象之间的常用交 流模式并加以实现。如此,可在进行这些交流活动时增强弹性。

架构模式

关注点 - 多个职位(比如后台开发和前端开发)可以平行工作同时进行。 - 构建一个软件系统的多种技术。

MVC模式

架构模式之王

设计原则

DRY

三次法则(rule of three)是代码重构的一条经验法则。

惯例优于设置

KISS原则

KISS(Keep it simple,stupid):软件设计当中应该注重简约的原则。

优点
  • 较简单的系统更容易构造、运行和维护。
  • 较简单的解决方法总是更具弹性、柔性。
  • 较简单的系统更便宜。
  • 较简单的系统更容易实现、更快地获得回报。
  • 较简单的方法更讨用户的欢心。
  • 较简单的系统更容易分阶段地执行。
  • 较简单的系统更容易被理解。

    最少知道原则

松耦合原则

14. 高效工程师

为什么需要高效

一个人的效能会影响整个团队的效能,所以每个人的高效都很重要。

提速100倍

1.阅读英文资料

  • 英文的技术资料更多
  • StackOverflow有完善的鼓励机制
  • Google的搜索能力非常强
  • 英语世界的语言风格比较严谨

    2.时间管理四象限

  • 一:既紧急又重要(立即执行)

  • 二:紧急不重要(请他人代劳)
  • 三:重要不紧急(制定计划)
  • 四:不紧急不重要(对他说不)

    3.消除重复工作

4.给自己留出不被打扰的时间

5.番茄工作法

6.跨界思考

7.纸上头脑风暴

8.使用版本控制和构建系统

9.加班是一种文化?

15. 学习设计

科学家和工程师

细分不是最好的解决方案

设计基础

  • 亲密:关系亲密的元素要放在一起,关系疏远的元素则要分开。位置的亲密性直接表现出意义的相关性。
  • 对齐:左对齐、右对齐、上对齐、下对齐。斜线对齐比较简单,居中对齐很难处理,新手不要尝试。
  • 重复:视觉上使用重复的图形和元素、线条和颜色等。比如QQ空间重复使用的黄色跟黑色、微信的绿色、京东的红色等。
  • 对比:如果两个元素(的大小或者颜色)不一样,就让它完全不一样,产生视觉冲击力。

    设计工具

Axure、Sketch、Quartz Composer、代码

Facebook的品牌设计故事

16. 全栈思维

有兴趣就够了吗

您有没有想着把您的产品和您的名字联系起来

学一点管理

  • 没有在最开始做出合理的时间评估
  • 没有根据人员的强项来安排任务
  • 没有唤起他们对项目成功的渴望
  • 缺乏沟通

    好的管理者能让平凡的员工做不平凡的事

《卓有成效的管理者》5个核心思维习惯 - 有效的管理者知道他们的时间用在什么地方。 - 有效的管理者重视对外界的贡献。 - 有效的管理者善于利用长处,包括自己的长处、上司的长处、同事的长处和下属的长处。 - 有效的管理者集中精力于少数重要的领域,在这少数重要的领域中,如果能有优秀的绩效就可以产生卓越的成果。 - 最后,有效的管理者必须善于做有效的决策。

根据员工特质来授权

沟通:被忽视的竞争力

沟通是软技能

针对目标听众

有方法

表达自己的想法

示例:谈谈PPT

  • 不要有太多文字
  • 设定进度
  • 对待错误:放松
  • 有条件的话,录像并对比提高

    内向性格的竞争力

转载于:https://www.cnblogs.com/Doduo/p/8066427.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/251280.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

div设置overflow-scroll滚动之后,jq获取其子元素的offset.top出现问题。

先上个图&#xff1a; 布局很简单&#xff0c;左右超过屏幕的部分自行滚动。 1. html <div class"ce-container"><div class"ce-leftBox">//左边的内容</div><div class"ce-rightBox">//右边的内容 </div…

javascript --- 利用Sortable实现一个可视化公式编辑器

Sortable的依赖引入和简单使用参见:https://blog.csdn.net/piano9425/article/details/90437182 先简单的介绍一下可视化公式编辑器的功能(样式没有调,毕竟每个人的需求都不一样): 首先会有2个需要计算的(我称为操作数)A_XiangRaoZuWenSheng和AYKZQ_CS,以及两个操作符ADD(加法…

使用uni-app搭建微信小程序

0 问题待解决 import { } 与否为什么要封装对齐问题每次重启项目&#xff0c;sitemap就会消失动态修改标题失效图片问题多多 &#xff1a;高度自适应 改成image固定高度&#xff0c;mode&#xff1a;aspectFill微信小程序文档b站视频链接后端接口文档 一、知识点 uni-app 是…

HttpTomcat

本节内容&#xff1a; Http协议Tomcat服务器下面开始的一系列内容都是JavaEE的内容&#xff0c;主要的内容见下图。JavaEE主要是做服务器端开发。 JavaEE全部规范&#xff1a;有13门技术&#xff0c;主要做web开发的需要学习servlet和jsp。其他技术&#xff0c;像EJB、 JNDI、J…

python---线程与进程

一 线程 1.1 概述 线程是操作系统能够进行运算调度的最小单位。它被包含在进程之中&#xff0c;是进程中的实际运作单位。一条线程指的是进程中一个单一顺序的控制流&#xff0c;一个进程中可以并发多个线程&#xff0c;每条线程并行执行不同的任务。 Threading用于提供线程相关…

jquery常见操作分享

参考: https://www.cnblogs.com/eager/p/7133270.html

es 插件

类 若 实现NativeScriptFactory接口。A factory to create instances of either {link ExecutableScript} or {link SearchScript} 只是一个工厂类&#xff0c;仍需要 创建 上面二者之一。实际中 需 创建 类 继承 SearchScript接口的实现类AbstractSearchScript 的 子类 Abstra…

使用uni-app报错this.setData is not a function

一、报错 出现this.setData is not a function报错的绝大多数情况是&#xff0c;在回调时&#xff0c;this指向作用域为当前异步方法所在的对象&#xff0c;详见微信小程序异常处理——this.setData is not a function报错处理 二、排查原因 但我并没有在回调中使用this.set…

搭建SpringBoot服务器,在公司内网中使用

搭建SpringBoot服务器&#xff0c;在公司内网中使用。 学习了&#xff1a;https://blog.csdn.net/z3881006/article/details/78902231 就是一个程序&#xff0c;托管于github&#xff1b;https://github.com/spring-io/initializr 转载于:https://www.cnblogs.com/stono/p/9301…

javascrpt --- 使用jquery添加dom元素和Angular ng-repeat生成select性能比较

今天用两种方法实现了动态的给select添加option的功能. 第一种是用jquery. // html <select id"drag-pointList"></select> // js $(#drag-pointList).children(option).remove(); // 清空之前的option let list res.data.list ; // res是ajax请…

任何时候,写下一个类,一定要有三个函数

1、默认构造函数 2、拷贝构造函数 3、虚 析构函数转载于:https://www.cnblogs.com/buddho/p/8076165.html

【C语言及程序设计】项目2-15:模块化的简单银行系统设计

问题描述&#xff1a; https://edu.csdn.net/course/play/456/4808 // 银行系统.cpp: 定义控制台应用程序的入口点。 //#include "stdafx.h" #include <stdlib.h> #pragma warning (disable: 4996)int PassTest(); void ibalance(); void withdraw(); void de…

jquery --- 使用when方法等待2个异步事件结束后执行某一个函数.

$.when(promise1, promise2) .done(function(args1, args2){console.log(args1 args2); }// 上述代码,等待promise1和promise2执行完,打印出(promise1和promise2)使用的参数 // 注:1.promise1和promise2是异步调用的函数,如ajax请求 // 2.如果执行promise1时用到了一个参数…

Android基础知识(一)

此篇文章开始逐步记录一些Android开发的一些相关知识。本文主要讲了一些adb的常用指令&#xff0c;Toast的常规使用&#xff0c;Intent的显式启动活动&#xff0c;按钮点击事件的四种处理方法&#xff0c;一些常见布局。 1. ADB常用指令 Android Debug Bridge adb android调试桥…

Android 6.0 动态权限申请

1. 概述 Android 6.0 (API 23) 之前应用的权限在安装时全部授予&#xff0c;运行时应用不再需要询问用户。在 Android 6.0 或更高版本对权限进行了分类&#xff0c;对某些涉及到用户隐私的权限可在运行时根据用户的需要动态授予。这样就不需要在安装时被强迫同意某些权限。 2. …

el-input输入金额,保留两位小数

需求&#xff1a;“只允许输入金额保留两位小数”&#xff0c;有2种实现方法 方法一&#xff08;通过正则控制&#xff09;&#xff1a; html&#xff1a; <el-inputv-model"inputTable.amount"input"formatNum(form.amount, amount)" ></el-i…

jquery --- pip方法

我们先来看下面一个例子: var getPromise $.get(/query); getPromise.done(function(data) {var postPromise $.post(/search, data); }); // ...无法在此处给postPromise方法附加处理器// 上面先使用get方法读取url为query的数据,在完成后,再使用post方法将数据发送给另一个…

斜率DP总结

chunlvxiong的博客 T1&#xff1a;防御准备 三个月后第一次写博客&#xff0c;我们从这个题开始&#xff1a;http://www.lydsy.com/JudgeOnline/problem.php?id3156。 这道题DP方程比较好写&#xff1a;用dp[i]表示1到i全部被控制的最小代价&#xff0c;那么dp[i]min{dp[j](i-…

前端使用react-intl-universal进行国际化

一、国际化 / i18n 目前国际化&#xff0c;就是开发者写对象&#xff0c;一个key关联若干语种的翻译。相比于浏览器自带的翻译功能&#xff0c;语义更加准确。 “国际化”的简称&#xff1a;i18n&#xff08;其来源是英文单词 internationalization的首末字符i和n&#xff0c;…

守护线程Daemon的理解

1、守护线程伴随着主线程的销毁而销毁&#xff1b; 2、jvm虚拟机中有很多守护线程&#xff0c;随着main函数的结束而结束&#xff0c;自动回收栈中的内容。 Thread t1 new Thread(){Overridepublic void run() {for (int i 0; i < 10; i) {try {Thread.sleep(1000);} catc…