余晖落尽暮晚霞,黄昏迟暮远山寻
本站
当前位置:网站首页 > 编程知识 > 正文

2019 简易Web开发指南(学习大纲)

xiyangw 2022-11-25 11:14 18 浏览 0 评论

2019年秋招即将到来,各位同学春招辛苦了。 不管大家春招年过的怎么样,秋招还是要继续加油的! 在此我整理了个人认为在2019仍是或者将成为主流的技术与大家分享,包括前端、后端和全栈相关。

工具、软件

欲先攻其事必先利其器,用好工具是做好开发的基础。

  • 编辑器/IDE: VSCode,Sublime Text,Atom
  • 浏览器:Chrome,Firefox
  • 设计/原型:Adobe XD,Photoshop,Sketch,Figma
  • 命令行工具:Git Bash,WSL,iTerm2,Hyper
  • 版本管理:Git

前端

前端我觉得是每个做web开发的同学都应该掌握的,就算是做后端开发的,基本的前端知识也是必不可少的。


HTML & CSS

  • HTML5
  • CSS3
  • Flexbox ,CSS Grid
  • CSS Variables (Custom Properties)

响应式布局(Responsive Layout)

  • 设置Viewport
  • Media query
  • rem-based layout
  • Mobile First Design

Sass

  • Structured CSS
  • Variables
  • Nested CSS
  • Mixins & Functions
  • Inheritance

Javascript

  • Data Types, functions, conditionals, loops, operators
  • DOM操作,Events
  • JSON
  • Fetch API
  • ES6+ (arrow function, promise, async / await, destructuring...)

HTML / CSS 框架

html/css将被逐渐弱化,但是掌握一两个流行框架还是有必要的。

  • Bootstrap
  • Materialize
  • Bulma

JS框架

  • React:目前最流行
  • Vue:简单易用,越来越多人用
  • Angular:曾经很流行,现在有点衰退

状态管理(state management)

  • Redux
  • VueX
  • NgRx
  • Apollo (GraphQL Client)

后端渲染(server side rendering)

  • Next.js (React)
  • Nuxt.js (Vue)
  • Angular Universal (Angular)

开发工具

  • 依赖管理:NPM,Yarn
  • 应用打包:Webpack,Parcel
  • 任务管理:Gulp,Grunt
  • 编辑器扩展:ESLint,Live Server,Prettier

移动端

有了前端的知识后,我们还可以开发手机app。

  • React Native:使用react开发原生应用
  • NativeScript:使用Angular/TypeScript/Javascript开发原生应用
  • Ionic:使用html/css/js开发混合应用
  • Flutter:使用Dart语言开发原生应用
  • Xamarin:使用C#开发原生应用

桌面端

甚至桌面app!

  • Electron:使用chromium和node.js,兼容windows,mac,linux

后端

语言

前端同学如果想成为全栈,学一门后端语言是必不可少。

  • Node.Js:就算不做全栈,nodejs也将成为前端的必备技能
  • Python:如果除了web开发想往人工智能、机器学习、数据分析方向扩展的同学,python更合适
  • C#:个人很喜欢的语言,非常优雅和高效
  • Go:越来越流行的语言,有很强大的标准库,减轻对第三方的依赖
  • PHP:虽然很多人觉得shitty,但是不得不承认太多网站都是php写的,wordpress实在太流行了

后端框架

  • Node.js:Express,Koa,Adonis
  • Python:Django,Flask
  • C#:ASP.NET
  • PHP:Laravel,Symfony

数据库

  • 关系型:MySQL,PostgreSQL,MS SQL
  • NoSQL:MongoDB,Couchbase
  • 云存储:Firebase,AWS,Azure Cosmos DB
  • 轻量级:SQLite,NeDB,Redis

CMS(Content Management System)

如果不想自己开发网站的时候,用个现成的CMS系统也是不错的。

  • PHP:WordPress,Drupal
  • JS:Ghost,KeyStone
  • Python:Mezzazine
  • .NET:Piranha,Orchard CMS

运维基础

基本的运维知识也是需要的,不然自己写个网站搞不上线多着急。

  • 注册域名:Namecheap,Google Domains
  • FTP,SFTP文件上传:Filezilla,Cyberduck
  • 部署:Linux,SSH,Git,web服务器(Nginx,Apache)
  • 虚拟化:Docker,Vagrant
  • 静态托管服务:Netlify,Github Pages
  • 托管共享主机 & VPS:Inmotion,Hostgator, Bluehost
  • 云平台:Digital Ocean,AWS,Heroku,Azure

其他

GraphQL & Apollo

GraphQL简而言之是一种API 查询语言(QL = query language),提供了一种革命性的API实现方式。GraphQL是一种规范(specification)而不是实现(implementation)。而Apollo是GraphQL最火的实现。更多请参考:Awesome GraphQL。


TypeScript

TypeScript诞生已经有好几年了,近两年变得很火,很多框架和工具都是typescript写的,比如vscode,angular,ant-design,更多请参考 github。对于想开发框架或者库的同学typescript很值得学,但是优先精通es6+babel的开发方式。


PWA (Progressive Web Apps)

用户体验是个永恒的话题,大家都想使用体验如原生应用的网站,所以PWA是个必然的趋势。更多请参考 github awesome PWA

学习从来不是一个人的事情,要有个相互监督的伙伴,想要学习或交流前端问题的小伙伴可以私信“学习”小明获取web前端入门资料,一起学习,一起成长!

相关推荐

Vue的框架(了解)

前端MVC设计模式MVC设计模式,其实就是将前端实现某个业务的所有代码划分为三部分Model:模型,指数据模型,这个数据一般来自于服务器View:视图,指页面标签内容Controller:控制...

Vue.js实战 第五章练习一

练习要求:在原有表格基础上,新增一项是否选中该商品的功能,总价变为只计算选中商品的总价,同时提供一个全选的按钮。实现思路:按照vue数据和dom元素双向绑定的特性,定义allCheckStatus变量...

Vue基础到进阶教程之class和style绑定

关于class和style我们并不陌生,这个在学习css的时候就是家常便饭了,操作元素的class列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用v-bind处理它们,...

深入Vue 必学高阶组件 HOC「进阶篇」

作者:ssh转发连接:https://mp.weixin.qq.com/s/seKoLSIMtTd1sU4uDrgZCA前言高阶组件这个概念在React中一度非常流行,但是在Vue的社区里讨论...

周末大礼包,23道高质量中级前端面试题。金九银十,建议收藏

这套面试题考察的内容比较常见,涉及到JavaScript、ES6、CSS、Vue、简单算法,浏览器相关知识等。题目列表1.JavaScript的数据类型有哪些2.什么是同源策略3.跨域的方法...

vue3.0-摒弃Object.defineProperty,基于 Proxy 的观察者机制

写在前面:11月16日早上,Vue.js的作者尤大大在VueToronto的主题演讲中预演了Vue.js3.0的一些新特性,其中一个很重要的改变就是Vue3将使用ES6的Proxy作...

程序员都必掌握的前端教程之VUE基础教程(七)

阅读本文约需要10分钟,您可以先关注我们,避免下次无法找到。本篇文章成哥继续带大家来学习前端VUE教程,今天主要讲解VUE的表单处理等知识点。下面我们就一起来学习该块内容吧!01简介在日常开发中,我...

web前端开之网站搭建框架之vue详解

网站搭建框架之vueVue是web前端快速搭建网站的框架之一。它与jQuery有所不同,是以数据驱动web界面(以操作数据改变页面,而jQuery是以操作节点来改变页面),同时,vue还实现了数据的双...

vue3.0尝鲜-基于 Proxy 的观察者机制探索

Vue.js的作者尤大大在VueToronto的主题演讲中预演了Vue.js3.0的一些新特性,其中一个很重要的改变就是Vue3将使用ES6的Proxy作为其观察者机制,取代之前使用...

TypeScript 设计模式之观察者模式

一、模式介绍1.背景介绍在软件系统中经常碰到这类需求:当一个对象的状态发生改变,某些与它相关的对象也要随之做出相应的变化。这是建立一种「对象与对象之间的依赖关系」,一个对象发生改变时将「自动通知其他...

vue面试3

1.单页面应用与多页面应用的去别2.简述一下Sass、Less,且说明区别?他们是动态的样式语言,是CSS预处理器,CSS上的一种抽象层。他们是一种特殊的语法/语言而编译成CSS。变量符不一样,les...

VUE v-bind 数据绑定

动态的绑定一个或多个attribute,也可以是组件的prop。缩写::或者.(当使用.prop修饰符)期望:any(带参数)|Object(不带参数)参数:attrOrP...

vue初学习之自定义选择框实现

v-model简单介绍在使用vue的过程中会经常用到input和textarea这类表单元素,vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别。vue使用v-model实现这些标签...

Vue实现拖拽穿梭框功能四种方式

一、使用原生js实现拖拽打开视频讲解更加详细Vue实现拖拽穿梭框功能的四种方式_哔哩哔哩_bilibili<html><head><meta...

Vue3.x setup 语法糖实现props双向绑定

1.背景为了封装一下Element-Plus的分页插件,需要实现父子组件之间的传值。2.父组件<scriptsetuplang="ts">letqueryPa...

取消回复欢迎 发表评论: