SlideShare uma empresa Scribd logo
1 de 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?

Mais conteúdo relacionado

Mais procurados

WEB I - 01 - Introduction to Web Development
WEB I - 01 - Introduction to Web DevelopmentWEB I - 01 - Introduction to Web Development
WEB I - 01 - Introduction to Web DevelopmentRandy Connolly
 
Modern Web Development
Modern Web DevelopmentModern Web Development
Modern Web DevelopmentRobert Nyman
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScriptAndres Baravalle
 
Front end web development
Front end web developmentFront end web development
Front end web developmentviveksewa
 
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
 
Front-End Web Development
Front-End Web DevelopmentFront-End Web Development
Front-End Web DevelopmentYash Sati
 
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 React JS
Introduction to React JSIntroduction to React JS
Introduction to React JSArno Lordkronos
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS PresentationShawn Calvert
 
Web development | Derin Dolen
Web development | Derin Dolen Web development | Derin Dolen
Web development | Derin Dolen Derin Dolen
 
Web development presentation
Web development presentationWeb development presentation
Web development presentationVaishnavi8950
 
Web Development Ppt
Web Development PptWeb Development Ppt
Web Development PptBruce Tucker
 
WEB DEVELOPMENT
WEB DEVELOPMENTWEB DEVELOPMENT
WEB DEVELOPMENTkhushi74
 
Web Development In 2018
Web Development In 2018Web Development In 2018
Web Development In 2018Traversy Media
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/jsKnoldus Inc.
 

Mais procurados (20)

WEB I - 01 - Introduction to Web Development
WEB I - 01 - Introduction to Web DevelopmentWEB I - 01 - Introduction to Web Development
WEB I - 01 - Introduction to Web Development
 
Modern Web Development
Modern Web DevelopmentModern Web Development
Modern Web Development
 
Java script
Java scriptJava script
Java script
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScript
 
Front end web development
Front end web developmentFront end web development
Front end web development
 
Web development
Web developmentWeb development
Web development
 
Web development
Web developmentWeb development
Web development
 
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
 
Front-End Web Development
Front-End Web DevelopmentFront-End Web Development
Front-End 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
 
Js ppt
Js pptJs ppt
Js ppt
 
Introduction to React JS
Introduction to React JSIntroduction to React JS
Introduction to React JS
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
 
HTML5 & CSS3
HTML5 & CSS3 HTML5 & CSS3
HTML5 & CSS3
 
Web development | Derin Dolen
Web development | Derin Dolen Web development | Derin Dolen
Web development | Derin Dolen
 
Web development presentation
Web development presentationWeb development presentation
Web development presentation
 
Web Development Ppt
Web Development PptWeb Development Ppt
Web Development Ppt
 
WEB DEVELOPMENT
WEB DEVELOPMENTWEB DEVELOPMENT
WEB DEVELOPMENT
 
Web Development In 2018
Web Development In 2018Web Development In 2018
Web Development In 2018
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
 

Destaque

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
 

Destaque (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]
 

Semelhante a Front End Development | Introduction

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
 
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
 
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
 
How to Become a Front-end Developer in 2022 | Optymize
How to Become a Front-end Developer in 2022 | OptymizeHow to Become a Front-end Developer in 2022 | Optymize
How to Become a Front-end Developer in 2022 | OptymizeOptymizeHireRemoteEn
 
MINI PROJECT OR INTERNSHIP ASSSESSMENT ppt 1.pptx
MINI PROJECT OR INTERNSHIP ASSSESSMENT ppt 1.pptxMINI PROJECT OR INTERNSHIP ASSSESSMENT ppt 1.pptx
MINI PROJECT OR INTERNSHIP ASSSESSMENT ppt 1.pptxLakshmiPandey19
 
Apache Flex and the imperfect Web
Apache Flex and the imperfect WebApache Flex and the imperfect Web
Apache Flex and the imperfect Webmasuland
 
Angular JS Basics
Angular JS BasicsAngular JS Basics
Angular JS BasicsMounish Sai
 
Top 10 HTML5 frameworks for effective development in 2016
Top 10 HTML5 frameworks for effective development in 2016Top 10 HTML5 frameworks for effective development in 2016
Top 10 HTML5 frameworks for effective development in 2016iMOBDEV Technologies Pvt. Ltd.
 
Full Stack Web Development: Vision, Challenges and Future Scope
Full Stack Web Development: Vision, Challenges and Future ScopeFull Stack Web Development: Vision, Challenges and Future Scope
Full Stack Web Development: Vision, Challenges and Future ScopeIRJET Journal
 
Web application framework
Web application frameworkWeb application framework
Web application frameworkPankaj Chand
 
Over view of Technologies
Over view of TechnologiesOver view of Technologies
Over view of TechnologiesChris Mitchell
 
Top 10 Front End Development Technologies to Focus in 2018
Top 10 Front End Development Technologies to Focus in 2018Top 10 Front End Development Technologies to Focus in 2018
Top 10 Front End Development Technologies to Focus in 2018Helios Solutions
 
SharePoint Framework -The future of SharePoint/ Office 365 developer ecosystem.
SharePoint Framework -The future of SharePoint/ Office 365 developer ecosystem. SharePoint Framework -The future of SharePoint/ Office 365 developer ecosystem.
SharePoint Framework -The future of SharePoint/ Office 365 developer ecosystem. Kushan Lahiru Perera
 
Website and it's importance
Website and it's importanceWebsite and it's importance
Website and it's importanceRobinSingh347
 

Semelhante a Front End Development | Introduction (20)

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
 
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
 
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
 
How to Become a Front-end Developer in 2022 | Optymize
How to Become a Front-end Developer in 2022 | OptymizeHow to Become a Front-end Developer in 2022 | Optymize
How to Become a Front-end Developer in 2022 | Optymize
 
MINI PROJECT OR INTERNSHIP ASSSESSMENT ppt 1.pptx
MINI PROJECT OR INTERNSHIP ASSSESSMENT ppt 1.pptxMINI PROJECT OR INTERNSHIP ASSSESSMENT ppt 1.pptx
MINI PROJECT OR INTERNSHIP ASSSESSMENT ppt 1.pptx
 
NodeJs Frameworks.pdf
NodeJs Frameworks.pdfNodeJs Frameworks.pdf
NodeJs Frameworks.pdf
 
Apache Flex and the imperfect Web
Apache Flex and the imperfect WebApache Flex and the imperfect Web
Apache Flex and the imperfect Web
 
Angular JS Basics
Angular JS BasicsAngular JS Basics
Angular JS Basics
 
Top 10 HTML5 frameworks for effective development in 2016
Top 10 HTML5 frameworks for effective development in 2016Top 10 HTML5 frameworks for effective development in 2016
Top 10 HTML5 frameworks for effective development in 2016
 
Full Stack Web Development: Vision, Challenges and Future Scope
Full Stack Web Development: Vision, Challenges and Future ScopeFull Stack Web Development: Vision, Challenges and Future Scope
Full Stack Web Development: Vision, Challenges and Future Scope
 
Web application framework
Web application frameworkWeb application framework
Web application framework
 
It ppt.pptx
It ppt.pptxIt ppt.pptx
It ppt.pptx
 
Over view of Technologies
Over view of TechnologiesOver view of Technologies
Over view of Technologies
 
Top 10 Front End Development Technologies to Focus in 2018
Top 10 Front End Development Technologies to Focus in 2018Top 10 Front End Development Technologies to Focus in 2018
Top 10 Front End Development Technologies to Focus in 2018
 
SharePoint Framework -The future of SharePoint/ Office 365 developer ecosystem.
SharePoint Framework -The future of SharePoint/ Office 365 developer ecosystem. SharePoint Framework -The future of SharePoint/ Office 365 developer ecosystem.
SharePoint Framework -The future of SharePoint/ Office 365 developer ecosystem.
 
Website and it's importance
Website and it's importanceWebsite and it's importance
Website and it's importance
 

Último

SQL Server on Azure VM datasheet.dsadaspptx
SQL Server on Azure VM datasheet.dsadaspptxSQL Server on Azure VM datasheet.dsadaspptx
SQL Server on Azure VM datasheet.dsadaspptxJustineGarcia32
 
Section 3 - Technical Sales Foundations for IBM QRadar for Cloud (QRoC)V1 P10...
Section 3 - Technical Sales Foundations for IBM QRadar for Cloud (QRoC)V1 P10...Section 3 - Technical Sales Foundations for IBM QRadar for Cloud (QRoC)V1 P10...
Section 3 - Technical Sales Foundations for IBM QRadar for Cloud (QRoC)V1 P10...hasimatwork
 
APNIC Update and RIR Policies for ccTLDs, presented at APTLD 85
APNIC Update and RIR Policies for ccTLDs, presented at APTLD 85APNIC Update and RIR Policies for ccTLDs, presented at APTLD 85
APNIC Update and RIR Policies for ccTLDs, presented at APTLD 85APNIC
 
Mary Meeker Internet Trends Report for 2019
Mary Meeker Internet Trends Report for 2019Mary Meeker Internet Trends Report for 2019
Mary Meeker Internet Trends Report for 2019Eric Johnson
 
Google-Next-Madrid-BBVA-Research inv.pdf
Google-Next-Madrid-BBVA-Research inv.pdfGoogle-Next-Madrid-BBVA-Research inv.pdf
Google-Next-Madrid-BBVA-Research inv.pdfMaria Adalfio
 
Benefits of Fiber Internet vs. Traditional Internet.pptx
Benefits of Fiber Internet vs. Traditional Internet.pptxBenefits of Fiber Internet vs. Traditional Internet.pptx
Benefits of Fiber Internet vs. Traditional Internet.pptxlibertyuae uae
 
overview of Virtualization, concept of Virtualization
overview of Virtualization, concept of Virtualizationoverview of Virtualization, concept of Virtualization
overview of Virtualization, concept of VirtualizationRajan yadav
 
如何办理朴茨茅斯大学毕业证书学位证书成绩单?
如何办理朴茨茅斯大学毕业证书学位证书成绩单?如何办理朴茨茅斯大学毕业证书学位证书成绩单?
如何办理朴茨茅斯大学毕业证书学位证书成绩单?krc0yvm5
 
Generalities about NFT , as a new technology
Generalities about NFT , as a new technologyGeneralities about NFT , as a new technology
Generalities about NFT , as a new technologysoufianbouktaib1
 
Tungsten Webinar: v6 & v7 Release Recap, and Beyond
Tungsten Webinar: v6 & v7 Release Recap, and BeyondTungsten Webinar: v6 & v7 Release Recap, and Beyond
Tungsten Webinar: v6 & v7 Release Recap, and BeyondContinuent
 

Último (10)

SQL Server on Azure VM datasheet.dsadaspptx
SQL Server on Azure VM datasheet.dsadaspptxSQL Server on Azure VM datasheet.dsadaspptx
SQL Server on Azure VM datasheet.dsadaspptx
 
Section 3 - Technical Sales Foundations for IBM QRadar for Cloud (QRoC)V1 P10...
Section 3 - Technical Sales Foundations for IBM QRadar for Cloud (QRoC)V1 P10...Section 3 - Technical Sales Foundations for IBM QRadar for Cloud (QRoC)V1 P10...
Section 3 - Technical Sales Foundations for IBM QRadar for Cloud (QRoC)V1 P10...
 
APNIC Update and RIR Policies for ccTLDs, presented at APTLD 85
APNIC Update and RIR Policies for ccTLDs, presented at APTLD 85APNIC Update and RIR Policies for ccTLDs, presented at APTLD 85
APNIC Update and RIR Policies for ccTLDs, presented at APTLD 85
 
Mary Meeker Internet Trends Report for 2019
Mary Meeker Internet Trends Report for 2019Mary Meeker Internet Trends Report for 2019
Mary Meeker Internet Trends Report for 2019
 
Google-Next-Madrid-BBVA-Research inv.pdf
Google-Next-Madrid-BBVA-Research inv.pdfGoogle-Next-Madrid-BBVA-Research inv.pdf
Google-Next-Madrid-BBVA-Research inv.pdf
 
Benefits of Fiber Internet vs. Traditional Internet.pptx
Benefits of Fiber Internet vs. Traditional Internet.pptxBenefits of Fiber Internet vs. Traditional Internet.pptx
Benefits of Fiber Internet vs. Traditional Internet.pptx
 
overview of Virtualization, concept of Virtualization
overview of Virtualization, concept of Virtualizationoverview of Virtualization, concept of Virtualization
overview of Virtualization, concept of Virtualization
 
如何办理朴茨茅斯大学毕业证书学位证书成绩单?
如何办理朴茨茅斯大学毕业证书学位证书成绩单?如何办理朴茨茅斯大学毕业证书学位证书成绩单?
如何办理朴茨茅斯大学毕业证书学位证书成绩单?
 
Generalities about NFT , as a new technology
Generalities about NFT , as a new technologyGeneralities about NFT , as a new technology
Generalities about NFT , as a new technology
 
Tungsten Webinar: v6 & v7 Release Recap, and Beyond
Tungsten Webinar: v6 & v7 Release Recap, and BeyondTungsten Webinar: v6 & v7 Release Recap, and Beyond
Tungsten Webinar: v6 & v7 Release Recap, and Beyond
 

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