2018 Web 开发者路线图

最新推荐文章于 2024-07-12 10:52:37 发布

mawei7510

最新推荐文章于 2024-07-12 10:52:37 发布

阅读量514

点赞数

分类专栏： JavaWeb

JavaWeb 专栏收录该内容

29 篇文章 4 订阅

订阅专栏

文本编译自 Roadmap to becoming a web developer in 2018。原作者 Kamran Ahmed 解释说做这个路线图的原因是为了给一个他认识的老教授使用，分享给在校的大学生们，让他们对 Web 开发者这个职业有一个清晰的认识。

如果你还是一个学生，或者一个入门的 Web 开发者，也许踌躇满志，想做一番事业，只是对这个职业略感迷茫，新技术层出不穷，何去何从，希望下面这个四个路线图能够为你所用。

Web 开发者的3个方向

Web 开发者的三方方向分别为前端开发、后端开发和运维。

image.83992242aa90.png

黄色：推荐；
灰色：尽可能学习；
橙色：任选其一。

可以看到，作为 Web 开发者，不管从事什么职位，下面这些技能点是必须掌握的：

Git，代码版本管理，外刊君推荐阅读 progit 这本书；
SSH；
HTTP/HTTPs 和 API，想要真正成为一名 Web 开发者，对 HTTP 协议的了解是必不可少的；
基础命令行的使用；
学会钻研，养成碰到问题，通过自我学习的方式来寻找问题的解决方案，这一点有尤其重要；
数据结构和算法，相信在通常的大学计算机学科这两门课都是要学习的；
字符编码；
Github，Github（包括 Google、Stack Overflow）是 Web 开发者的宝矿，好好利用。

前端开发

随着前端技术的不断发展，原来流行的一些技术已经不再出现在下面这个图中。

image.94e24e669326.png

外刊君划出一些自己认为的重点：

HTML；
CSS 本尊和 CSS3+；
JavaScript 本尊和 ES6+；
React、Angular 或者 Vue；
Webpack 和 gulp；
Node.js 体系（包括 Node.js 服务端开发，npm 等）。

后端开发

原作者 Kamran Ahmed 推荐大家学习 Node.js 或者 PHP 7，他也喜欢 Go，再者则是 Ruby。

image.02c0f063bed2.png

不过从中国的国情出发，以及从在各个领域取得的成绩和积累来看，Java 应该排在前列；除了语言的部分，就是本图中的其他黄色部门的学习都很重要，都是构建大型 Web 项目，丰富的功能所不可或缺的技能。

运维开发

在中型以上的公司，运维体系的建设必不可少，是快速开发和发布的保证，是线上服务稳定，用户体验提升的基石。

image.afa885f3343c.png

总结

感谢 Kamran Ahmed 为我们提供了一个清晰且与时俱进的路线图，如果你的老司机有新的点子或者建议，可以到 Github 上提交 PR 给原作者，完善这些路线图。

如果你 Web 马路上的萌新，也选定自己的一个方向，行动起来，在2018年顺利摘取小蓝旗，实现自己的人生目标吧。

好了，外刊君仔细看了一下这些路线图，虽然知道七七八八，还是有很多很多得学习起来，看书去了。

            <div class="vote-post">
                <i class="fa fa-heart-o" aria-hidden="true"></i>
                <span class="vote-count">4</span>
            </div>

            <script type="text/tpl" id="recommend-posts-tpl">
                {{~it.recommendPosts :post:index}}
                    <div class="col-sm-4 col-xs-12">
                        <a target="_blank" onclick="ga('post', 'recommend-post', '{{=post._id}}')" class="recommend-post post-thumbnail" href="/posts/{{=post._id}}" style="background-image:url({{=post.cover}})">
                            <span>{{=post.title}}</span>
                        </a>
                    </div>
                {{~}}
            </script>


            <!-- TODO: 相似文章 -->
            <div class="recommend-posts container-fluid">
                <h5 id="-1">推荐阅读<a class="anchorjs-link " href="#-1" aria-label="Anchor link for:  1" data-anchorjs-icon="¶" style="padding-left: 0.375em;"></a></h5>
                <div class="row">  <div class="col-sm-4 col-xs-12"> <a target="_blank" onclick="ga('post', 'recommend-post', '5a0af34841a4410ebdd6df1a')" class="recommend-post post-thumbnail" href="/posts/5a0af34841a4410ebdd6df1a" style="background-image:url(https://qianduan.debuggap.com/524ee3f84a1742cbc4de3e2ff95ce983_r.png)"> <span>Webpack傻瓜式指南（一）</span> </a> </div>  </div>
            </div>
        </div>