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.
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.
You can contact other bootcamp participants or any available tutor if you need technical assistance.
We will create one chat for bootcamp members only, and another one for boot camp members and tutors when boot camp starts.
Performance Measurement
Code review after each practice and sprint
Checkpoint completion after Learning stage with your assigned tutor
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.
The next week will be used to develop an application following a life process.
All the exercises must work within a mobile environment.
Team play is encouraged but the work will be evaluated per person.
All code and documentation must be in English.
Code must adhere to Globant’s UI HTML, CSS and JavaScript coding guidelines.
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:
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.
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.
Commit: YOu will commit all your code as soon as you finish each exercise. If not you must commit your work in a daily basis.
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
This topic is hosted in a different repository, you can find it in HTML & CSS Basics
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.
The on method will receive a eventName and a callback or listener that will be executed each time a that event is triggered.
The emit method will trigger events to be consumed by other functions or objects.
The off method will delete previously defined event listeners.
Class heritage
Make the Movie class a subclass of EventEmitter and use the inherited methods to publish play, pause and resume events when the related method is called.
Working with classes
Add a method to Movie as addCast(cast) that allows the addition of one or more Actors to a move. It must accept if provided more than one Actor at the same time.
Create a Logger class with the following structure
Logger
+ constructor()
+ log(info)
After creating this class make an instance of Logger and make it listen to Movie's play event.
As example you must end with something like
constterminator=newMovie('Terminator I',1985,60);
...
terminator.play();// output: The 'play' event has been emitted
Mixins
Create an object called social, defining the methods share(friendName) and like(friendName) that generates the following output {friendName} likes/share {movieName}.
Then extend a movie with it to have access to this methods.
Hint: A mixin is not a class which will be instantiated later on. Use a way to extend some object methods into another object. Template literals might be useful to generate the required output.
Create the needed components to allow the user create a new Movie.
Create the needed components to show a list of your favorite Movies.
Create the needed components to allow the user edit a Movie.
Update the movie listing to allow the user delete movies.
Update the application to use Redux
Update the application to use ReactRouter
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.
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.
Will you be able to consult documentation? Of course!
You will be able to use any resource you know that helps you complete your project, be it going back to documentation sites, tutorials or just googling what you need. Luckily the web has plenty of awesome resources waiting for you to grasp them!
Reviews
Tutors will give you feedback at the end of the project by reviewing and commenting your committed code in GitHub.
请发表评论