100字范文 > 初级java开发学习路线_成为初级全栈Web开发人员的10分钟路线图

初级java开发学习路线_成为初级全栈Web开发人员的10分钟路线图

时间：2024-02-16 08:45:28

初级java开发学习路线

So you have started your journey into the world of web development. But what do you learn first? The Internet is overloaded with a wealth of information about the millions of different technologies that a web developer can know.

因此，您已经开始进入Web开发领域。但是，您首先要学什么？ Internet上充斥着Web开发人员可以了解的数百万种不同技术的大量信息。

It’s not hard to see how confusing and off-putting it all is. As a former junior developer myself, I know the struggle.

不难看出这一切是多么令人困惑和反感。作为我自己的前初级开发人员，我深知挣扎。

This guide has been assembled based on my experience in the industry as a junior developer. This guide is also a summary of things that I, as a team lead, would expect from junior developers.

本指南是根据我作为初级开发人员的行业经验编写的。本指南还总结了我作为团队负责人对初级开发人员的期望。

There is a lot of information here - so grab a drink, get comfortable, and let’s get started!

这里有很多信息-因此，喝点饮料，放松一下，然后开始吧！

必须知道的 (The Must Know’s)

Regardless of your pathway and career goals, there are some things that every developer needs to know.

无论您的学习途径和职业目标如何，每个开发人员都需要了解一些事情。

Git/Source control— Every good developer will need to know how to use Git, especially in a team environment. So learn how to clone repos, make commits, create branches, and merge code

Git /源代码控制-每个优秀的开发人员都需要知道如何使用Git，尤其是在团队环境中。因此，学习如何克隆存储库，进行提交，创建分支以及合并代码

Debugging— Frontend, or backend, there will be bugs. Get familiar with the debugging tools for your IDE. Speaking of IDE’s…

调试-前端或后端将存在错误。熟悉IDE的调试工具。说到IDE的……

IDE— There are many IDE’s you can use, so pick one and get to know it. Your IDE is your best friend, and knowing the shortcuts and tools will make you a better developer. Personally, I recommend using VS Code.

IDE—您可以使用许多IDE，因此请选择其中一个并了解它。您的IDE是最好的朋友，并且知道快捷方式和工具将使您成为更好的开发人员。就个人而言，我建议使用VS Code。

Methodologies (Agile/SCRUM/Kanban) —When operating in a team, the odds are you will be using a product development methodology, so make sure you’re familiar with how they work

方法(敏捷/ SCRUM /看板)—在团队中工作时，您很有可能会使用产品开发方法，因此请确保您熟悉它们的工作方式

前端 (Front-end)

A front-end developer can typically perform the following tasks:

前端开发人员通常可以执行以下任务：

Implement a design using HTML/CSS使用HTML / CSS实施设计 Interact with the DOM using JavaScript使用JavaScript与DOM交互 Interact with an API using FETCH API or similar使用FETCH API或类似方法与API交互

Let’s dive into this in a bit more detail.

让我们更详细地介绍一下。

HTML / CSS (HTML/CSS)

This is the bread and butter of front-end development. HTML is used to position and place elements on a web page, while CSS is used tostylethose elements.

这是前端开发的基础。 HTML用于在网页上放置和放置元素，而CSS用于样式化这些元素。

A junior front-end web developer will be expected to know this stuff really well. It is important to know:

初级的Web开发人员应该非常了解这些知识。重要的是要知道：

Using HTML to create a webpage使用HTML创建网页 Styling elements using CSS使用CSS样式元素 Different ways to apply CSS to HTML — inline styles, style sheets, etc.将CSS应用于HTML的不同方法-内联样式，样式表等。

Once you have the basics nailed down, have a look at more advanced features:

掌握基本知识后，请查看更高级的功能：

CSS Grid & Flexbox for layouts and easier positioning of elementsCSS Grid＆Flexbox用于布局和元素的轻松定位 SCSS for making normal CSS more manageable through using variablesSCSS通过使用变量使普通CSS更易于管理

Check out css- for a comprehensive guide on CSS. This is one of the best resources out there.

请查看css- ，以获取有关CSS的全面指南。这是那里最好的资源之一。

BONUS TIP - Create a few projects in CSS/HTML to practice. Don’t worry about using JavaScript or API’s just yet, focuspurelyon the CSS/HTML elements.
奖励提示-使用CSS / HTML创建一些项目进行练习。做关于使用JavaScript或API的，只是还没有，纯粹专注于CSS / HTML元素并不担心。

We’re turning into CSS/HTML experts now! ?

我们现在正在成为CSS / HTML专家！？

构架 (Frameworks)

The next stage is to get familiar with CSS frameworks. These are basically “out of the box” elements and styles that you can use within your projects. Most companies use these as it saves their developers time as they don’t have to reinvent the wheel. There are a plethora of frameworks, but I suggest you pick one and get familiar with it. They are typically all quite similar and once you are familiar with one, its easy to pick up the rest.

下一步是熟悉CSS框架。这些基本上是您可以在项目中使用的“即用型”元素和样式。大多数公司都使用这些工具，因为它们不必重新发明轮子，从而节省了开发人员时间。有很多框架，但是我建议您选择一个框架并熟悉它。它们通常都是非常相似的，一旦您熟悉了它们，剩下的就很容易了。

引导程序 (Bootstrap)

My personal suggestion is to learnBootstrap(). It’s highly popular and used by a lot of companies.

我个人的建议是学习Bootstrap( )。它非常受欢迎，并被许多公司使用。

“Wait, why did I have to learn CSS/HTML from scratch if I can just use a framework?!”

“等等，如果我只能使用框架，为什么还要从头开始学习CSS / HTML ？！”

Good question. Yes, there are frameworks, and while a lot of companies use them, you’ll often have to customise things from time to time based on the project. For this, you’ll need to know the basics.

好问题。是的，有框架，尽管许多公司都在使用它们，但是您常常不得不根据项目不时自定义内容。为此，您需要了解基本知识。

响应式设计 (Responsive Designs)

These days it’s important to take the many mobile devices into consideration when creating front-end designs. Fortunately for us, the CSS frameworks we have talked about so far (Bootstrap, CSS Grid, Flexbox etc) makes creating responsive designs really easy.

如今，在创建前端设计时考虑许多移动设备非常重要。对我们来说幸运的是，到目前为止，我们已经讨论过CSS框架(Bootstrap，CSS Grid，Flexbox等)使创建响应式设计变得非常容易。

Media Queries.As well as knowing how to use CSS to create responsive designs, you will need to understand how to usemedia queriesto define how elements should look for different screen sizes.

媒体查询。除了了解如何使用CSS创建响应式设计之外，您还需要了解如何使用媒体查询来定义元素在不同屏幕尺寸下的外观。

Avoid using pixels for sizes.I would suggest usingremunits over pixels. An image with a width of 100px, will always have a width of 100px regardless of the screen size. Try to use units such asrem,vh, andvw, to achieve responsive designs.

避免使用像素作为尺寸。我建议在像素上使用rem单位。无论屏幕大小如何，宽度为100px的图像将始终具有100px的宽度。尝试使用诸如rem，vh和vw之类的单元来实现响应式设计。

BONUS TIP- Often you need to develop an app that uses both mobile and larger screens. Focus on mobile first when creating designs, and add the media queries for the larger screens after.
奖金提示-通常，您需要开发同时使用移动屏幕和大屏幕的应用。创建设计时，首先关注移动设备，然后在较大的屏幕上添加媒体查询。

JavaScript (JavaScript)

JavaScript is the programming language of the web. If you want to be a successful front-end developer, you need to know JavaScript. And really know it. Yes there are frameworks, but just like we learned the basics of HTML and CSS before getting into the frameworks, we’ll do the same here. This will make you a better developer in the long run. As frameworks come and go, the core elements of the language will remain the same.

JavaScript是网络的编程语言。如果您想成为一名成功的前端开发人员，则需要了解JavaScript。真的知道。是的，这里有框架，但是就像我们在进入框架之前学习HTML和CSS的基础一样，我们将在这里做同样的事情。从长远来看，这将使您成为更好的开发人员。随着框架的发展，语言的核心要素将保持不变。

At the very minimal, as a junior developer you will need to to know:

作为初级开发人员，至少需要知道以下几点：

Objects, functions, conditionals, loops and operators对象，函数，条件，循环和运算符 Modules模组 Arrays (including how to manipulate them)数组(包括如何操作它们) Retrieving data from an API using FETCH API使用FETCH API从API检索数据 Manipulating the DOM and using Events操作DOM并使用事件 Async/Await (More an optional advanced topic, but really impressive if you know it)异步/等待(更多可选的高级主题，但如果您知道的话，确实会给人留下深刻的印象) JSONJSON格式 ES6+ES6 + Testing (Jest, Enzyme, Chai, etc.)测试(笑话，酶，柴等)

A junior developer isn’t expected to knoweverythingon these topics, but the more you know, better. Once you can create abasic web app without tutorials,you can be sure that you know JavaScript.

预计不会初级开发人员知道这些话题的一切，但知道得越多，效果更好。一旦可以创建不带教程的基本Web应用程序，就可以确保您了解JavaScript。

If you really want to become an expert in JavaScript, fully understand the language and standout from the crowd, some great resources to learn the more advanced JavaScript topics are:

如果您真的想成为JavaScript的专家，要全面了解该语言并在人群中脱颖而出，则可以使用一些有用的资源来学习更高级JavaScript主题：

/getify/You-Dont-Know-JS

Not only do these resources teach you JavaScript, but you’ll also learn a lot about programming concepts in general. Seriously, if you learn the resources in the resources above, you’ll be a really kick-ass junior developer - some seniors I’ve meant don’t know this stuff!

这些资源不仅会教您JavaScript，而且您还将从总体上学到很多编程概念。认真地讲，如果您在上面的资源中学习了资源，那么您将是一名真正的傻瓜初级开发人员-我指的某些前辈不知道这方面的知识！

Some project ideas:

一些项目构想：

Create a Super Mario game (you’ll learn JavaScript, manipulating the DOM, and using events)创建一个超级马里奥游戏(您将学习JavaScript，操作DOM和使用事件) Create a dashboard showing some stats which are pulled from an API. e.g, a Twitter dashboard, a GitHub dashboard or anything you like (you’ll learn to work with APIs and JSON)创建一个仪表板，显示一些从API中提取的统计信息。例如，Twitter仪表板，GitHub仪表板或任何您喜欢的东西(您将学习如何使用API和JSON) Don’t worry about how things look here. Focus on learning JavaScript, not the CSS/HTML. You can always make it look nice later if you want!不用担心这里的情况。专注于学习JavaScript，而不是CSS / HTML。如果需要，您以后总是可以使它看起来不错！

JS框架 (JS Frameworks)

There are many JS frameworks, pick one and learn it well. The popular ones at the moment areAngular.js,React.js, andVue.js. These are all solid choices and aren’t going anywhere soon. Personally, I recommend React.js, but you can try others and see which you prefer.

有很多JS框架，选择其中一个并学得很好。目前最受欢迎的是Angular.js，React.js和Vue.js。这些都是可靠的选择，并且不会很快到来。就个人而言，我建议使用React.js，但您可以尝试其他工具并查看您更喜欢哪个。

Quick note — If you’ve learned the basics of JavaScript and have a solid foundation, learning frameworks should be a piece of cake! Regardless of what framework you choose, make sure to know it well.

快速说明—如果您已经学习了JavaScript的基础知识并且具有扎实的基础，那么学习框架应该是小菜一碟！不管您选择哪种框架，都请务必了解它。

You do not need to know them all,it looks more impressive if you know one framework REALLY well, as opposed to having minor knowledge of multiple different frameworks.

您不需要全部了解它们，如果您真的非常了解一个框架，而不是对多个不同框架有很少的了解，那么看起来会更令人印象深刻。

React (React)

It has huge backing fromFacebook, massive online community and is the most popular in the industry at the minute.

它得到了Facebook和庞大的在线社区的大力支持，并且在当前行业中最受欢迎。

If you followed the steps above and learned a bit of JavaScript, then picking up a React shouldn’t be too difficult. As a junior developer, you want to make sure you have a handle on the core concepts of React:

如果您按照上述步骤学习了一些JavaScript，那么选择React并不是一件容易的事。作为初级开发人员，您需要确保对React的核心概念有所了解：

Understand that React is based around components, and how components work了解React是基于组件以及组件如何工作的 Using State & Props within your components在组件中使用状态和道具 JSX and how to use it to render HTML elements on a webpageJSX以及如何使用它来呈现网页上HTML元素 How and when components re-render如何以及何时重新渲染组件 Using React hooks使用React钩子 NPM, Webpack and BabelNPM，Webpack和Babel

BONUS TIP— Again, as a junior developer you won’t be expected to know React inside out. So to practice the skills outlined above, try creating a few projects:
奖金提示—同样，作为一个初级开发人员，您将不会完全了解React。因此，要练习上述技能，请尝试创建一些项目：

Rebuild some of your previous JavaScript projects to use React重建一些以前JavaScript项目以使用React

Create acalculator app(A good one to practice state management, as a lot of user actions will need to update state. Hint: Try using React Hooks)

创建一个计算器应用程序(一个练习状态管理的好应用程序，因为许多用户操作都需要更新状态。提示：尝试使用React Hooks)

Create your own,Twitter,GitHub, orNews feed. Use the public API’s to get the data, and display this within your app.

创建自己的Twitter，GitHub或News feed。使用公共API获取数据，并将其显示在您的应用程序中。

Again, don’t worry about making your app perfect, or making it look super sexy. Focus on making it work, and focus on learning the React concepts.同样，不必担心使您的应用程序完美，或使其看起来超级性感。专注于使其工作，并专注于学习React概念。

状态管理(例如Redux) (State Management (e.g Redux))

Once you have the core concepts of React nailed down, the next step is to understandRedux. Redux is basically a state management framework, that heavily compliments React. Think of it as a front-end database that holds the state of your web application in one, easy to manage place.

一旦确定了React的核心概念，下一步就是了解Redux。 Redux基本上是一个状态管理框架，对React非常赞扬。可以将它视为将Web应用程序状态保存在一个易于管理的位置的前端数据库。

There are a-lot of moving parts to Redux, so don’t worry if you feel overwhelmed (I’m still learning the in’s and out!). You will only need to know Redux when working with large enterprise scale web apps. Focus on understanding the fundamentals and state management using React.

Redux有很多移动部件，所以如果您感到不知所措，请不要担心(我仍在学习内幕！)。使用大型企业级Web应用程序时，您只需要了解Redux。专注于了解使用React的基础知识和状态管理。

There are a number of tools available to help you with debugging React/Redux (part of the reason why I love it)

有很多工具可以帮助您调试React / Redux(我喜欢它的部分原因)

React Dev Tools

React开发工具

Redux Dev Tools

Redux开发工具

网页浏览器 (Web Browsers)

As a front-end developer, it’s important to know your way around web browsers. Chrome, Firefox and Edge are the main ones. You’ll need to have a basic idea around:

作为前端开发人员，了解您使用Web浏览器的方式非常重要。 Chrome，Firefox和Edge是主要的浏览器。您需要具有以下基本概念：

Debugging tools (e.g Chrome Developer Tools)调试工具(例如Chrome开发者工具) Working with the storage methods (local storage, session storage, cookies)使用存储方法(本地存储，会话存储，cookie)

Browser features — the biggest pain of web development is developing with browser support in mind. Keep an eye onwhatwebcando.todayto make sure your code supports the necessary browsers.

浏览器功能-Web开发的最大难题是在考虑浏览器支持的情况下进行开发。立即关注whatwebcando.today，以确保您的代码支持必要的浏览器。

部署与托管 (Deployment & Hosting)

A front-end developer should know how to deploy and host a web app. This is good for your portfolios, knowledge, and generally getting a job. I recommend using a managed service (i.e, let someone else do the heavy lifting for you) such as

前端开发人员应该知道如何部署和托管Web应用程序。这对您的投资组合，知识和一般的工作都有好处。我建议使用托管服务(例如，让其他人为您完成繁重的工作)，例如

GitHub PagesGitHub页面 Heruko赫鲁科 NetlifyNetlify Digital Ocean数字海洋 AWSAWS Firebase火力基地

Personally I recommendNetlifyorHeroku. It makes it super easy to deploy and host apps through the UI. Each of these services provides a free tier, so it shouldn’t cost you much to run. The downside to these services is that they don’t give you thefiner accessthat some developers would need, such as email services, SSH or FTP. If you don’t know what these are, you probably don’t need them so the simple service will do just fine.

我个人建议使用Netlify或Heroku。它使通过UI部署和托管应用程序变得超级容易。这些服务中的每一个都提供一个免费的层，因此运行它不会花费太多。这些服务的缺点是，它们无法为您提供某些开发人员所需的更好的访问权限，例如电子邮件服务，SSH或FTP。如果您不知道这些是什么，则可能不需要它们，因此简单的服务就可以了。

If you decide to go super-fancy and host some of your projects on a custom domain (like<yourname&gt;.com), I recommend NameCheap for domain names. Again, really easy to use and the domains are, well, cheap. ?

如果您决定精打细算并在自定义域(例如<yourname&gt; .com)上托管一些项目，我建议为域名使用NameCheap。再说一次，真的很容易使用，域名很便宜。？

后端 (Back-end)

In a nutshell, this is where the data from the front-end is saved. For example, when a user creates a Tweet, this goes through the server, and is saved in the database.

简而言之，这是保存前端数据的位置。例如，当用户创建推文时，它会通过服务器，并保存在数据库中。

A back-end developer can typically perform the following tasks:

后端开发人员通常可以执行以下任务：

Create API’s that the front-end will use (typically by returning JSON)创建前端将使用的API(通常通过返回JSON) Write the business logic and validation logic编写业务逻辑和验证逻辑 Integrations with 3rd party APIs与第三方API的集成 Save and read data from a database保存和读取数据库中的数据

编程语言 (Programming Languages)

There are many programming languages you can choose from. Like millions of them. But don’t worry, the main ones are:

您可以选择多种编程语言。像数以百万计的人一样。但是不用担心，主要的是：

JavaJava C#C＃ PythonPython Node.js (Not technically a language, more a runtime that let’s you run JavaScript on the server)Node.js(从技术上讲不是一种语言，更多的是让您在服务器上运行JavaScript的运行时) Go走 PHP (only if you’re interested in WordPress development)PHP(仅当您对WordPress开发感兴趣时)

Again, my advice is to pick one and learn it well. I suggest usingNode.js, as you are already in the mindset of learning JavaScript. Node.js makes it really easy to create REST API’s, which is one of the main tasks a junior developer will be expected to do.

再次，我的建议是选择一个并学习得很好。我建议使用Node.js，因为您已经在学习JavaScript。 Node.js使得创建REST API变得非常容易，这是初级开发人员将要完成的主要任务之一。

Whichever language you choose, make sure you know the following;

无论选择哪种语言，请确保您了解以下内容；

Creating API’s创建API Language basics (creating functions, using conditionals, operators, variables, etc)语言基础(创建函数，使用条件，运算符，变量等) How to connect to a database如何连接到数据库 How to query a database如何查询数据库 Package management包装管理 Writing tests编写测试

If you decided to learn Node.js, a lot of this will be familiar to you.Do not try and learn them all!As a junior developer, you will not need to. Choose the language that best fits your goals (if it’s web development, any of them will do) and focus on it and learn it well. Of course, if you’re curious about other languages (Node.js and Python are quite different) then feel free to satisfy your curiosity and play around with them.

如果您决定学习Node.js，那么您会很熟悉其中的很多内容。不要尝试全部学习！作为初级开发人员，您不需要。选择最适合您目标的语言(如果是Web开发，任何人都可以)，并专注于它并学习得很好。当然，如果您对其他语言(Node.js和Python完全不同)感到好奇，请随时满足您的好奇心并尝试使用它们。

REST API和JSON (REST API & JSON)

Creating a good REST API is one of the main jobs for a back-end developer. You will need to know:

创建良好的REST API是后端开发人员的主要工作之一。您将需要知道：

The different verbs and what they are used for不同的动词及其用途 How to create a good response如何建立良好的回应 How to handle requests如何处理要求 Authenticating requests验证请求 How to document your API如何记录您的API

REST API’sare the bridge between back-end and front-end development, so make sure you understand how they work.

REST API是后端和前端开发之间的桥梁，因此请确保您了解它们的工作方式。

JSONis the main language used to transfer data over a REST API. Data is represented asObjects and Arrays.Again, if you’ve learned JavaScript or front-end development using the steps outlined about, this will look familiar to you.

JSON是用于通过REST API传输数据的主要语言。数据表示为对象和数组。同样，如果您已使用概述的步骤学习了JavaScript或前端开发，那么您会觉得这很熟悉。

数据库和DevOps (Databases & DevOps)

This is pretty much the infrastructure side of web development. I wouldn’t say that heavy knowledge of this stuff is a requirement for a junior developer. I’d almost suggest the opposite, and say you only really need to know this stuff in depth if you are looking to get into the field of DevOps. The broad area’s you need to know are:

这几乎就是Web开发的基础架构方面。我不会说，对于初级开发人员来说，必须具备丰富的知识。我几乎会提出相反的建议，并说如果您想进入DevOps领域，您只需要真正了解这些内容即可。您需要知道的广泛领域是：

How to manage a database如何管理数据库 The different platforms for hosting (AWS, Azure, Google etc)不同的托管平台(AWS，Azure，Google等) CICD and tools such as Jenkins, GitLab etcCICD和诸如Jenkins，GitLab等工具 Logging and monitoring记录和监控

Depending on your team or company, there may be other teams or people to manage this. It is still an interesting and impressive set of skills to have, so if you are curious and have some spare time, learning some database and DevOp’s skills will go a long way.

根据您的团队或公司，可能会有其他团队或人来管理。它仍然是一组有趣且令人印象深刻的技能，因此，如果您好奇并有一些业余时间，那么学习一些数据库和DevOp的技能将有很长的路要走。

进阶主题 (Advanced Topics)

Below are some advanced topics I recommend once you have mastered the above. There is plenty to learn already, so I won’t go into much detail here, but feel free to skip/skim this section for now and come back later.

掌握以上内容后，我建议您使用以下一些高级主题。已经有很多东西需要学习，所以我在这里不会详细介绍，但是现在可以跳过/略过本节，稍后再回来。

使用JWT / OAuth进行身份验证 (Authentication using JWT/OAuth)

This is a common approach in industry that authenticates and authorises users (e.g. login).

这是行业中对用户进行身份验证和授权(例如登录)的常用方法。

More info at: /2/

有关更多信息，请访问： https : ///2/

设计模式 (Design Patterns)

Design patterns arecommon solutions to common problems. Learning design patterns will make it easier to solve problems and inevitably a better developer.

设计模式是常见问题的通用解决方案。学习设计模式将使解决问题变得更加容易，并且不可避免地会成为更好的开发人员。

More info (Java example): /iluwatar/java-design-patterns

更多信息(Java示例)： /iluwatar/java-design-patterns

More info(JavaScript): /fbeline/Design-Patterns-JS

更多信息(JavaScript)： /fbeline/Design-Patterns-JS

BONUS TIP— There are many design patterns, so don’t try and learn them all at once. Instead,get familiar with them, and when you encounter a problem as part of a project, see what design patterns are available for you to use.
奖励提示—设计模式很多，因此不要尝试一次学习所有模式。相反，请熟悉它们，并且在项目中遇到问题时，请查看可使用的设计模式。

渐进式Web应用程序和移动开发 (Progressive Web App’s and Mobile development)

Progressive web appsare essentially web apps that run like native apps on a users phone. Pretty cool right? Check them out if you have times.

渐进式Web应用程序本质上是像用户手机上的本机应用程序一样运行的Web应用程序。很酷吧？如果有时间，请检查一下。

More info at: /web/progressive-web-apps/

有关更多信息，请访问： /web/progressive-web-apps/

Other options include:

其他选项包括：

React Native— lets you write React code that gets compiled to Android/IOS

React Native-让您编写被编译为Android / IOS的React代码

Flutter— similar to React Native, only uses the Dart programming language

Flutter-与React Native类似，仅使用Dart编程语言

This is rendering front-end code on the server side, which is they returned and displayed to the browser. An advanced topic, that has its own merits such as SEO & speed benefits.

这是在服务器端渲染前端代码，它们被返回并显示在浏览器中。一个高级主题，有其自身的优点，例如SEO和速度优势。

More info at: /demystifying-reacts-server-side-render-de335d408fe4

有关更多信息，请访问： /demystifying-reacts-server-side-render-de335d408fe4