Introduction to Front-End Development

1. Introduction to
Front End Development

2. Plan of the Presentation 1/2
HTML5
 What is HTML5?
 Why HTML5?
Javascript
 What is Javascript?
 Evolution of Javascript
Some HTML5 Advantages
 Hybrid Application
 Multithreading
 Working Offline
Different platforms
 Web Desktop
 Web Mobile
 IOS
 Android
Some concepts to know
 Client/Server – Front End/Back End
 Responsive
 Cross Platform Mobile

3. Plan of the Presentation 2/2
Javascript MVC Framework
 What is a Javascript MVC Framework?
 Why use Javascript MVC Framework?
 What are the different Javascript
Frameworks?
 Angular
Development
 IDE - Webstorm
 Task Runner – Grunt
 Libraries Manager - Bower
 Compiled CSS – SASS
 Some Best Practices
Javascript Libraries
 Javascript Libraries to simplify Javascript
 Javascript Libraries for UI components
and styling

4. Different platforms

5. Web Desktop
 Desktop or Laptop computer
 Run in a web browser
Chrome, Firefox, Safari, Internet Explorer

6. Web Mobile
 Smartphones and Tablets
 Run in a web browser
Chrome, Firefox, Safari, Internet Explorer

7. Some concepts to know

8. Client/Server – Front End/Back End

9. Responsive

10. Cross Platform Mobile

11. HTML 5

12. What is HTML5?
 5th version of Hyper Text Markup Language
 Displayed in Web browsers: Like Chrome, Firefox IE, etc..
 Skeleton of the webpage structure

13. What is HTML5?
HTML5 is often a generic term for the package HTML5/CSS3/JAVASCRIPT
 CSS3 -Provides STYLE to the webpage
(colors, sizes, layouts, etc…)
 Javascript -Provides BEHAVIOR to the webpage
(onclick, onload, etc..)
 HTML5 -Provides STRUCTURE to the webpage
(body, section, etc…)

14. Why HTML5?
 Built-In Video/Audio
No need of external plugin like Adobe Flash Player
 Cross Browser support
Compatible with all major web browsers – Chrome, Firefox, IE, Safari, etc…
 Mobile Optimization
Working across all types of devices – Desktop, Tablet, Smartphones
 Better Interactions for Rich Internet Applications
Drag and Drop, Canvas element, etc…

15. Javascript

16. What is Javascript?
 JavaScript is the most popular programming language in the world.
It’s used to make web pages interactive
Some examples of what can we do with Javascript

17. Evolution of Javascript
 ECMAScript 5 - Today all the major browsers have total support for ECMAScript 5
 Javascript is also known as ECMAScript - This programming language is evolving
 ECMAScript 6
The overarching goal of ECMAScript 6 is to improve speed and performance
in coding larger, more complex Web applications, through the implementation
of a redefined language syntax featuring module and class support extensions
All the major browsers are still not fully supporting ECMAScript 6 but are evolving in this way
 ECMAScript 7,8 and more
The future versions of ECMAScript are already scheduled
Compatibility Table
We can already code in ECMAScript 6 today.
The process consists in writing ECMASCript 6 and compiling it to ECMAScript 5 -
https://babeljs.io/

18. Some HTML5 Advantages

19. Hybrid Application
A hybrid app is a mobile app written using languages such as HTML5,
CSS3 and JavaScript, then compiled into native iOS, Android or other
mobile platform code using wrapper technologies such as
PhoneGap/Cordova.
There are also many mobile HTML5 frameworks which allow you to design and develop
mobile apps that can be packaged with PhoneGap/Cordova.
Ionic is one of the popular http://ionicframework.com/
Additionally, these frameworks have APIs allowing access to
native functions such as the camera, GPS, etc.

20. Multithreading
HTML5 Web Worker is a JavaScript thread(or
javascript file) than runs concurrently with the main
thread.
This child threads(workers) cannot access any
resource(window, document and parent objects)
of the main thread.
These are ideal for running scripts in background threads, so that they don't interfere with
the user interface (UI).
Worker thread have their own context and work independently than the main thread.
Web workers allows parent and child threads to communicate with each other via
message passing.
Any script that you want to execute in the background is a good candidate to run as a
Web Worker.

21. Working Offline
What is an offline web application? At first glance, it
sounds like a contradiction in terms. Web pages are
things you download and render. Downloading
implies a network connection. How can you
download when you’re offline? Of course, you can’t.
But you can download when you’re online. And
that’s how HTML5 offline applications work.
At its simplest, an offline web application is a list of URLs — HTML, CSS, JavaScript,
images, or any other kind of resource. The home page of the offline web application
points to this list, called a manifest file, which is just a text file located elsewhere on the
web server. A web browser that implements HTML5 offline applications will read the list of
URLs from the manifest file, download the resources, cache them locally, and
automatically keep the local copies up to date as they change.
When the time comes that you try to access the web application without a network
connection, your web browser will automatically switch over to the local copies instead.

22. Javascript MVC Framework

23. What is a Javascript MVC Framework?
 Model View Controller
Model–view–controller (MVC) is a
software architectural pattern.
The goal of MVC and related patterns
is to separate presentation from
domain business logic.
 Model - business logic
 View - presentation logic
 Controller - changing state of model
and view (based on user input)

24. Why use Javascript MVC Framework?
 No need to reinvent the wheel
Why write code that's already been written (better)?
 Do More With Less
Most JavaScript frameworks allows you to do more with less code.
Less code means less maintenance time and less coding time
 You Aren't The Expert
As big as any programmer's ego is, there are people out there that are smarter,
more inventive than you.
The minds behind the frameworks have their eyes on JavaScript daily -- trust in them.
 Stucture and Organize
No “Spaghetti” code.
Well structured and maintanable code, which can be a huge time saver in the long run

25. What are the different Javascript Frameworks?
There are many frameworks out there, four of them stand out:
Backbone, Angular, Ember and React.
Angular was released by Google and React by Facebook (much more recent and speed
growing)
Article to deep in this subject

26. Angular
 Today it’s the most popular framework  Concerns about Angular
Angular 2.0 is totally different from the current
version(1.3)
To evolve to Angular 2.0 it’s a total rewrite with
NO BACKWARD COMPATIBILITY
Article to deep in this subject

27. Javascript Libraries

28. Javascript Libraries to simplify Javascript
There are many libraries to simplify the use of Javascript
jQuery, Prototype, etc…
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML
document traversal and manipulation, event handling, animation, and Ajax much
simpler with an easy-to-use API that works across a multitude of browsers.
With a combination of versatility and extensibility, jQuery has changed the way that
millions of people write JavaScript.
jQuery is one of the most popular
https://jquery.com/

29. Javascript Libraries for UI components and styling
There are many libraries to for UI components and styling
Bootstrap, Foundation, etc…
Bootstrap makes front-end web development faster and easier. It's made for folks of all
skill levels, devices of all shapes, and projects of all sizes.
With Bootstrap, you get extensive and beautiful documentation for common HTML
elements, dozens of custom HTML and CSS components.
Bootstrap is one of the most popular
http://getbootstrap.com/

30. Development

31. IDE - Webstorm
There are many IDE (Integrated Development Environment ) to code HTML5,
the one I use is Webstorm: https://www.jetbrains.com/webstorm/
 Intelligent Code Completion
 Code Inspection
 Code Navigation

32. Task Runner – Grunt
There are 2 big actors in this field: Grunt, Gulp
the one I use is Grunt: http://gruntjs.com/
 Minification
 Deploy
You can set and launch your own tasks in the Terminal (in Webstorm):
 Include
Video Example at 1:30

33. Libraries Manager - Bower
I use Bower to make the job: http://bower.io/
You can install and manage libraries directly from the Terminal (in Webstorm):
Video Example at 1:45

34. Compiled CSS – SASS
We need some features to make our CSS coding easier
Some Examples
There are 2 big actors in this field: SASS, LESS
the one I use is Sass: http://sass-lang.com/
 Variables
 Nesting
 Mixins

35. Some Best Practices

36. Some Best Practices
Video of best practices

37. ANY QUESTIONS?