#HTML5 Boot Camp

##The future of Web Applications is here! ###Are you ready for it?

####Index

1. Objective

2. Who Should Attend

3. Duration

4. Technical Assistance

5. Performance Measurement

6. Handling advanced Developers

7. Materials

8. General Guidelines

9. Proposed Test Applications

10. [Environment Setup]

11. Learning Days

    • Topic 0: HTML & CSS Basics

    • Topic 1: JavaScript, and DOM APIs

    • Topic 2: OOP and Inheritance in JavaScript

    • Topic 3: MVC - AngularJS

    • Topic 4: HTML5 APIs

    • Topic 5 (Optional): UI - ReactJS

12. Your First Project Starts Now!

###Objective

This course teaches the basics of modern Web UI development. We want to help you create the best of breed user experiences, gaming, and mobile applications.

→ index

###Who Should Attend

The training 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 HTML, CSS, and JavaScript is desired, though.

→ index

###Duration

Five weeks total.

Three weeks for guided learning and two weeks for app development.

→ index

###Technical Assistance

You can contact other bootcamp participants or any available tutor if you need technical assistance. We will create one chat for boot camp members only, and another one for boot camp members and tutors when boot camp starts.

###Performance Measurement

1. Code review after each practice and sprint

2. Checkpoint completion after Learning stage with your assigned tutor

→ index

###Handling Advanced Developers

Developers that move faster than average can go ahead and complete as much exercises as wanted.

→ index

###Tools

1. At least, three different browsers installed on the developer machine. Example, Chrome, Firefox, and the Android browser using Android's emulator.

2. The IDE to use is SublimeText.

3. Skype Account + headset (audio calls)

4. Create your own GitHub account. Follow this guideline to setup your account.

5. Install your own NodeJS server.

• Download NodeJS
• Install http-server globally, by running npm install -g http-server
• To start the server, from a command line interface, run http-server in the directory where you will clone the startup repo
• Open your web browser and point to localhost:PORT (the http-server should have outputted the number of PORT you should use)

6. Fork this repo https://github.com/globant-ui/startup to use as a base to host the project code.

→ index

###General Guidelines

The boot camp is organized in the following way:

1. The first three weeks will be used for intensive self learning. Each topic will have reading and practices parts. Tutors will be available to answer technical questions on a given chat room.

2. The next two weeks will be used to develop an application following a life process.

3. The project manager will coordinate learning days encouraging team communication in daily meetings.

4. The project manager will gather information regarding individual progress so we can look for alternative assistance where needed.

5. The project manager will lead the boot camp sprints as if it were a real project using SCRUM agile methodology.

6. Two boot camp chats will be created for feedback and technical assistance:

   1. Bootcamp HTML - ALL Every person participating in the bootcamp is present here (students, tutors and PMs). Here is the place to ask for technical assistance!

   2. Bootcamp HTML - Assistants Here you will reach just your boot camp fellows for asking question sharing knowledge.

7. Team play is encouraged but the work will be evaluated per person.

8. Sprint duration will be 1 week.

9. 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.

10. All code and documentation must be in English.

11. Code must adhere to Globant’s UI HTML, CSS and JavaScript coding guidelines.

→ index

###Proposed Test Applications

The test application will consist in a Last.fm client.

###Learning Days###

Each day you will grab the fundamentals of the key building blocks for the next generation mobile apps; yeah, web apps! Web apps powered by the latest, and coolest toolkits, and techniques.

On each learning day you will have to:

1. ####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.

2. ####Practice:#### You will implement the previously gathered knowledge in simple coding activities. Most important task numbers are listed in the "Key Points" section for each day and they should get most of your attention; if you feel you don’t have enough time to complete all tasks, start with these ones when possible.

3. ####Commit:#### You will commit all your code on a daily basis, when you finish your practice.

Introduction

At high level you could see the keys as:

HTML describes the content semantics and structure of a web page. It was designed as a markup language, if you know XML, you could consider HTML as a subset of XML with a predefined semantic.

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").

JavaScript is a programming language that runs in all Web Browsers. Using JavaScript we can create full-fledge web applications.

Now that you know which are the three pilars of a web application's UI, it's time to dive into them.

####Topic 0: HTML & CSS Basics

####Topic 1: JavaScript, and DOM APIs####

#####Reading:#####

1. Beginner: Eloquent JavaScript 2nd Edition basic tutorial (in case you need it!)

2. Beginner to advance: Speaking JavaScript: An In-Depth Guide for Programmers

3. Recommended: devdocs.io to check Web platform documentation around JavaScript, frameworks, Browser APIs, etc

#####Extra documentation:#####

• Web Platform Documentation Project: http://www.webplatform.org/

• MDN JavaScript Reference: https://developer.mozilla.org/en/JavaScript/Reference

• Understanding ECMAScript 6: https://leanpub.com/understandinges6/read

• ECMAScript® 2015 Language Specification For really advanced developers

• JSONP and CORS: http://json-p.org/ - http://www.html5rocks.com/en/tutorials/cors/

• Using Chrome console to debug JavaScript https://developer.chrome.com/devtools/docs/console

#####Practice:#####

Use latest IE, Chrome, or Firefox browser to develop. Try to use as much ECMAScript 6 syntax as you can. Favor let and const over var

1. Open your IDE, create a new file text, save it as index.html. Add the correct doctype, and a few tags with random content.

2. Add a stylesheet to the index.html. Use the stylesheet to center the text of all section elements of the page.

3. Add a hidden section with the following text inside: "Hello world".

4. When the page has finished loading the section must fade in. Hint: Use JavaScript, Browser Events, and CSS3

5. Add a button below the section to your index.html.

6. Attach a click event to the created button which calls a function that gets a response from http://api.icndb.com/jokes/random. Write the response to the section element. Hint: use the XMLHttpRequest to fetch data from the service

7. From the previous exercise create a reusable function to perform AJAX calls. The function must accept a config object and return an ES6 Promise.

8. Show section content in red when a server error occurs.

9. Use the function created in exercise 6 to get the response from https://api.github.com/search/repositories with parameters data "q = 'JavaScript'". First log the service response in Chrome's console to analyze data (see provided link on Chrome console), then display repository's full_name as a list in the right side of the screen. The ul element must be used to list the repositories data.

10. Add an input type="text", and reuse the code for exercise 9, so the user can perform search for any repository.

11. Validate your page using W3C validator: https://addons.mozilla.org/en-US/firefox/addon/web-developer/

12. Write a function that takes as input a matrix of data and outputs a DOM structure representing a table. Attach it to the body of a given page. Hint: use document.createElement, document.createTextNode, and Node.appendChild methods

#####Key Points:#####

4, 7, 10, 12

#####Mobile Test:#####

Test your code in a mobile device or in Android emulator.

Hint: A good option to test your code in a mobile device is to use Genimotion Android Emulator [http://www.genymotion.com/], which is one of the most fast and easy mobile emulators to install.

#####Commit:#####

Commit your practice code.

→ index

####Topic 2: Design Patterns and OOP in JavaScript#### In this Topic we will focus on learning how JavaScript approaches Object-Oriented programming. If you come from Java, or .NET you will find yourself a little bit lost at the beggining. ECMAScript6 provides a layer of syntactic sugar over the previous version(5.1) that is expected to simplify the language.

#####Reading:#####

1. Understand how prototypes works in ECMAScript 5.1 http://yehudakatz.com/2011/08/12/understanding-prototypes-in-javascript/

2. ECMAScript 6 New Features: http://es6-features.org/. You can compare ECMAScript 5 and 6 code.

3. Read the Chapter on JavaScript classes from Understanding ECMAScript6

4. Read about ES6 Modules

5. Extra: Read about AMD, CommonJS, and ES6 Modules Writing Modular JavaScript

6. An overview on all the features ECMAScript provides https://github.com/lukehoban/es6features

#####Practice:#####

1. Create a Movie object:

   Movie

   - title - year - duration

   + play() + pause() + resume()

2. Instantiate some of your favorite movies and play with them in the console.

3. Create an EventEmitter class with the following methods: on, emit, off. The on method will allow to pass a callback or listener that will be executed each time a given event is triggered. The emit method will allow a class to trigger events to be consumed by other functions/objects. The off method will delete the listener.

4. Make Movie a subclass of EventEmitter. Publish "play" event on Movie.play(), "pause" event on Movie.pause(), and "resume" event on Movie.resume()

5. Create a Logger class with a log(info) method that will output info to the console. Make log listen to a Movie's 'play' event. You should be able to do something like this in the console:

   let terminator = new Movie('Terminator', 1984, 90);
   let logger = new Logger();
   terminator.on('play', logger.log);
   // ...
   terminator.play(); // output: The 'play' event has been emitted

6. Create an object called Social with methods share(friendName) and like(friendName) that will generate the following output "{friendName} likes/share {Movie Name}". Hint: declare Social as an object literal, use Object.assign to mix Social methods into a Movie instance. Use Template Literals to generate the like/share method output. You should be able to do something like this in the console:

   ironman.share('Mike Blossom'); // output: Share Iron Man with Mike Blossom

7. Create an Actor class and create some actors from one of your favorite movies.

8. Add a method to Movie that will allow to add one or more actors at the same time.

   let terminator = new Movie('Terminator I', 1985, 60);
   let arnold = new Actor('Arnold Schwarzenegger', 50);
   let otherCast = [
     new Actor('Paul Winfield', 50),
     new Actor('Michael Biehn', 50),
     new Actor('Linda Hamilton', 50)
   ];
   
   terminator.addCast(arnold);
   terminator.addCast(otherCast); //Movie must contain an array of 4 actors

9. Using ES6 Modules split all your classes declarations into diferent files. Use Babel to create a single bundle. Hint: check this tutorial

#####Key Points:#####

5, 6, 8, 9

#####Commit:#####

Commit your practice code.

→ index

####Topic 3: MVC - AngularJS####

#####Reading:#####

1. Ultimate guide to learn Angular.js in one day.

2. Read Angular.js's Developers Guide.

3. Check your code to comply with Angular.js's Best Practices.

4. Check your code to avoid Angular.js's Anti-patterns

5. Learn how to create unit tests for your angular.js applications https://docs.angularjs.org/guide/unit-testing

#####Practice:#####

1. Create a movie listing with your favorite movies. Data shall be persisted in localhost.

2. Show movie details in a separate details view.

3. Allow to add / edit / remove movies from the list.

4. Configure Karma and write tests for your application.

Tips:

• Learn how to use components to structure your application

#####Key Points:#####

1, 2, 3

#####Mobile Test:#####

Test your code in a mobile device or in Android emulator.

#####Commit:#####

Commit your practice code.

→ index

####Topic 4: HTML5 APIs####

#####Reading:#####

1. Take a glimpse into HTML5 APIs: http://www.html5rocks.com/en/

2. Now, take a deep dive into HTML5: http://diveintohtml5.info/ (optional)

3. Understand the capabilities the Web has to offer right now https://whatwebcando.today/

#####Practice:#####

1. Create a page with a textarea and a save button. Save textarea content's when the user clicks on save. Use both localStorage and IndexedDB.

2. Add a clear button to erase saved content.

3. Add drag and drop support to load text files.

4. Open a web socket and test it against this echo service.

5. Create a web page with a canvas element. Upon page load draw basic geometric figures with random colors and strokes.

6. Using the Canvas API animate a rectangle's position on the screen. Make sure not to use setTimeout but requestTimeFrame to perform the animation.

7. Create a web page with a SVG element to show a vector graphic. Make sure you understand when is better to use SVG instead of bitmaps, and viceversa.

#####Key Points:#####

1, 3, 4, 7

#####Commit:#####

Commit your practice code.

→ index

####Topic 5 (Optional): UI - ReactJS####

#####Reading:#####

1. What is ReactJS?. Here is an introduction to it.

2. First get started with ReactJS then Think in React.

3. Understand Props & States.

4. Read about some ReactJS's Best Practices, Patterns & Anti-patters.

5. Check some ReactJS's Test utils.

6. Try on using Reactify ReactJS + Browserify workflow.

#####Extra reading:#####

• Full guide on ReactJS.

• Read some ReactJS tips.

#####Practice:#####

1. Create the needed components to allow the user create a new Movie.

2. Create the needed components to show a list of your favorite Movies.

3. Create the needed components to allow the user edit a Movie.

4. Update the movie listing to allow the user delete movies.

5. Update the application to use ReactRouter and Flux.

Tips:

• First, try to think which should be your app structure (in terms of components).
• Second, figure out which component should handle the movies.
• You should create a component when trying to create a view (a view is also a component).
• To update the application with ReactRouter and Flux you may split out the add logic and the display logic into two views. Also you may provide the data storage (object) responsibility to Flux's storages.

#####Key Points:#####

1, 2, 4.

#####Mobile Test:#####

Test your code in a mobile device or in Android emulator.

#####Commit:#####

Commit your practice code.

→ index

###Your First Project Starts Now!###

####It’s time for the real thing.####

You will work on a project to achieve a fully working multi platform mobile app developed in JavaScript and using the latest tags and APIs available in HTML5.

You will apply all the knowledge obtained during the learning weeks.

You’ll be given with a backlog of user stories you will estimate with your PM.

Once estimated, user stories will be divided into sprints of one week.

You will participate on daily scrum meetings. Will you be able to consult documentation? Of course! You will be able to use any resource you know that helps you complete your user stories, be it going back to documentation sites, tutorials or just googling what you need. Luckily the web is plenty of awesome resources waiting for you to grasp them!

####Commits####

You will commit your code to GitHub on a daily basis.

####Reviews####

Tutors will give you feedback at the end of each sprint by reviewing and commenting your committed code in GitHub. If possible tutors will give you even more frequent feedback, sometimes at the end of the day.

→ index

Thanks for reading!