Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed The Landscape of JavaScript!
You have completed The Landscape of JavaScript!
Preview
In 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.
JavaScript libraries and frameworks
CLIs
Debugging JavaScript
- Get Started with Debugging JavaScript in Chrome DevTools
- Debugging JavaScript in the Browser - Treehouse course
Terminal/command line
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up