This is not your typical crash course, this is a Bootcamp.
What does that mean?
-
You will give your best
-
We will give our best
-
We will all have a good time
But most important, there will be A LOT of humor, because a happy developer (student, pupil, padawan, you get the point...) is a great and hard working developer.
That said...
Please, use this repository as a base for all your work. The idea is to fork this project so everyone uses the same folder structure for the exercises.
- 10.1 Week 1: HTML, CSS and Javascript
- 10.2 Week 2: Diving into JavaScript and Node 101
- 10.3 Week 3: TypeScript and Angular 101
- 10.4 Week 4: Angular 201
We will teach you the basics of Web development using JavaScript and Single Page Applications with Angular.
→ index
The materials will start at a low level and does not require in depth knowledge of the platform in question. Desirable participant profile: trainees and outside Globant candidates. A basic knowledge on OOP is desired, though.
→ index
Four weeks total. (20 days)
→ index
You can contact other Bootcamp participants or any available tutor if you need technical assistance. Communications will take place over Slack on our own Bootcamp Workspace
→ index
-
Code review after each practice.
-
Checkpoint completion after Learning stage with your assigned tutor.
-
Final Application after Bootcamp.
→ index
Developers that move faster than average can go ahead and complete as much exercises as wanted.
→ index
-
You will need to install Node.JS (Version 6) (NVM is strongly recommended - Unix/Windows)
-
The recommended IDE is Visual Studio Code. However, you can use any IDE of your preference.
-
Gmail Account + headset (For hangout calls)
-
Create your own GitHub account. Follow this guideline to setup your account. Also you can read further about Git in Try Git or Learn Git Branching
-
Fork this repo to use as a base to host the project code.
→ index
The Bootcamp is organized in the following way:
The first week is oriented to learn the basics around HTML and CSS and JavaScript. You will be doing some exercises along your reading
The second week dives deep into JavaScript and some Node.js mumbo jumbo.
Again, you will have homework to do for the week.
The third week introduces you to TypeScript and Angular. JavaScript is an easy typed language,
that means
as a developer you have total control over the whole structure of the code. Sometimes that's an advantage, but as the app grows and more people become involved things go out of hand.
That's when TypeScript comes to the rescue. At the end of this week you will make the famous Tour of Heroes app.
The last week will be focused on starting an app and learning some shiny cool stuff. You need to present your work at the end of the week, however you can keep working on it (more on that later).
You will encounter some pages with extra excercises on them. You have the power to choose if you want to do them or not. Just remember, if you do, put them on the extra folder
→ index
-
Team play is encouraged but the work will be evaluated per person.
-
The instructions will be vague as they generally are in real life projects. You must look for support and guidance from your PM, teammates and tutors.
-
All code and documentation must be in English.
-
HTMLsyntax must adhere to Globant's HTML Style Guide. -
CSScode must adhere to Globant's CSS Style Guide -
Jscode must adhere to Globant's Js Style Guide. -
TsandAngularcode must adhere to Angular's Style Guide.
→ index
Each day you will grab the fundamentals of building blocks for usual
Js/Ts/Angular applications.
On each learning day you will have to:
-
Read: We will provide you with documentation related with current sprint content so you can have a background reference, guide and examples to complete the following practice.
-
Practice: You will implement the previously gathered knowledge in simple coding activities.
-
Commit: You will commit all your code on a daily basis, when you finish your practice. This will not apply for code of Week 3 and 4.
→ index
-
This repository contains inside the
srcdirectory the project structure for all exercises/challenges that you will need to do. -
All
.jscode can be opened directly on the browser. For Ts and Angular code you will need to run a Liteserver with the Angular CLI. Just runningng serveornpm run servewill be enough -
Once the server is running, all the modifications you make will be automagically synced and the app will reload.
-
READ THAT ⬆️ ⬆️ ⬆️
→ index
Now let's get down to business
So, what's day 0?
We as developers know that every structure starts at 0 (any other dev or language that says the contrary is WRONG) so this is the first thing you'll need to master before even trying to fight with the future topics.
Rumor has it that when the web was a little baby, at the early stages of web 1.0 all was static and SOOO ugly.
You may have encounter one of those exquisite pages:
YES pages looked like that (and that's a pretty one) - all old HTML and CSS
Fortunately people noticed that we needed new tools to create more dynamic and stylish experiences. Technologies have evolved and now we can make gorgeous experiences like this one. Regardless, the basics are still the same.
HTML describes the content semantics and structure of a web page. It was designed as a markup language, if you know XML (the ugly father), you could consider HTML as a subset of XML with a predefined semantic (and soooo much friendly).
On the other hand, CSS allows to define the look and feel of the content. It's used to set colors on HTML elements, customize sizes, define the layout of the document content, among others. (e.x. "The following list of elements must be shown as a menu", "The main title of the page should use this particular font", "make things pretty").
JavaScript is a programming language that runs in all Web Browsers. Using JavaScript we can create full-fledge web applications (and some magic).
- Some other Globbers made this
meme-lessawesome HTML & CSS 101.
So... I'm going to be honest with you, I'm lazy as any dev should and I'm not going to re-invent the weel work extra.
Your first days work is with our friends at HTML & CSS 101.
Just put all your work under day0
- Responsive Design
- Web Components
- Why use Web Components
- This is your new best friend, Flexbox. The best responsive-friendly CSS model.
→ index
Yes, I know I missed the other days, but c'mon. I'm giving you space to learn.
I'm sure you must be an HTML & CSS guru by now, right?
So, are you ready for your new challenge? Js
JavaScript is an event driven programming language that runs in all Web Browsers. Using JavaScript we can create full-fledge web applications.
That's quite a definition, buy our friends at Eloquent JavaScript make an even better work.
I hope you liked that book, because it's going to stick with us for the rest of this (and next) week.
- Js Values, Types, and Operators
- Js Program Structure
- Js Functions
- Js Data Structures: Objects and Arrays
I think you noticed by now, but there are a few exercises inside the reading material (awesome, I know). Do them, this is basic Js and we need you to have fun with it.
Just put all your work under day2-5 once you finished the exercises on page.
→ index
Js is often called an Object oriented language, but actually that isn't 100% true. In Js
we have what's called Prototipal Inheritance.
In this lesson you will learn all about the Prototype, Inheritance, Getters, Setters, Constructors and Polymorfism.
Look into src/week2/day1/index.html in there there's an Animal class with a talk method. Follow the instructions.
Since ES6 went out we do have a Class like sintax, HOWEVER that's Syntactic Sugar.
We still have that hideous beautiful Prototype under the hood, so don't get confused.
→ index
One of the most hated used features on any kind of language are Regular Expressions, aka RegEx. Those are REALLY powerfull strings (they are more like a really special kind of strings) that allow you to capture any pattern you want on any kind of string. You can make sure all emails accounts end up with @something.com or all the names are at most 4 characters long... you get the idea.
Also, you will be learning error handling and some of the finest debugging techniques out there. Or, as I like to call them, learn how to properly use your tools.
Read up and catch 'em all
- Regular Expressions
- An Introduction to Regular Expressions (Regex) In JavaScript
- Errors and debugging
Look into src/week2/day2 in there there're some index files, poke around and follow the instructions.
→ index
So, you have a text file called whatever.js, you have ~200 lines in there (or you should, codebases of ~ 1k lines are made by horrible people). You add it to an index.html file, double click that file, a browser opens and
The code comes to life. All works fine (at least if you coded right 😒) it's
No, no it's not. It's the browser's engine. Js runs inside a browser on a VM, that VM could be
V8 (Chrome), SpiderMonkey (Firefox), Chakra (Edge) or Nitro (Safari)
For day 3 you will learn about the Browser, the Document Object Model (basically the whole thing you are seeing on the browser's window) and DOM Events.
If you used jQuery, this is the time you realize that it's not so magic, it's Js, and you can do all the things jQuery does with vanilla Js. And in a few weeks you'll be refusing to use jQuery again 😝
The browser and the server (the little computer thingy that lives on the cloud and has all your files) communicates via HTTP. That's a protocol, something like a standarized way to send messages. You can read more about it here:
Users communicate with the application via forms, those are fill up sections which where designed on a time before Js where all interactions with the server where made while navigating to a new page. That kind of interaction is SO web 1.0 but, we still use forms.
-
Design patterns, the blueprints to a reliable application.
Look into src/week2/day3 in there there're some index files, poke around and follow the instructions.
→ index
So, at this point you pretty much are up to speed with Js. But Js does not only run on a
browser. YES you read me right, you can make a server, a robot, a game, you
can eve run it on an Arduino. The sky's the limit.
How is that even possible you ask? Well, Js community was aways HUGE, so it was more than expected that a person asked Why not?
That's how Node was born.
Node.js is a Js runtime that runs outside the browser on a V8 VM, there's a Node fork for almost everything.
First, to understand how node works, you need to learn one last thing about Js, Modules
Then you can go on with this
After that you can learn about the most popular NodeJS framework:
- What is npm?
- Installing npm packages locally
- Using a
package.json - Updating local packages
- Uninstalling local packages
- Installing npm packages globally
- Updating global packages
- Uninstalling global packages
- Semantic versioning and npm
- How npm works?
Look into src/week2/day4-5 in there there're some js files. Those 2 are Node.js apps, they don't work as you would expect from any other .js file.
You will need to use the command line:
luca.sartori@AR-IT12688:~/bootcamps/ui$
That's your Command Line Interface, know your CLI, love your CLI, BE your CLI. A developer is defined by it's tools, and you will want this one on your side.
You'll need to navigate to src/week1/day4-5
luca.sartori@AR-IT12688:~/bootcamps/ui$ cd src/week1/day4-5/
If you excecute a ls command you'll se the contents on the CLI
luca.sartori@AR-IT12688:~/bootcamps/ui/src/week1/day4-5/$ ls
expressDemo.js fsDemo.js node_modules package.json
Then, you have to run one of the files
luca.sartori@AR-IT12688:~/bootcamps/ui/src/week1/day4-5/$ node fsDemo.js
Remember, you'll need Node.js installed
That will run the code, just remember two things
- Server code, like the one from expressDemo keeps running, you have to exit it
- To exit a running process on the CLI, you need to press
CTRL+C
Notes:
Don't be afraid to Google stuff, no developer remembers everything
→ index
So, here we are. This is the first step into a whole new world. It doesn't matter if it's Angular, React, Vue or any Js framework. The latest generation of those tools makes the whole development process a breeze.
Welcome to the SPA world.
Here at Globant we are technology agnostic, every developer is welcomed to study anything he wants. However we do recommend from a maturity and scalabilty points of view Angular or React.
This Bootcamp will focus around Angular that does not mean that you should stop there, if you want to dig into React please do, it'll help you in the future.
Let's start with TypeScript, basically a superset of Js, with some advantages
- Types
var number: number = 1;
var word: string = "1";
return number === word;
// IS NOT THE SAME
number = word;
// CAN'T BE DONE, DIFFERENT TYPES
- Intellisense
- Generics - generic code for any type
class Greeter<T> {
greeting: T;
constructor(message: T) {
this.greeting = message;
}
greet() {
return this.greeting;
}
}
let greeter = new Greeter<string>("Hello, world");
let button = document.createElement('button');
button.textContent = "Say Hello";
button.onclick = function() {
alert(greeter.greet());
}
document.body.appendChild(button);
- Transpilation - write in Ts, get ES6, ES5, ES4, etc...
Taken from Ts Playground
Relax, you can always keep writing Js with TypeScript
And there's more and more... but that's for you to read:
→ index
Get ready, there's a lot where the previous day came from.
Notes:
There is no excercise section on these two days because as this is a superset of Js you already know how it works. Take them as free days so you can digest all that new info about Ts specific features.
All Ts code will be evaluated with Angular as that's the language it uses.
So yes, here we are, Angular. The ONE framework (as they say) you may know it for it's previous generation, the highly important and famous angular.js.
But as they say... water under the bridge.
Angular is a new framework, a new codebase and A LOT of new features. The team wanted so bad to emphasize the new part that the ditched the .js part of the name (commonly used on Js frameworks) and they adopted semver.
The current stable version is 5.0
The exercise for the week, is simple. We want you to be friends with Angular, so what's best than talking to each other?
You will do the Tour of Heroes App featured in the intro above. For that you'll have to follow the instructions on the page. However, as we want you to make the code, not copy/paste it there's a catch.
I've initialized the project for you, just run
luca.sartori@AR-IT12688:~/bootcamps/ui/week2$ npm install
Remember: ng serve starts the app on http://localhost:4200
You will need to make a commit after every step, each one with a difference of at least 20 minutes. That way we can at least try to believe that you typed the code
Keep in mind:
- The app must be under src/week2
- You will need to install Angular CLI
- You are expected to follow
Angular's code standards - Make a personal touch, you should be listed as a hero (cool powers only 😬)
→ index
Things are getting serious, are you ready to dive deep into Angular?
I'm not gonna lie to you, this is gonna hurt, my friend.
- Architechture
- Displaying Data
- Template Sintax
- Lifecycle Hooks
- Component Interactions
- Component Styles
- Attribute Directives
- Structural Directives
- Pipes
- User Input
- Forms
- Form Valitdation
- NgModule
- Router
- Http Client
- Testing
You are going to make a Scientific app.
Let's get our requirements together:
- The app should be responsive
- You should make the app modular. There should be several components
- Here are some mockups for the app. You'll have a main screen and a photo detail page
Home
Detail
- You'll have to use this API
- Here's an API key for you to use
aZlmHCp3jD9sanwE8KvytidYArlTvlhwr3fEhYyM - Here are some API call examples
https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?sol=1000&api_key=DEMO_KEY
https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?sol=1000&camera=fhaz&api_key=DEMO_KEY
https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?sol=1000&page=2&api_key=DEMO_KEY
- You have several cameras
- You can change the camera displaying in a row
- You can click on an image and it'll get you to it's detail page (is the same page as the 'photo of the day' but with a different title)
- You can add any feature you like
- The photo of the day should be a random picture from a random camera
Create a week4 folder, go inside and run:
luca.sartori@AR-IT12688:~/bootcamps/ui/week4$ ng start
Hey, don't panic. This excercise is for this week and on...
You have until the last day of this week to keep pushing changes. After that you can keep workin on the app, but please create a new branch for it:
luca.sartori@AR-IT12688:~/bootcamps/ui/week4$ git checkout -b 'post-bootcamp'
luca.sartori@AR-IT12688:~/bootcamps/ui/week4$ git push origin post-bootcamp
Your app should look something like this:
Home
Detail
Some advices
- Dont't get scared. Even the most successfull Software Engineers and Architects forget things sometimes.
- Google is your friend, independence and curiosity are great values that every developer needs to have.
- The only way to learn is to fail, so keep failing.
- Theory is nice, but you need to get your hands dirty if you want things to stick.
- Remember, a happy developer is a great developer (also, coffee is your best friend)
Kudos and keep failing learning!
→ index
So... you've got your Angular going, you read a LOT of stuff, you started a SPA. So... What's next?
There're still a lot of stuff to read, some of them really work better under specific conditions or requirements. Remember:
KEEP IT SIMPLE
If there's a more advanced or complicated way to get to a solution it doesn't always mean that's the better approach.
With that in mind, here are some more advanced (or not, this whole beatifull mess was made by a bored developer on a few days span) features that every one should know, and at least being able to explain them.
- Progressive Web Apps
- PWAs on Angular
- Hybrid Apps
- Hybrid Angular Apps - Ionic Framework
- Cross Compiled Apps
- Cross Compiled Apps with Angular - NativeScript
- Cross Compiled Apps with React - React Native
Hey, If you need a place to kill time try Medium, there's a lot to read about pretty much anything (specially development related topics). One of my favorites sections is Angular in depth.