为何感觉做网页的不多但是前端却比安卓ios的需求大？

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了为何感觉做网页的不多但是前端却比安卓ios的需求大？相关的知识，希望对你有一定的参考价值。

参考技术A 因为现在网页开发人员已经不再单纯的只开发网页

在Web2.0时代

前端开发人员都是往大前端方向发展

html CSS JS只是基本功

还得需要会Vue React Angular三大框架

小程序和Web APP开发

服务端的NodeJS

前端工程化Webpack gulp

gitlab github等

还有MongoDB Redis等数据库

前端是越来越复杂了

并不是传统意义的前端只做界面

现在简单的CURD都是前端自己完成

后端更多的是做数据相关的工作

一个非常好的问题。题主说的前端应该是包含了H5跨平台开发的“大前端”。

一，大前端
随着移动互联网的发展，前端开发成为重点。移动端有多个平台，android，ios，微信小程序，还有重任在肩的华为鸿蒙，为了支持这些平台和系统，越来越多的应用开始使用H5跨平台架构，这时有个新名词叫做“大前端”。

为了满足实际业务需求，现在软件系统的功能和架构都日趋复杂：多层架构，数据中台，动静分离，微服务、集群化部署，自动化运维，等等。曾经总结过这么一个现象：

早期的小型团队，前端手忙脚乱，需求易变，盯着页面整天改来改去。

成熟稳定的团队，后端比较忙，持续不断的开发新功能。

从实际情况看，前端工程师数量比较多。

二，H5跨平台开发
这时的H5开发已经不单单是网页开发了，而是前端应用开发。具体到H5 Hybrid架构，常用三剑客：HTML, css, javascript

1) HTML和css是页面设计 ，没有代码逻辑

2) JavaScript编程 ，还有其它衍生语言，比如常用的TypeScript

JavaScript是一种脚本语言，由解释器加载执行，常用在网页前端动态展示、和服务后端交互等场景。

3）常用框架

有很多成熟的框架可用，比如JQuery, AngularJS，React，还有前后端都跑通的NoteJS

三，Android，iOS原生开发
这是几年前的一个话题了，中间经历了很多波折，当2012年Facebook宣布放弃H5转向原生开发的时候，似乎已经有了阶段性定论。然而随着微信还有H5技术、开发框架的快速发展，天平又再次偏向了H5。

目前来看，“大前端”H5跨平台开发工程师的需求数量，远多于Android、iOS原生开发的需求。

只能说你这个感觉偏差非常大！

web 层面的前端开发人员比原生 app 的开发人员数量上多了很多。抛开 web 其原有的领域不说，现在很多 Android 和 ios 的开发都采用了 hybird 技术，一种原生和 web 混合的开发手段。

很重要的一个原因就是 web 的开发部署周期非常迅速，而 native app 挂到市场后都会有一个审核过程，现在互联网企业对产品的设计规划变化非常多，特别是 Apple store 的审核时长较长，跟不上频繁的迭代开发而产生的更新，所以就有了将更新评率较高的部分分离出来用 web 技术来实现的这种变通手段。

这样一来，web 前端的技术人员又覆盖了一部分原本不是他领域内的工作。

其实前端这几年火爆的发展还是源于对软件开发团队的配置以及成本投入的需求，目前web前端开发已经占据软件开发招聘市场很大的比例了！

接下来给大家谈谈web前端发展迅速的主要原因：

互联网企业属于创投类比较青睐的项目，当你有一个很好的idea的时候，只需要一定的启动资金，将你的idea落地为互联网产品，借此去吸引一定的流量，有了流量之后就可以找风投进行入股，在资本介入之后就会有非常迅速的发展，甚至还有上市的可能，风投只要在众多的投资项目中有少量成功的案例，那么就可以赚的盆满钵满，这也是互联网成为这些风险投资资金的蓄水池。

至于互联网产品的流量入口就很多了，例如：有的用户从电脑端百度访问、有的用户从手机百度访问、有的用户会从微信小程序访问、有的会下载官方推荐的APP、有的用户使用安卓系统、有的用户使用的是iOS，无论哪种方式都会产生很大的可能性，其背后都是一类用户的访问习惯，而作为产品必须尊重每一种习惯，否则将会丢失一部分的客户群体，对于一个起步阶段的互联网产品来说，丢失的任何一个用户都是不可接受的失败，必须使出浑身解数来迎合用户，增加产品粘合度以及用户的体验度。

面对如此多的流量入口，对于早期尚未拿到风投的创业型互联网公司来说，软件开发团队的工资将占据整个项目启动资金很大的比例，以至于很多项目还没搞出来上线就已经over了或者项目草草上线之后发现运营的资金也是捉襟见肘，导致了整体项目的失败！

这类公司已经功成名就，各自在自己的领域已经是大象般的存在了，资金势力雄厚、技术能力与产品也已经非常成熟，前端软件开发的任务也从早期抢市场，谁先上线谁就赢得先机，转型向产品维护以及功能的迭代更新，所以工作量也会大幅下降，自然招聘量也会随之降低，而且未来面对新的产品开发也会不断的尝试新的技术来满足团队优化的目的。

对于外包公司来说承接的项目会比较杂、业务类型也是多种多样的，所以如果一个前端团队可以解决来自iOS、安卓、pc端的所有需求那将是再好不过的选择了，既节约了成本，又可以提升开发效率并能整合团队资源何乐而不为！

对于非IT类企业来说，这类企业主营业务不是IT产业类，对软件的需求就是满足企业本身管理与生产的信息化，所以不可能在IT团队的投入上有着过高的追求，如果自身的IT能力即可以满足日常的生产与管理，又可以在商业上有所建树那将是非常完美的选择，目前的前端框架完全可以满足这类企业在软件界面端开发的所有需求，也是得到企业青睐的原因所在！

做网页的需求量是做安卓、iOS原生前端页面的需求的百倍都不止，你的感觉没错。

而你觉得做网页的不多也很正常，因为借助于前端UI框架、开源项目、工程构建、组件化等，现在前端更侧重于JavaScript工程构建，很少吭哧吭哧写页面了。

前端开发除了有传统的网站PC页面、朋友圈的网页、小程序以外，还在不断渗透它的影响力和扩大它的势力范围，比如：

1、跨多端，安卓、iOS、Windows、Mac、Linux等很多应用都开始采用hybrid的方式来开发，甚至直接用JavaScript生成；

2、前端SaaS、PaaS服务，随着云计算的发展，将人工智能、大数据等做成第三方服务的公司越来越多，这个趋势在美国比较明显，中国也在跟进，而很多服务都是线上服务，比如线上Office、线上PS、线上OA平台、线上大数据展示平台、线上表格、低代码等，将服务线上化已经是大势所趋，而所谓线上就是基于浏览器，而只要基于浏览器就是前端开发。

基本所有企业都有操作系统吧！都是前端开发！你平时用的app，也基本都是前端开发的。那种活动啥的，全是前端

对于题主的提问，其实回答很简单，不需要虚头巴脑说前端各种华丽花哨的，我就反问题主，安卓ios只做移动端应用，而web前端做的是跨平台应用，现在单把移动应用拿出来单说，由于原生应用开发周期长，更新审核繁琐，很多原生应用的内容都是web写的，安卓iOS相当于做了个框，可以理解为内嵌一个浏览器，这样一对比，量级就明显了，另外现有各平台的小程序都是前端从业者，还需要列举更多吗

app很多都是前台做的，原生的都很少工作量了。还有各种微信，支付宝，美团，等等小程序的前端都是给网页前台做

iOS开发如何学习前端

iOS开发如何学习前端(1)

我为何学前端?
因为无聊. 

概念

前端大概三大块. 

  1. HTML 
  2. CSS 
  3. JavaScript 

基本上每个概念在iOS中都有对应的.
HTML请想象成只能拉Autolayout或者设置Frame的ViewController.
好比你在网页上放了一个Button,如果用HTML你就可以设置他的摆放位置,在哪哪个控件里.但是你不可以设置大小,颜色,圆角之类的属性.
CSS专门负责HTML管不了的这些颜色啊,大小啊之类的属性.
JavaScript主要负责响应事件,你把它想象成iOS里面的处理Event就行了. 

废话不多说.第一篇,我们做个导航条.
如图



展开你的想象力,在iOS做这样的一个导航条你会用哪个控件?
无非就是ScrollView或者TableView或者Collectionview. 

其实HTML这种东西也叫作列表.对应的HTML标签叫做<ul>.
来看下面一段代码. 

<!DOCTYPE html>
<html>
    <title>Navigator</title>
    <head>
    </head>
    <body>
        <ul>
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JAVASCRIPT</a></li>
            <li><a href="#">SQL</a></li>
            <li><a href="#">PHP</a></li>
            <li><a href="#">BOOTSTRAP</a></li>
        </ul>
    </body>
</html>

我上面已经说过了,\\

  • 你可以看作是iOS中的UITableView.那么相应的,ul标签所包含的\\
  • 标签你当然可以看做是一个个UITableViewCell. 所以,整个body标签包含的就是一个拥有6列的列表.(等同于一个拥有六个Cell的UITableView)
    保存为index.html之后用chrome打开之后的效果是这样的.


    效果和我们想要的还有一定差距. 
    1. 每一列之前有个黑点,我们不想要,应该去掉. 
    2. 导航栏应该是横的而非竖的. 

    当然还有很多细节不一样,但是这两个最明显,所以我们先改掉这两个问题. 

    CSS

    既然涉及到样式的问题,那么这已经超出HTML力所能及的范围了.我们这时候就要引入CSS了. 

    怎么引入?
    在index.html的同一个文件夹内创建style.css文件.
    然后在我们的index.html的<title>标签下面加入这样一句话.
    <link rel="stylesheet" href="./style.css">
    这样,就告诉了我们的HTML,在渲染整个网页的时候,样式之类的东西请在当前文件夹的style.css文件里找. 

    ok.
    该写CSS了.
    其实所有GUI的属性都差不多.背景色一般叫backgroundColor, 间距一般叫padding, 文字对齐方式一般叫textAlignment.
    诸如此类.
    所以,我们的第一件事就是,把每一列之前的黑点去掉.
    按照iOS的习惯,我们是不是应该先找到某个控件,再去修改控件的属性?
    在CSS中也是一样.
    怎么获取想要修改的控件?
    很简单.这样就可以了. 

    ul 
    list-style-type: none;

    再运行一下看看.



    好的,第一个问题已经解决.
    现在解决第二个问题.如何让<ul>标签中的每一条横着放.
    其实也很简单.
    我们只需要设置li 标签中的一个属性float就可以了.
    这个东西可以理解为布局方向.
    如果设置为这样就可以了. 

    li 
    float: left;

    刷新一下chrome看看效果.



    已经横过来了. 

    接下来,其实就是设置各种属性.让我们的导航条看起来和w3schools.com的导航条看起来一样. 

    1. 去掉每一个<a>,也就是链接下面的下划线. 
    2. 选中状态的区别. 
    3. ul标签的背景色. 
    4. 鼠标悬停的时候,每一列的背景色要发生变化. 

    直接贴代码了. 

    ul 
    list-style-type: none;
    margin: 0;
    padding: 0;
    background: #5f5f5f;
    height: 44px;


li 
    float: left;
    height: 44px;
    width: auto;


li a 
    display: block;
    text-decoration: none;
    color: white;
    text-align: center;
    padding: 14px 16px


li a:hover:not(.active) 
    background-color: black;


.active 
    background-color: #4CAF50;

    没学过CSS的看见这些代码估计有点晕.
    我来解释一下. 

    li a 这种是什么意思?

    意思就是<li>标签里的所有<a>标签的属性.所以,只要有这种多个标签放一起中间用空格隔开的东西意思就是,右边的标签包含在左边的标签里. 

    .active 是什么意思?

    CSS里面有两个符号要记清楚一个是.一个是#,什么意思?
    举个例子.
    <li class="FistLi"></li>
    <li class="SecondLi"></li>
    问,我现在需要把class为FistLi这个标签的背景色改为红色,把class为SecondLi的这个标签的背景色改为黄色,怎么改?
    那么你就需要在CSS里这么写. 

    li.FirstLi 
    background-color: red;
  
li.SecondLi 
    background-color: yellow;

    是不是看出了点端倪.
    这个.符号后面一般会跟某个标签的class属性的值.用来特指某一个标签.
    想象一下,假如设计了一个特别复杂的页面.里面很多个不同的标签,那你如何区分?这时候需要给不同的标签设计不同的class或者id用以区分.简单来说,这玩意就像变量名.这么说应该懂了吧.
    说完了.,那么#又是干什么的?
    功能类似.不过.是用来选择class这个属性的,而#是用来选择id这个属性的.
    我们只需要把上述的例子换成这样.也能达到相同的效果.
    在HTML中.
    <li id="FistLi"></li>
    <li id="SecondLi"></li>
    在CSS中. 

    li#FirstLi 
    background-color: red;
  
li#SecondLi 
    background-color: yellow;

    那你估计要问了.这两个功能差不多啊.那我到底该用哪个?
    引入官方解释. 

    据说W3C对于ID和CLASS的设定是ID具有唯一性，class具有普遍性。所以说我们用他们俩的时候就要按照这个特性来使用。id 是不能重复的，class 却是可以重复使用，通过id可以找到页面上唯一的一个标签，而class呢可以多个标签使用同一种样式提供了可能 

    li a:hover:not(.active)这么一长串又是个什么鬼?

    咱们一点一点分析.
    首先li a这个的意思是在<li>里面的<a>标签.
    a:hover,hover是英文盘旋的意思.
    这句什么意思呢?
    因为a代表的是一个超链接.a:hover的意思就是,当鼠标停留在这个超链接上.
    所以前半句的意思是,当用户的鼠标停留在li标签里的a标签上的时候.
    后面又接了一个:not(.active).
    根据前面的解释.active意思就是,class等于active的所有标签.前面加个not什么意思?就是所有class不是active的标签.
    好了,现在连起来. 朗读一遍.
    当鼠标停在所有li标签里的a标签,但是a得class属性又不等于active的时候请执行下面的css.
    就是这样. 



以上是关于为何感觉做网页的不多但是前端却比安卓ios的需求大？的主要内容，如果未能解决你的问题，请参考以下文章

iOS开发如何学习前端

iOS开发如何学习前端

同样是前端，为何别人那么优秀？

2017年2月总结

Java程序打开指定地址网页

前端必备技能——轮播图（原生代码+插件）