晋级高级前端工程师,你需要开发过这七类项目

F2E 前端

近些日子,随着 JavaScript 擅长做更多的事情,它也变得很难被全部掌控(更不用说不可能)。对这门语言更好的理解以及更多的经验意味着更多的工作机会。因此,花费时间来学习新东西很有用。学习编程最好的也是最常用用的方法是通过做不同的 项目。这个方法可以让你同时掌控编程的不同方面。花费少量时间,获得大量成果,获取更多的经验,这就是你要做的事情。

所以,在这篇文章中,我们将会讨论一些感动人心的项目创意,以此来提高你的技艺。它们涵盖了简单到复杂、小项目到大项目的全部过程。我们来看看你将会通过项目学到什么,以及预期你能到达的成果。让我们开始吧!

一、作品集网站

非常有用并且很有意思的做法;一个作品集网站是可以轻易且最容易完成的项目。它是一个绝佳的方式,即便是经验丰富的编程者,也可用来尝试新的框架和库。另外,最后,你会在某天发现一些有用的东西。与 JS 的生态系统一起,你还可学到其他的网站开发术语和概念。静态网站 (generator),(headlessCMS, 和 JAMStack 应该是知名的了。另外,你还可以提高你的 HTML 和 CSS 技术。

二、聊天

现在我们把难度提高一点儿。开发 一个聊天应用 需要同时具备前端和后端的经验。除非你想用点对点 (P2P) 连接,这需要更多的知识(如 WebRTC),不然你将会使用 Node.js。另一方面,这会带你了解一个新的世界。

当然,Node.js,拥有自己的生态系统、库以及框架。其中最流行的框架叫做 Express,它对不那么友好的 Node.js API 进行了封装。同时,它们没法离开 NPM 来使用 Node.js。 NPM 是包含数百万可用的开源 JS 库和工具的最大的包存储。

总而言之,你不仅可以提高你的前端和 Node.js 技术,还可(很可能)了解到 WebSocket。它是用于实时通信的协议 - 很多应用中都很需要。你还会了解到 Socket.IO - 一个非常杰出的库,与所有的实时紧密相连。

三、新闻聚合器

当你完成开发聊天应用后,你可以继续开发 一个新闻聚合器 - 一个用来收集新闻的站点。一个绝佳的示例网站 Echo JS 特别是 Hacker News (HN)。这个带有 公共 API,你可以使用它实现一个属于你的 HN 阅读器版本。这比你从头做一个全新的新闻聚合器要容易点儿,而且它现在也广受欢迎。我们甚至可以考虑用它来 代替 老实的 TODO 应用!

无论你是创建一个新的聚合器还是 HN 阅读器,这将都会学到相同的东西。我们要把主要的精力放在应用本身 - 他应该是一个响应式的 Progressive Web App (PWA)。如果你知道,PWA 是一个的网站,在满足一些要求后,可以像原生的应用一样 "安装" 在手机或者桌面上使用。它变得越来越受欢迎,所以,非常值得学习。

你还会另外一样东西就是REST API 这个概念以及其相关的所有工具。JavaScript Fetch API 大概是这儿最有用的。除此之外,你会学会标准的 HTTP 协议和库就像是 Axios.

四、网站分析

我们都知道谷歌几乎垄断了的网络分析。但是抛弃 Google Analysis 并且做一个自己的 分析工具,如何?与之前的列出的项目相比,这无疑是更耗精力和时间的项目,但它确实是个令人兴奋的项目。

网站分析工具可以分为两部分 - 用户端和服务端,一个可选的仪表盘。当做第一部分时,你必须要了解如何一些 Web API 来获取数据。这取决于你想收集什么 (输入热图,位置,花费的时间等),你必须要使用不同的 API。有些苦可以帮你做这些事,但是它们不常见。还有,你可以需要使用到 cookies 或者 Web Storage

服务端,你必须熟练掌握 Node.js。与客户连接 (无论实时与否),数据处理,数据库管理可能是是你最需要关注来处理的事了。 你还可以做一个美观的仪表盘来更好的分析数据。

总而总之,当你完成这个项目时,你将会得到一个完整的网络分享包,它可以帮你检查所有项。

五、本机应用程序

现在我们进入了更通用的领域。随着JS越来越流行,你可以用它制作一个成熟的本地应用程序也就不足为奇了。而且,这正是你应该考虑做的!

如果你想要桌面,你可以把前面提到的一些想法和 Electron结合起来, 你就有了一个应用程序! Electron是一个基于Node.js和Chromium项目的框架,它允许您将几乎任何JavaScript项目转换为本机应用程序。它很容易启动,但提供了许多 additional APIs 对于更高级的用例. 不幸的是, Electron 不适用于移动设备,所以我们只能寻找替代品。 像 Apache Cordova这样的项目, 可以让你的应用程序“原生”,只需把它放在一个WebView中,让你访问一些额外的api,但这样的方法并没有太多的“原生性”。

NativeScript 和 React Native 给你提供一些更好的选择。它们将JS代码绑定到各自平台的本机元素,从而提高性能并给您这种本机的感觉。顾名思义,React Native与React紧密相连,而NativeScript同时支持Vue和Angular,以及普通的JavaScript或TypeScript。

六、开源库

好吧,一个开源库  能教你什么?要知道,我并不关注你的库(或框架)可以做什么或者怎么做,就是关注它将开源这个简单是事实。加入这个有无数编程者组成的庞大的社区(特别是 JS),不是为了教你如何编码(你应该早已会编码)。 甚至不是无偿提供一些的想法。它可以让你获得前所未有的经验。

从编程的角度来看,你必须精通 Git。你还需要知道如何写出 高质量代码 和 测试。但是,编程之外这些领域最重要。当你推广你的项目时会做 营销 和 社会参与 。当处理 issue 和 pull-request 时会进行讨论 和 时间管理 。所以的事情都是不可见,但是非常重要的。一个杰出的编程者不应该仅仅局限于如何写代码,更应该超越它。这就是开源能教给你的东西。

七、游戏

最重要的是,我们有个可以个人完成的最通用和复杂的项目创意。我说的就是开发 一个游戏。在这儿,一切取决于你的的想象力以及编程技巧。

我想说的是,对于 JS 游戏,WebGL 或者 Canvas API 是必须的。 像 PixiJS 或者 Three.js 这样的库在你构建大型项目时可能特别有用。服务端编码也是需要的,至少网络游戏是这样的。最后,当 JS 不足以满足时开发,你还需要转向 WebAssembly,这是另一个话题了。

因此,如我所说,一个游戏,取决于它的复杂度,它会成为你做过的最好的项目。如果你可以独自搞定一个 MMO RTS ,那你将会成为真正的大师。 ;) 不过,请记住,这个必定不会是速成的。

想法

那么,这些是我列出最棒的 JS 项目想法了。如果你有其他项目想法可以推荐,请在评论中让我知道。另外,你是否愿意去实践任何一个我所列出的项目吗?

Image placeholder
DongyueZhang
未设置
  86人点赞

没有讨论,发表一下自己的看法吧

推荐文章
你需要的前端知识收集好了,请查收!

github地址记录学习成长收获的知识,不断进步,Front-end-go-on目前包含的模块有 HTML基础 CSS基础 JS基础 数据结构基础 Http基础 JS代码练习 算法代码练习 CSS代码

[Base 新加坡] 领航电商平台招聘前端工程师

地点新加坡,泛东南亚最大电商平台,新加坡知名团队,国际化平台,富有竞争的薪资,享受新加坡优质生活环境及教育资源,公司申请EP,属于技术引进性人才签证。可携带家人一起前往新加坡工作生活,子女可正常入托入

前端工程师不可不知的时间和地理坐标🔥

关于时间GMT和UTCGMT,即格林尼治标准时间,也就是世界时。GMT的正午是指当太阳横穿格林尼治子午线(本初子午线)时的时间。但由于地球自转不均匀不规则,导致GMT不精确,现在已经不再作为世界标准时

京东云和英特尔“花样”升级高性能云硬盘

数据,已成为这个时代的基调。当我们因为数据带来新的机遇而喜不自胜的时候,也常常会不可避免地遇到一些随之而来的困扰。与如何更好地使用数据相比,数据的存储和管理是更棘手的问题所在。面对海量数据爆炸式的增长

手把手带你入门前端工程化——超详细教程

课程推荐:前端开发工程师--学习猿地精品课程 本文将分成以下7个小节: 1技术选型2统一规范3测试4部署5监控6性能优化7重构 部分小节提供了非常详细的实战教程,让大家动手实践。另外我还写了一个前端工

上市公司招聘 PHP 高级架构师, 负责公司资讯网站

薪资35-40k*14【职位介绍】负责公司资讯平台开发,管理后端小团队岗位职责:负责公司资讯平台开发,管理后端小团队 负责平台开发、测试和维护工作; 岗位要求:计算机专业5年以上PHP开发经验,熟悉m

前端都该懂的浏览器工作原理,你懂了吗?

课程推荐《前端开发工程师--学习猿地精品课程》 前言在我们面试过程中,面试官经常会问到这么一个问题,那就是从在浏览器地址栏中输入URL到页面显示,浏览器到底发生了什么?这个问题看起来是老生常谈,但是这

Java开发工程师需要学什么?

课程推荐:Java开发工程师--学习猿地精品课程 Java开发工程师需要学什么? Java工程师要学什么,首先要确定你想要成为哪一方面的Java工程师。Java分为三个方向:JavaME、JavaSE

Carbon —— PHP 中日期 / 时间处理,你只需要这个扩展包就够了

在PHP中使用日期和时间并不是容易或清晰的任务。我们必须处理strtotime,格式化问题,大量计算等等。 这个漂亮的包叫做Carbon可以帮助在PHP开发中处理日期/时间变得更加简单、更语义化,从

前端程序员做了这件事就是工程师了

课程推荐:web全栈开发就业班--拿到offer再缴学费--融职教育 functionoutcome(value){}复制代码这是个标准的JavaScriptfunction。每个前端开发者(你以为)

你的公司是需要数据科学家还是数据工程师?差别有点大

越来越多的企业关注AI,企业组织也意识到拥有相关人才和技能非常重要。特别是最近对AI、机器学习(ML)、非ML预测分析和“大数据”的应用,使得数据科学家的需求有了显著的增长,未来还将继续。事实上,对数

【值得收藏】前端优化详解以及需要关注的几个问题

课程推荐:web全栈开发就业班--拿到offer再缴学费--融职教育 前端优化是一个大的课题,需要花好多时间才能理解,之前对前端优化陆陆续续有一些了解。所以这次从渲染优化,打包优化,代码优化做了一个系

PHP 开发工程师基础篇 (PHP 数组)

PHP开发工程师基础篇-PHP数组 数组(Array) 数组是PHP中最重要的数据类型,可以说是掌握数组,基本上PHP一大半问题都可以解决.PHP数组与其他编程语言数组概念不一样.其他编程语言数组是由

[郑州] [10K-15K] 美希出行招募 Laravel 开发工程师

薪资等信息薪资:10K-15K(可议) 工作地:郑州 工作时间:朝九晚五,单休 要求和职责如下至少有3年php开发经验 精通Laravel 熟悉Voyager(Laravel第三方可视化管理面板构建器

[北京][360] 安全研究院招聘 PHP 服务端开发工程师

[北京][360]安全研究院招聘PHP服务端开发工程师我们是360安全研究院-IoT安全部,360内部一个小而美的团队,致力于IoT安全研究如果你想有一个自由宽松的环境,能安心写代码、研究技术,我们团

PHP 开发工程师基础篇 - PHP 字符串

PHP开发工程师基础篇-PHP字符串字符串(String)字符串是一系列字符的集合.如"abc".在PHP中,一个字符代表一个字节,一个字节(Byte)有8比特(bit).PHP仅支持256字符集,因

PHP 如何上传文件和下载,你学会了吗?

第1章文件上传 1.1客户端上传设置 ​在B/S程序中文件上传已经成为一个常用功能。其目的是客户可以通过浏览器(Browser)将文件上传到服务器(Server)上的指定目录。 ​网络上常见的支持文件

56岁潘石屹下决心学Python,60岁程序语言之父们还在敲代码,你呢

比你成功的人,比你还努力。上周,SOHO中国董事长、地产大亨 潘石屹,56岁生日当天发布微博宣布进军编程语言Python。 紧接着第二天,又更新微博解释为何会做出此举。潘石屹给出的解释大致就是,在不断

每天凌晨下班,你是不是觉得特别光荣?

题图: fromZoommy当年刚去东方购物报到的第一天,直属上司就提醒我:“小王,虽然公司17点30分下班,但如果你的领导没有离开,你是没有权利下班的,明白了吗?”当年,我就是个愣头青,觉得这样挺好

Spring Boot到底是怎么运行的,你知道吗?

导读SpringBoot方式的项目开发已经逐步成为Java应用开发领域的主流框架,它不仅可以方便地创建生产级的Spring应用程序,还能轻松地通过一些注解配置与目前比较流行的微服务框架SpringCl

看完秒变5G专家!关于5G,你必须知道的事儿……

本文转自|鲜枣课堂   什么是5G    5G,就是5thGenerationMobileNetworks(第五代移动通信网络),也可以称为5thGenerationWirelessSystems(第

是的,你的AI技能正在“贬值”

大数据文摘出品编译:小蒋、李可、狗小白、周素云我们正处于AI创业热潮之中,机器学习专家的薪资水平水涨船高,投资者也乐于对AI初创公司慷慨解囊。AI的普及成为推动社会生产力标志,必将改变我们的生活。但是

DTCC | 云数据库时代已来,你准备好了吗?

作为基础软件之一,数据库一直是企业IT系统的核心,过去数十年,数据库技术发展缓慢。而随着云计算的到来及相关技术的不断成熟推动了数据库行业的快速发展,传统数据库铁打的防线也正在被撕裂。截至目前,全球主流

吊打面试官!MySQL灵魂100问,你能答出多少?

推荐阅读:面试机会不等人,资料看精不看多!史上最全Java技术资料合集!2019年中总结,400道一线大厂高频精选面试题合集(JVM+Spring+RabbitMQ+Mybatis+Redis+分布式

看完这篇,你还不能理解 ‘数据库架构’?趁早回家吧

来源:http://rrd.me/ep46N一、数据库架构原则高可用高性能一致性扩展性二、常见的架构方案方案一:主备架构,只有主库提供读写服务,备库冗余作故障转移用jdbc:mysql://vip:3