- Introduction - You Know JavaScript, what else?
- Javascript, HTML and CSS - The Web Presentation Engine
- Frameworks - Jquery/React/Vue/Angular
- Package Management - NPM/Yarn
- Debugging - Chrome/Firefox debugger
- Testing - Unit/Integration - Jest/Mocha
- Version Control - Git
- Deployment - CI/CD
- Documentation - Define your expectations
- Product - What to build
Introduction
You know JavaScript, what else is there?
The Javascript language has come a long way and the pace of new features only
seems to be increasing. We have a lot of new tooling to help us build,
including some great frameworks.
But even if you know everything about Javascript, what else do you need to know?
JavaScript, HTML and CSS
The Web Presentation Engine
JavaScript is the programming language for the web pages, but it also runs other places, like servers.
JavaScript runs when viewing a web page.
JavaScript can read with the contents of the page.
JavaScript can listen for events on the page.
JavaScript can change the contents of the page.
Since JavaScript interacts with the contents of the web page, interactions with the user are performed by manipulating the content of the page.
This means that a solid knowledge of HTML and CSS is crucial to excel when creating complex JavaScript based web applications.
Frameworks
jQuery, Angular, React, Vue, ...
Manually manipulating the HTML content is one way to update the content of the page, with tooling built to assist with this (such as Jquery) for many years being the industry standard.
In recent years, frameworks have been adapting to keep pace with the complexity of modern JavaScript applications with the implementation of more formal software design patterns, such as structured view and data models.
AngularJS introduced MVC (Model, View, Controller) design pattern, allowing programmers to define data models (the shape of data), template views based on the HTML and controllers to perform actions and update the data and view.
React was designed to simplify updating the web page's HTML by manipulating a shadow dom, a copy of what is rendered in HTML so changes can be applied quickly to this copy, from which a changeset can be compiled to reduce the amount of expensive changes which need to bring the HTML content up to date with the new data.
React also introduced the JSX syntax, to write XML-like syntax, which React then compiles to JavaScript.
Vue provides an MVVM (Model, View, Viewmodel) architecture, with HTML templating and virtual dom diffing.
Package Management
In an open-source world
Package management a system of tools that automates the process of installing, upgrading, configuring, and removing packages, or pieces of code from a system.
Package management means having the ability to share the work you have build with others.
Package management also means being able to use software written by others to build faster by focussing on solving the unique problems at hand. Who wants to write another router?
The key package manager for JavaScript is NPM.
By initializing a project with npm init, installing and maintaining dependencies can be handled with relative ease.
E.g. npm i react
With an account on NPM packages can also be contributed either as public, for sharing with everyone, or private, allowing only access to a group of accounts, such as within an organisation.
Debugging
The art of making it work
The joy of debugging software depends heavily on the tools available.
Most are familiar with console.log, but this isn't available in early versions of Internet Explorer. Debugging javascript application used to rely solely on decrypting mystic error messages and a judicious application of alert("help").
There are a number of other debugging tools which can assist, such as the debugger keyword, which will pause execution and allow inspection of the application state, similar to setting breakpoints in the developer tools. Once execution has been paused, the code can be stepped through one statement at a time to examine the changes in variables at each stage.
Testing
Making sure you know if it doesn't work
Testing is how you know something works.
You can manually test something in a browser, and know it works for now, on your computer.
But writing means you know it will continue to work (until the test fails).
Javascript unit testing for small things, functions or units of code.
Integration testing, "automated browser testing", tests a whole application's stack, from DNS to server to rendering to application code.
Version Control
git good
Version Control is crucial in software development.
New features can be built in branches, when development is complete, the
changes in the branch, a Pull Request can be created and reviewed to merge
the changes into the master, or primary branch.
A project would be initalised with git init, or an existing repository downloaded with git clone ....
Branches are created as a copy of the current working branch with git checkout -b newBranchName
Create some changes, add or remove files and then select the files to add to the git project with git add .
Commit your changes to your branch locally with git commit -m "Changing files".
The changes now exist locally in your branch, to push them back to the project (on your branch), you will need to git push -u origin newBranchName.
After this, the new branch will be created in GitHub and a Pull Request can be created to request the changes be reviewed and merged into the primary branch.
Deployment
Push to production on a Friday afternoon?
Deployment is how you get your code into production.
In the past, it might be FTPing a .zip file to a server, unzipping the file and moving it into place. Or FTPing the modified files directly.
CI/CD is how you don't worry about pushing to production on Friday at 4pm.
A CI/CD pipeline is integrated with the version control repository and will be launched automatically when new changes are added to the repository.
Your pipeline can be triggered by the pull-requests and build a new version of the program with those changes in a staging environment to run all of the tests and other checks, reporting any failures. If everything passes without issue, the pipeline can also release the updates to the production environment.
Documentation
Define your assumptions
Now that you've written the code, it is important to document how it works.
The documentation should primarily cover the expectations and assumptions you've made about the code.
If for no other reason than to help you understand it when it doesn't behave as you expect it to in six months time.
Small comments through a code base can assist when reading and debugging the code, but comprehensive documentation should provide details of the top level interfaces for the application.
Product
What to write
Agile, waterfall or something in between, you undoubtedly have tickets.
Tickets are created by breaking down Projects. Generally you break down the work until you can complete a piece in less than a day.
Projects are taken from the Roadmap, taking groups of similar high priority work and bundling into a comprehensible scope of work.
A Roadmap explores the pressures and needs of the product to the greatest effect in terms of business value.
Did I miss something? Let me know!
Sure, there's a whole other side when you want to look at what happens on the backend, but this is aimed at primarily front-end development.
Top comments (2)
That's a great article Philip!
Since it targets beginners, I would maybe add Wikipedia links for people who are not familiar with those concepts.
Ex:
AngularJS introduced MVC - Model, View, Controller design pattern, allowing programmers to define data models (the shape of data),
Great idea, thanks. I’ll update the article with some links.