SlideShare ist ein Scribd-Unternehmen logo
1 von 37
Introduction to
Front End Development
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
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
Different platforms
Web Desktop
 Desktop or Laptop computer
 Run in a web browser
Chrome, Firefox, Safari, Internet Explorer
Web Mobile
 Smartphones and Tablets
 Run in a web browser
Chrome, Firefox, Safari, Internet Explorer
Some concepts to know
Client/Server – Front End/Back End
Responsive
Cross Platform Mobile
HTML 5
What is HTML5?
 5th version of Hyper Text Markup Language
 Displayed in Web browsers: Like Chrome, Firefox IE, etc..
 Skeleton of the webpage structure
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…)
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…
Javascript
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
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/
Some HTML5 Advantages
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.
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.
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.
Javascript MVC Framework
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)
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
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
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
Javascript Libraries
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/
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/
Development
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
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
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
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
Some Best Practices
Some Best Practices
Video of best practices
ANY QUESTIONS?

Weitere ähnliche Inhalte

Was ist angesagt?

Web Development Presentation
Web Development PresentationWeb Development Presentation
Web Development PresentationTurnToTech
 
ppt of web development for diploma student
ppt of web development for diploma student ppt of web development for diploma student
ppt of web development for diploma student Abhishekchauhan863165
 
Web Development In 2018
Web Development In 2018Web Development In 2018
Web Development In 2018Traversy Media
 
Ppt of web development
Ppt of web developmentPpt of web development
Ppt of web developmentbethanygfair
 
Web development | Derin Dolen
Web development | Derin Dolen Web development | Derin Dolen
Web development | Derin Dolen Derin Dolen
 
Full stack web development
Full stack web developmentFull stack web development
Full stack web developmentCrampete
 
Web development using javaScript, React js, Node js, HTML, CSS and SQL
Web development using javaScript, React js, Node js, HTML, CSS and SQLWeb development using javaScript, React js, Node js, HTML, CSS and SQL
Web development using javaScript, React js, Node js, HTML, CSS and SQLJayant Surana
 
Introduction to web development
Introduction to web developmentIntroduction to web development
Introduction to web developmentMohammed Safwat
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScriptAndres Baravalle
 
Html, CSS & Web Designing
Html, CSS & Web DesigningHtml, CSS & Web Designing
Html, CSS & Web DesigningLeslie Steele
 
How To be a Backend developer
How To be a Backend developer    How To be a Backend developer
How To be a Backend developer Ramy Hakam
 
Introduction to JavaScript (1).ppt
Introduction to JavaScript (1).pptIntroduction to JavaScript (1).ppt
Introduction to JavaScript (1).pptMuhammadRehan856177
 
Ppt full stack developer
Ppt full stack developerPpt full stack developer
Ppt full stack developerSudhirVarpe1
 
Full-Stack Development
Full-Stack DevelopmentFull-Stack Development
Full-Stack DevelopmentDhilipsiva DS
 
React Development with the MERN Stack
React Development with the MERN StackReact Development with the MERN Stack
React Development with the MERN StackTroy Miles
 

Was ist angesagt? (20)

Web Development Presentation
Web Development PresentationWeb Development Presentation
Web Development Presentation
 
Web Development
Web DevelopmentWeb Development
Web Development
 
Web Development using HTML & CSS
Web Development using HTML & CSSWeb Development using HTML & CSS
Web Development using HTML & CSS
 
ppt of web development for diploma student
ppt of web development for diploma student ppt of web development for diploma student
ppt of web development for diploma student
 
Web Development In 2018
Web Development In 2018Web Development In 2018
Web Development In 2018
 
Ppt of web development
Ppt of web developmentPpt of web development
Ppt of web development
 
Web development | Derin Dolen
Web development | Derin Dolen Web development | Derin Dolen
Web development | Derin Dolen
 
Full stack web development
Full stack web developmentFull stack web development
Full stack web development
 
Web development using javaScript, React js, Node js, HTML, CSS and SQL
Web development using javaScript, React js, Node js, HTML, CSS and SQLWeb development using javaScript, React js, Node js, HTML, CSS and SQL
Web development using javaScript, React js, Node js, HTML, CSS and SQL
 
Introduction to web development
Introduction to web developmentIntroduction to web development
Introduction to web development
 
Javascript
JavascriptJavascript
Javascript
 
Web development
Web developmentWeb development
Web development
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScript
 
Html, CSS & Web Designing
Html, CSS & Web DesigningHtml, CSS & Web Designing
Html, CSS & Web Designing
 
How To be a Backend developer
How To be a Backend developer    How To be a Backend developer
How To be a Backend developer
 
Introduction to JavaScript (1).ppt
Introduction to JavaScript (1).pptIntroduction to JavaScript (1).ppt
Introduction to JavaScript (1).ppt
 
MEAN Stack
MEAN StackMEAN Stack
MEAN Stack
 
Ppt full stack developer
Ppt full stack developerPpt full stack developer
Ppt full stack developer
 
Full-Stack Development
Full-Stack DevelopmentFull-Stack Development
Full-Stack Development
 
React Development with the MERN Stack
React Development with the MERN StackReact Development with the MERN Stack
React Development with the MERN Stack
 

Andere mochten auch

Introduction to Nodejs and Isomorphic javascript
Introduction to Nodejs and Isomorphic javascriptIntroduction to Nodejs and Isomorphic javascript
Introduction to Nodejs and Isomorphic javascriptChenKuo Chen
 
Metropolitan Police Kathmandu
Metropolitan Police KathmanduMetropolitan Police Kathmandu
Metropolitan Police KathmanduDan Bro
 
Teamwork
TeamworkTeamwork
Teamworkrainyas
 
Information Systems Professional 1 (1)
Information Systems Professional 1 (1)Information Systems Professional 1 (1)
Information Systems Professional 1 (1)Charles Mann
 
Arredondo4BizCaseArch2
Arredondo4BizCaseArch2Arredondo4BizCaseArch2
Arredondo4BizCaseArch2Abe Arredondo
 
50-57 Cover Story V3
50-57 Cover Story V350-57 Cover Story V3
50-57 Cover Story V3Quintella Koh
 
LBA&D homepage presentation
LBA&D homepage presentationLBA&D homepage presentation
LBA&D homepage presentationLydia Bobo
 
Aet 545 storyboard template [autosaved]
Aet 545 storyboard template [autosaved]Aet 545 storyboard template [autosaved]
Aet 545 storyboard template [autosaved]lins3838
 

Andere mochten auch (13)

Introduction to Nodejs and Isomorphic javascript
Introduction to Nodejs and Isomorphic javascriptIntroduction to Nodejs and Isomorphic javascript
Introduction to Nodejs and Isomorphic javascript
 
Introduction To Web Design
Introduction To Web DesignIntroduction To Web Design
Introduction To Web Design
 
Broker dealer search
Broker dealer searchBroker dealer search
Broker dealer search
 
Metropolitan Police Kathmandu
Metropolitan Police KathmanduMetropolitan Police Kathmandu
Metropolitan Police Kathmandu
 
Teamwork
TeamworkTeamwork
Teamwork
 
Information Systems Professional 1 (1)
Information Systems Professional 1 (1)Information Systems Professional 1 (1)
Information Systems Professional 1 (1)
 
create
createcreate
create
 
Arredondo4BizCaseArch2
Arredondo4BizCaseArch2Arredondo4BizCaseArch2
Arredondo4BizCaseArch2
 
Broker dealer
Broker dealerBroker dealer
Broker dealer
 
50-57 Cover Story V3
50-57 Cover Story V350-57 Cover Story V3
50-57 Cover Story V3
 
Guida
GuidaGuida
Guida
 
LBA&D homepage presentation
LBA&D homepage presentationLBA&D homepage presentation
LBA&D homepage presentation
 
Aet 545 storyboard template [autosaved]
Aet 545 storyboard template [autosaved]Aet 545 storyboard template [autosaved]
Aet 545 storyboard template [autosaved]
 

Ähnlich wie Front End Development | Introduction

5 Powerful Backend Frameworks for Web App Development in 2022
5 Powerful Backend Frameworks for Web App Development in 20225 Powerful Backend Frameworks for Web App Development in 2022
5 Powerful Backend Frameworks for Web App Development in 202275waytechnologies
 
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptxLATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptxchitrachauhan21
 
Making Of PHP Based Web Application
Making Of PHP Based Web ApplicationMaking Of PHP Based Web Application
Making Of PHP Based Web ApplicationSachin Walvekar
 
Top 11 Front-End Web Development Tools To Consider in 2020
 Top 11 Front-End Web Development Tools To Consider in 2020 Top 11 Front-End Web Development Tools To Consider in 2020
Top 11 Front-End Web Development Tools To Consider in 2020Katy Slemon
 
Top 12 Front End Technologies to Use In 2024.pdf
Top 12 Front End Technologies to Use In 2024.pdfTop 12 Front End Technologies to Use In 2024.pdf
Top 12 Front End Technologies to Use In 2024.pdfLaura Miller
 
Top 12 Front End Technologies to Use In 2023.pdf
Top 12 Front End Technologies to Use In 2023.pdfTop 12 Front End Technologies to Use In 2023.pdf
Top 12 Front End Technologies to Use In 2023.pdfLaura Miller
 
Web development concepts using microsoft technologies
Web development concepts using microsoft technologiesWeb development concepts using microsoft technologies
Web development concepts using microsoft technologiesHosam Kamel
 
Top 10 Frameworks Programmers Should Learn in 2020
Top 10 Frameworks Programmers Should Learn in 2020Top 10 Frameworks Programmers Should Learn in 2020
Top 10 Frameworks Programmers Should Learn in 2020NexSoftsys
 
10 Best Front-end Frameworks for Web Development
10 Best Front-end Frameworks for Web Development10 Best Front-end Frameworks for Web Development
10 Best Front-end Frameworks for Web DevelopmentMars Devs
 
Latest Web development technologies 2021
 Latest Web development technologies 2021 Latest Web development technologies 2021
Latest Web development technologies 2021SWATHYSMOHAN
 
webdevelopmentppt-210923044639 (1).pptx
webdevelopmentppt-210923044639 (1).pptxwebdevelopmentppt-210923044639 (1).pptx
webdevelopmentppt-210923044639 (1).pptxlearnEnglish51
 
Asp Net Vs Vue JS Which One You Should Choose for Development.pdf
Asp Net Vs Vue JS Which One You Should Choose for Development.pdfAsp Net Vs Vue JS Which One You Should Choose for Development.pdf
Asp Net Vs Vue JS Which One You Should Choose for Development.pdfIntegrated IT Solutions
 
Top 10 Best Web Development Technologies
Top 10 Best Web Development TechnologiesTop 10 Best Web Development Technologies
Top 10 Best Web Development TechnologiesAjayMishra302670
 
Apache Flex and the imperfect Web
Apache Flex and the imperfect WebApache Flex and the imperfect Web
Apache Flex and the imperfect Webmasuland
 
Popular Web Frameworks for web Development
Popular Web Frameworks for web DevelopmentPopular Web Frameworks for web Development
Popular Web Frameworks for web DevelopmentChinmayee Behera
 
Angular JS Basics
Angular JS BasicsAngular JS Basics
Angular JS BasicsMounish Sai
 

Ähnlich wie Front End Development | Introduction (20)

5 Powerful Backend Frameworks for Web App Development in 2022
5 Powerful Backend Frameworks for Web App Development in 20225 Powerful Backend Frameworks for Web App Development in 2022
5 Powerful Backend Frameworks for Web App Development in 2022
 
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptxLATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
 
Making Of PHP Based Web Application
Making Of PHP Based Web ApplicationMaking Of PHP Based Web Application
Making Of PHP Based Web Application
 
Top 11 Front-End Web Development Tools To Consider in 2020
 Top 11 Front-End Web Development Tools To Consider in 2020 Top 11 Front-End Web Development Tools To Consider in 2020
Top 11 Front-End Web Development Tools To Consider in 2020
 
Top 12 Front End Technologies to Use In 2024.pdf
Top 12 Front End Technologies to Use In 2024.pdfTop 12 Front End Technologies to Use In 2024.pdf
Top 12 Front End Technologies to Use In 2024.pdf
 
Top 12 Front End Technologies to Use In 2023.pdf
Top 12 Front End Technologies to Use In 2023.pdfTop 12 Front End Technologies to Use In 2023.pdf
Top 12 Front End Technologies to Use In 2023.pdf
 
Web development concepts using microsoft technologies
Web development concepts using microsoft technologiesWeb development concepts using microsoft technologies
Web development concepts using microsoft technologies
 
Top 10 Frameworks Programmers Should Learn in 2020
Top 10 Frameworks Programmers Should Learn in 2020Top 10 Frameworks Programmers Should Learn in 2020
Top 10 Frameworks Programmers Should Learn in 2020
 
10 Best Front-end Frameworks for Web Development
10 Best Front-end Frameworks for Web Development10 Best Front-end Frameworks for Web Development
10 Best Front-end Frameworks for Web Development
 
Latest Web development technologies 2021
 Latest Web development technologies 2021 Latest Web development technologies 2021
Latest Web development technologies 2021
 
webdevelopmentppt-210923044639 (1).pptx
webdevelopmentppt-210923044639 (1).pptxwebdevelopmentppt-210923044639 (1).pptx
webdevelopmentppt-210923044639 (1).pptx
 
Asp Net Vs Vue JS Which One You Should Choose for Development.pdf
Asp Net Vs Vue JS Which One You Should Choose for Development.pdfAsp Net Vs Vue JS Which One You Should Choose for Development.pdf
Asp Net Vs Vue JS Which One You Should Choose for Development.pdf
 
NodeJs Frameworks.pdf
NodeJs Frameworks.pdfNodeJs Frameworks.pdf
NodeJs Frameworks.pdf
 
Asp.net Vs Vue.js.pdf
Asp.net Vs Vue.js.pdfAsp.net Vs Vue.js.pdf
Asp.net Vs Vue.js.pdf
 
Top 10 Best Web Development Technologies
Top 10 Best Web Development TechnologiesTop 10 Best Web Development Technologies
Top 10 Best Web Development Technologies
 
Apache Flex and the imperfect Web
Apache Flex and the imperfect WebApache Flex and the imperfect Web
Apache Flex and the imperfect Web
 
Full Stack Development
Full Stack DevelopmentFull Stack Development
Full Stack Development
 
Food borne human diseases
Food borne human diseasesFood borne human diseases
Food borne human diseases
 
Popular Web Frameworks for web Development
Popular Web Frameworks for web DevelopmentPopular Web Frameworks for web Development
Popular Web Frameworks for web Development
 
Angular JS Basics
Angular JS BasicsAngular JS Basics
Angular JS Basics
 

Kürzlich hochgeladen

PHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationPHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationLinaWolf1
 
Company Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptxCompany Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptxMario
 
Top 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxTop 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxDyna Gilbert
 
Film cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasaFilm cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasa494f574xmv
 
Unidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptxUnidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptxmibuzondetrabajo
 
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书rnrncn29
 
TRENDS Enabling and inhibiting dimensions.pptx
TRENDS Enabling and inhibiting dimensions.pptxTRENDS Enabling and inhibiting dimensions.pptx
TRENDS Enabling and inhibiting dimensions.pptxAndrieCagasanAkio
 
SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predieusebiomeyer
 
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书rnrncn29
 
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书zdzoqco
 
IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119APNIC
 

Kürzlich hochgeladen (11)

PHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationPHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 Documentation
 
Company Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptxCompany Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptx
 
Top 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxTop 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptx
 
Film cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasaFilm cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasa
 
Unidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptxUnidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptx
 
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
 
TRENDS Enabling and inhibiting dimensions.pptx
TRENDS Enabling and inhibiting dimensions.pptxTRENDS Enabling and inhibiting dimensions.pptx
TRENDS Enabling and inhibiting dimensions.pptx
 
SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predi
 
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
 
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
 
IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119
 

Front End Development | Introduction

  • 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
  • 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
  • 8. Client/Server – Front End/Back End
  • 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…
  • 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/
  • 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.
  • 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
  • 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/
  • 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
  • 36. Some Best Practices Video of best practices