Preview
Video Player
00:00
00:00
A JavaScript Developer's Workflow
4:25In this video, we'll talk about common JavaScript development workflows, as well as frameworks, libraries and other tools developers use in their day-to-day work.
Writing a web app or building a web site
with JavaScript can be a lot of fun,
0:00
especially when everything is working.
0:03
In the previous video, you learned
about some of the tools JavaScript
0:06
developers use in their projects.
0:09
In this video, we'll talk about common
JavaScript development workflows,
0:11
as well as other tools developers
use in their day-to-day work.
0:14
Working on a simple site or
0:18
app may not require a build tool or
any extra dependencies.
0:19
For example, at Treehouse, you begin
by building projects using standard
0:23
JavaScript written in
a single JavaScript file.
0:27
For these types of projects,
many developers use a code and
0:30
reload approach to development.
0:34
Meaning, they write a small part of
their program, save their code, and
0:36
manually reload the browser to view and
test their changes.
0:40
They also inspect the browser
console to check for errors.
0:44
And they repeat this update-refresh
process until the project is complete.
0:47
During this process,
you're not relying on any external tools.
0:52
You get immediate feedback from
the browser without having to wait for
0:56
a compiler or build tool to process,
bundle, and serve code to the browser.
0:59
For larger more advanced applications
with complex user interfaces and
1:03
features, you'll likely set up a build
system to automate your workflow, and
1:07
install a JavaScript library or
framework to help increase efficiency and
1:11
build your projects faster.
1:15
There are lots of different frameworks and
libraries to choose from.
1:17
For example React,
1:21
developed by Facebook, is one of
the most popular JavaScript libraries.
1:22
It offers a way to easily break the user
interface of an application into
1:26
manageable, reusable chunks.
1:29
And Vue is another common framework that
shares many similarities with React.
1:31
Now Angular, maintained by Google, is
a complete JavaScript framework that has
1:35
more built-in functionality than
most JavaScript frameworks and
1:40
libraries out there.
1:43
You can learn a whole lot more
about JavaScript frameworks and
1:44
libraries by checking out the links posted
in the teacher's notes with this video.
1:46
Many of the top frameworks and
1:50
libraries provide a tool called a CLI,
or command-line interface,
1:52
that makes it easier to create an
application without configuring any tools.
1:56
They already come with a build
system that includes the tools
2:01
you need to get started
working on your project.
2:04
For example, module bundlers like webpack
and Rollup, package managers like npm and
2:06
Yarn, and
the Babel compiler are preconfigured.
2:11
So you just create a new project
using their CLI tool and off you go.
2:14
Perfect code rarely happens the first,
second, or even third time.
2:18
So another important step in a JavaScript
developer's workflow is detecting and
2:22
debugging errors.
2:26
When things go wrong with your code,
and there will be lots of things,
2:28
you need to be able to find bugs quickly.
2:31
There are browser-based tools which
developers rely on to find and
2:33
debug JavaScript errors.
2:37
Chrome DevTools, for instance, provides
tools to help you quickly find and
2:39
fix problems in your JavaScript.
2:43
Frameworks and
libraries take things a step further
2:45
by providing helpful runtime errors and
warning messages in the console,
2:48
as well as in the browser,
to help you focus on one error at a time.
2:51
And build tools also help developers run
automated tests to avoid introducing
2:56
bugs in their apps and make sure that
everything is working as expected.
3:01
Most popular JavaScript frameworks and
3:05
libraries even set up JavaScript
testing tools for you.
3:07
Finally, the Terminal or
3:11
command line plays a major role in
a JavaScript developer's workflow.
3:12
The Terminal or
3:16
command line gives you control over
the functionality of a computer.
3:17
It's what developers use to install and
run all the different packages, libraries,
3:21
and build tools for their projects
more quickly and efficiently.
3:25
The command line also helps developers
create a final production-ready
3:28
version of their project called a build.
3:32
And in many cases, deploy or
push the project live to a server.
3:34
This was a small glimpse into
the JavaScript development landscape.
3:39
And there's a lot more ground
to cover on the subject.
3:42
But I hope that you now feel
more confident about taking on
3:45
JavaScript development.
3:48
If this felt like a lot of information to
take in, don't worry, you don't have to
3:50
remember how all the tools and
features in JavaScript development work.
3:54
In fact, most developers don't know or
remember everything either and often
3:58
turn to Google or other resources to learn
or remember how some of these tools work.
4:02
As you build more and more projects,
tools will become less intimidating and
4:07
you'll come up with a workflow
that works best for you.
4:11
And remember, we're always here to help so
4:14
if you have questions about
anything covered in this course,
4:16
feel free to reach out to the Treehouse
staff or other students in the community.
4:19
Thanks, everyone, and happy JavaScripting.
4:23