SlideShare una empresa de Scribd logo
1 de 43
FRONT-END RICH JAVASCRIPT
APPLICATION CREATION
BY O.PROHONNYI
THEORY
ABOUT
FRONT-END DEVELOPMENT
In computer science, the front end is
responsible for collecting input in various forms
from the user and processing it to conform to a
specification the back end can use.
The front end is an interface between the user
and the back end.
wikipedia.org
ABOUT
HTML
HTML or HyperText Markup Language is the
standard markup language used to create web
pages.
HTML is written in the form of HTML elements
consisting of tags enclosed in angle brackets (like
<html>).
wikipedia.org
ABOUT
CSS
Cascading Style Sheets (CSS) is a style sheet
language used for describing the look and
formatting of a document written in a markup
language.
CSS is designed primarily to enable the separation of
document content from document presentation,
including elements such as the layout, colors, and
fonts.
wikipedia.org
ABOUT
JAVASCRIPT
JavaScript (JS) is a dynamic computer
programming language. It is most commonly
used as part of web browsers, whose
implementations allow client-side scripts to
interact with the user, control the browser,
communicate asynchronously, and alter the
document content that is displayed.
wikipedia.org
WORKSHOP
PRESENTATION
ABOUT
JQUERY
jQuery is a cross-platform JavaScript library
designed to simplify the client-side scripting of
HTML.
jQuery's syntax is designed to make it easier to
navigate a document, select DOM elements, create
animations, handle events, and develop Ajax
applications.
wikipedia.org
Ajax (Asynchronous JavaScript and XML) is a
group of interrelated Web development
techniques used on the client-side to create
asynchronous Web applications.
With Ajax, Web applications can send data to, and
retrieve data from, a server asynchronously (in the
background) without interfering with the display and
behavior of the existing page.
wikipedia.org
ABOUT
BACKBONE.JS
Backbone.js is a JavaScript library with a
RESTful JSON interface and is based on the
model–view–presenter (MVP) application
design paradigm.
Backbone is known for being lightweight, as its only
dependency is on one JavaScript library,
Underscore.js.
wikipedia.org
Model–view–presenter (MVP) is a derivative of
the MVC architectural pattern, also used
mostly for building user interfaces.
In MVP the presenter assumes the functionality of the
"middle-man". In MVP, all presentation logic is pushed
to the presenter. Eventually, the model becomes
strictly a domain model.
wikipedia.org
Underscore.js is a JavaScript library which
provides utility functions for common
programming tasks.
It is comparable to features provided by Prototype.js
and the Ruby language, but opts for a functional
programming design instead of extending object
prototypes.
wikipedia.org
PRACTICE
STEP 1
BASIC PAGE STRUCTURE
STEP 2
MARKUP/STYLING
STEP 3
APP ENGINE
Model:
- Post
- PostsList (Collection:Post)
View:
- PostView
- PostsListView
Router:
-
Backbone.js resources:
- http://backbonejs.org/ (http://backbonejs.ru/)
- http://underscorejs.org/
- http://backbonetutorials.com/
- http://code.tutsplus.com/tutorials/getting-started-with-
backbonejs--net-19751
- http://backbonetraining.net/resources
OLEKSII PROHONNYI
oprogonniy@gmail.com
fb.com/oprohonnyi
Sources: https://goo.gl/Gb5PFB

Más contenido relacionado

La actualidad más candente

W4A Keynote 2008
W4A Keynote 2008W4A Keynote 2008
W4A Keynote 2008guest5e8d3d
 
The Importance Things of Full Stack Development
The Importance Things of Full Stack DevelopmentThe Importance Things of Full Stack Development
The Importance Things of Full Stack DevelopmentMike Taylor
 
M6 l7-java script-handout
M6 l7-java script-handoutM6 l7-java script-handout
M6 l7-java script-handoutNolboo Kim
 
Web Development Skill Map
Web Development Skill MapWeb Development Skill Map
Web Development Skill MapMaloclm Totos
 
Top 10 Most Popular JavaScript Frameworks | Which JavaScript Framework to lea...
Top 10 Most Popular JavaScript Frameworks | Which JavaScript Framework to lea...Top 10 Most Popular JavaScript Frameworks | Which JavaScript Framework to lea...
Top 10 Most Popular JavaScript Frameworks | Which JavaScript Framework to lea...Edureka!
 
Java Database Connectivity
Java Database ConnectivityJava Database Connectivity
Java Database Connectivityireneconje
 
Introduction to ASP.NET
Introduction to ASP.NETIntroduction to ASP.NET
Introduction to ASP.NETJoni
 
Rachit experinced .net
Rachit experinced .netRachit experinced .net
Rachit experinced .netrachit pandey
 
Modern UI Architecture_ Trends and Technologies in Web Development
Modern UI Architecture_ Trends and Technologies in Web DevelopmentModern UI Architecture_ Trends and Technologies in Web Development
Modern UI Architecture_ Trends and Technologies in Web DevelopmentSuresh Patidar
 
AJAX Frameworks
AJAX FrameworksAJAX Frameworks
AJAX Frameworksshank
 

La actualidad más candente (15)

W4A Keynote 2008
W4A Keynote 2008W4A Keynote 2008
W4A Keynote 2008
 
The Importance Things of Full Stack Development
The Importance Things of Full Stack DevelopmentThe Importance Things of Full Stack Development
The Importance Things of Full Stack Development
 
M6 l7-java script-handout
M6 l7-java script-handoutM6 l7-java script-handout
M6 l7-java script-handout
 
Web Development Skill Map
Web Development Skill MapWeb Development Skill Map
Web Development Skill Map
 
Top 10 Most Popular JavaScript Frameworks | Which JavaScript Framework to lea...
Top 10 Most Popular JavaScript Frameworks | Which JavaScript Framework to lea...Top 10 Most Popular JavaScript Frameworks | Which JavaScript Framework to lea...
Top 10 Most Popular JavaScript Frameworks | Which JavaScript Framework to lea...
 
API
APIAPI
API
 
Java Database Connectivity
Java Database ConnectivityJava Database Connectivity
Java Database Connectivity
 
Introduction to ASP.NET
Introduction to ASP.NETIntroduction to ASP.NET
Introduction to ASP.NET
 
Niket bhatt
Niket bhattNiket bhatt
Niket bhatt
 
Rachit experinced .net
Rachit experinced .netRachit experinced .net
Rachit experinced .net
 
Resume.doc
Resume.docResume.doc
Resume.doc
 
Itvv project ppt
Itvv project pptItvv project ppt
Itvv project ppt
 
Modern UI Architecture_ Trends and Technologies in Web Development
Modern UI Architecture_ Trends and Technologies in Web DevelopmentModern UI Architecture_ Trends and Technologies in Web Development
Modern UI Architecture_ Trends and Technologies in Web Development
 
Introduction To Flex
Introduction To FlexIntroduction To Flex
Introduction To Flex
 
AJAX Frameworks
AJAX FrameworksAJAX Frameworks
AJAX Frameworks
 

Destacado

Dive into Angular, part 5: Experience
Dive into Angular, part 5: ExperienceDive into Angular, part 5: Experience
Dive into Angular, part 5: ExperienceOleksii Prohonnyi
 
Разработка веб-сайта. Сайт. Зачем он?
Разработка веб-сайта. Сайт. Зачем он?Разработка веб-сайта. Сайт. Зачем он?
Разработка веб-сайта. Сайт. Зачем он?Oleksii Prohonnyi
 
Conference DotJS 2015 Paris review
Conference DotJS 2015 Paris reviewConference DotJS 2015 Paris review
Conference DotJS 2015 Paris reviewOleksii Prohonnyi
 
Dive into Angular, part 3: Performance
Dive into Angular, part 3: PerformanceDive into Angular, part 3: Performance
Dive into Angular, part 3: PerformanceOleksii Prohonnyi
 
Exploradores.caroes
Exploradores.caroesExploradores.caroes
Exploradores.caroesmaryespitia
 
Как создать сайт за 2 часа? (Wordpress)
Как создать сайт за 2 часа? (Wordpress)Как создать сайт за 2 часа? (Wordpress)
Как создать сайт за 2 часа? (Wordpress)Oleksii Prohonnyi
 
Chorme devtools
Chorme devtoolsChorme devtools
Chorme devtools傑倫 鍾
 
Utility libraries to make your life easier
Utility libraries to make your life easierUtility libraries to make your life easier
Utility libraries to make your life easierOleksii Prohonnyi
 
D3.JS Tips & Tricks (export to svg, crossfilter, maps etc.)
D3.JS Tips & Tricks (export to svg, crossfilter, maps etc.)D3.JS Tips & Tricks (export to svg, crossfilter, maps etc.)
D3.JS Tips & Tricks (export to svg, crossfilter, maps etc.)Oleksii Prohonnyi
 
Dive into Angular, part 1: Introduction
Dive into Angular, part 1: IntroductionDive into Angular, part 1: Introduction
Dive into Angular, part 1: IntroductionOleksii Prohonnyi
 
Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1yoshikawa_t
 
Google Chrome DevTools features overview
Google Chrome DevTools features overviewGoogle Chrome DevTools features overview
Google Chrome DevTools features overviewOleksii Prohonnyi
 
JavaScript Presentation Frameworks and Libraries
JavaScript Presentation Frameworks and LibrariesJavaScript Presentation Frameworks and Libraries
JavaScript Presentation Frameworks and LibrariesOleksii Prohonnyi
 
Dive into Angular, part 4: Angular 2.0
Dive into Angular, part 4: Angular 2.0Dive into Angular, part 4: Angular 2.0
Dive into Angular, part 4: Angular 2.0Oleksii Prohonnyi
 

Destacado (20)

Dive into Angular, part 5: Experience
Dive into Angular, part 5: ExperienceDive into Angular, part 5: Experience
Dive into Angular, part 5: Experience
 
Разработка веб-сайта. Сайт. Зачем он?
Разработка веб-сайта. Сайт. Зачем он?Разработка веб-сайта. Сайт. Зачем он?
Разработка веб-сайта. Сайт. Зачем он?
 
Cycle.js overview
Cycle.js overviewCycle.js overview
Cycle.js overview
 
Conference DotJS 2015 Paris review
Conference DotJS 2015 Paris reviewConference DotJS 2015 Paris review
Conference DotJS 2015 Paris review
 
Dive into Angular, part 3: Performance
Dive into Angular, part 3: PerformanceDive into Angular, part 3: Performance
Dive into Angular, part 3: Performance
 
Exploradores.caroes
Exploradores.caroesExploradores.caroes
Exploradores.caroes
 
Как создать сайт за 2 часа? (Wordpress)
Как создать сайт за 2 часа? (Wordpress)Как создать сайт за 2 часа? (Wordpress)
Как создать сайт за 2 часа? (Wordpress)
 
Chorme devtools
Chorme devtoolsChorme devtools
Chorme devtools
 
Moment.js overview
Moment.js overviewMoment.js overview
Moment.js overview
 
Asm.js introduction
Asm.js introductionAsm.js introduction
Asm.js introduction
 
Utility libraries to make your life easier
Utility libraries to make your life easierUtility libraries to make your life easier
Utility libraries to make your life easier
 
D3.JS Tips & Tricks (export to svg, crossfilter, maps etc.)
D3.JS Tips & Tricks (export to svg, crossfilter, maps etc.)D3.JS Tips & Tricks (export to svg, crossfilter, maps etc.)
D3.JS Tips & Tricks (export to svg, crossfilter, maps etc.)
 
OpenLayer's basics
OpenLayer's basicsOpenLayer's basics
OpenLayer's basics
 
Dive into Angular, part 1: Introduction
Dive into Angular, part 1: IntroductionDive into Angular, part 1: Introduction
Dive into Angular, part 1: Introduction
 
Bower introduction
Bower introductionBower introduction
Bower introduction
 
Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1Chrome DevTools Awesome 10 Features +1
Chrome DevTools Awesome 10 Features +1
 
Google Chrome DevTools features overview
Google Chrome DevTools features overviewGoogle Chrome DevTools features overview
Google Chrome DevTools features overview
 
Introduction to D3.js
Introduction to D3.jsIntroduction to D3.js
Introduction to D3.js
 
JavaScript Presentation Frameworks and Libraries
JavaScript Presentation Frameworks and LibrariesJavaScript Presentation Frameworks and Libraries
JavaScript Presentation Frameworks and Libraries
 
Dive into Angular, part 4: Angular 2.0
Dive into Angular, part 4: Angular 2.0Dive into Angular, part 4: Angular 2.0
Dive into Angular, part 4: Angular 2.0
 

Similar a Create Front-End Apps with JavaScript

Web 2 0 Requirements
Web 2 0 RequirementsWeb 2 0 Requirements
Web 2 0 RequirementsSreekanth K
 
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
 
Exploring the Power of Frontend Technologies: Enhancing User Experience and D...
Exploring the Power of Frontend Technologies: Enhancing User Experience and D...Exploring the Power of Frontend Technologies: Enhancing User Experience and D...
Exploring the Power of Frontend Technologies: Enhancing User Experience and D...aTeam soft solutions
 
Introduction to Frontend Technologies
Introduction to Frontend TechnologiesIntroduction to Frontend Technologies
Introduction to Frontend TechnologiesaTeam soft solutions
 
Exploring the Dynamic Landscape of Software Development in Houston
Exploring the Dynamic Landscape of Software Development in HoustonExploring the Dynamic Landscape of Software Development in Houston
Exploring the Dynamic Landscape of Software Development in HoustonaTeam soft solutions
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | IntroductionJohnTaieb
 
Full Stack Web Development
Full Stack Web DevelopmentFull Stack Web Development
Full Stack Web DevelopmentSWAGATHCHOWDARY1
 
Javascrip frameworks
Javascrip frameworksJavascrip frameworks
Javascrip frameworksSumit Odich
 
Fundamentals of Web building
Fundamentals of Web buildingFundamentals of Web building
Fundamentals of Web buildingRC Morales
 
Front-End Web Development
Front-End Web DevelopmentFront-End Web Development
Front-End Web DevelopmentYash Sati
 
Introduction to mean and mern || Event by DSC UNIDEB
Introduction to mean and mern || Event by DSC UNIDEBIntroduction to mean and mern || Event by DSC UNIDEB
Introduction to mean and mern || Event by DSC UNIDEBMuhammad Raza
 
Introduction to Frontend Web Development
Introduction to Frontend Web DevelopmentIntroduction to Frontend Web Development
Introduction to Frontend Web Developmentkavsinghta
 
Web 2 0 Fullfeatures
Web 2 0 FullfeaturesWeb 2 0 Fullfeatures
Web 2 0 Fullfeaturesvsnmurthy
 
Web 2 0 Fullfeatures
Web 2 0 FullfeaturesWeb 2 0 Fullfeatures
Web 2 0 Fullfeaturesguest9b7f4753
 

Similar a Create Front-End Apps with JavaScript (20)

Web 2 0 Requirements
Web 2 0 RequirementsWeb 2 0 Requirements
Web 2 0 Requirements
 
It ppt.pptx
It ppt.pptxIt ppt.pptx
It ppt.pptx
 
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
 
API
APIAPI
API
 
Exploring the Power of Frontend Technologies: Enhancing User Experience and D...
Exploring the Power of Frontend Technologies: Enhancing User Experience and D...Exploring the Power of Frontend Technologies: Enhancing User Experience and D...
Exploring the Power of Frontend Technologies: Enhancing User Experience and D...
 
Introduction to Frontend Technologies
Introduction to Frontend TechnologiesIntroduction to Frontend Technologies
Introduction to Frontend Technologies
 
Exploring the Dynamic Landscape of Software Development in Houston
Exploring the Dynamic Landscape of Software Development in HoustonExploring the Dynamic Landscape of Software Development in Houston
Exploring the Dynamic Landscape of Software Development in Houston
 
Career guideline
Career guidelineCareer guideline
Career guideline
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
 
Full Stack Web Development
Full Stack Web DevelopmentFull Stack Web Development
Full Stack Web Development
 
Javascrip frameworks
Javascrip frameworksJavascrip frameworks
Javascrip frameworks
 
Fundamentals of Web building
Fundamentals of Web buildingFundamentals of Web building
Fundamentals of Web building
 
Front-End Web Development
Front-End Web DevelopmentFront-End Web Development
Front-End Web Development
 
Introduction to mean and mern || Event by DSC UNIDEB
Introduction to mean and mern || Event by DSC UNIDEBIntroduction to mean and mern || Event by DSC UNIDEB
Introduction to mean and mern || Event by DSC UNIDEB
 
web devs ppt.ppsx
web devs ppt.ppsxweb devs ppt.ppsx
web devs ppt.ppsx
 
Introduction to Frontend Web Development
Introduction to Frontend Web DevelopmentIntroduction to Frontend Web Development
Introduction to Frontend Web Development
 
Web 2 0 Fullfeatures
Web 2 0 FullfeaturesWeb 2 0 Fullfeatures
Web 2 0 Fullfeatures
 
Web 2 0 Fullfeatures
Web 2 0 FullfeaturesWeb 2 0 Fullfeatures
Web 2 0 Fullfeatures
 
Advanced JavaScript
Advanced JavaScriptAdvanced JavaScript
Advanced JavaScript
 
Web 2 0 Fullfeatures
Web 2 0 FullfeaturesWeb 2 0 Fullfeatures
Web 2 0 Fullfeatures
 

Más de Oleksii Prohonnyi

Dive into Angular, part 2: Architecture
Dive into Angular, part 2: ArchitectureDive into Angular, part 2: Architecture
Dive into Angular, part 2: ArchitectureOleksii Prohonnyi
 
Code review process with JetBrains UpSource
Code review process with JetBrains UpSourceCode review process with JetBrains UpSource
Code review process with JetBrains UpSourceOleksii Prohonnyi
 
Front-end development introduction (JavaScript). Part 2
Front-end development introduction (JavaScript). Part 2Front-end development introduction (JavaScript). Part 2
Front-end development introduction (JavaScript). Part 2Oleksii Prohonnyi
 
Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1Oleksii Prohonnyi
 
Test-driven development & Behavior-driven development basics
Test-driven development & Behavior-driven development basicsTest-driven development & Behavior-driven development basics
Test-driven development & Behavior-driven development basicsOleksii Prohonnyi
 
JavaScript Coding Guidelines
JavaScript Coding GuidelinesJavaScript Coding Guidelines
JavaScript Coding GuidelinesOleksii Prohonnyi
 
Database Optimization (MySQL)
Database Optimization (MySQL)Database Optimization (MySQL)
Database Optimization (MySQL)Oleksii Prohonnyi
 
Usability of UI Design (motivation, heuristics, tools)
Usability of UI Design (motivation, heuristics, tools)Usability of UI Design (motivation, heuristics, tools)
Usability of UI Design (motivation, heuristics, tools)Oleksii Prohonnyi
 

Más de Oleksii Prohonnyi (10)

Dive into Angular, part 2: Architecture
Dive into Angular, part 2: ArchitectureDive into Angular, part 2: Architecture
Dive into Angular, part 2: Architecture
 
Code review process with JetBrains UpSource
Code review process with JetBrains UpSourceCode review process with JetBrains UpSource
Code review process with JetBrains UpSource
 
BEM methodology overview
BEM methodology overviewBEM methodology overview
BEM methodology overview
 
Front-end development introduction (JavaScript). Part 2
Front-end development introduction (JavaScript). Part 2Front-end development introduction (JavaScript). Part 2
Front-end development introduction (JavaScript). Part 2
 
Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1
 
Test-driven development & Behavior-driven development basics
Test-driven development & Behavior-driven development basicsTest-driven development & Behavior-driven development basics
Test-driven development & Behavior-driven development basics
 
JavaScript Coding Guidelines
JavaScript Coding GuidelinesJavaScript Coding Guidelines
JavaScript Coding Guidelines
 
Database Optimization (MySQL)
Database Optimization (MySQL)Database Optimization (MySQL)
Database Optimization (MySQL)
 
PHPCS (PHP Code Sniffer)
PHPCS (PHP Code Sniffer)PHPCS (PHP Code Sniffer)
PHPCS (PHP Code Sniffer)
 
Usability of UI Design (motivation, heuristics, tools)
Usability of UI Design (motivation, heuristics, tools)Usability of UI Design (motivation, heuristics, tools)
Usability of UI Design (motivation, heuristics, tools)
 

Último

Sanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfSanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfsanyamsingh5019
 
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️9953056974 Low Rate Call Girls In Saket, Delhi NCR
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxiammrhaywood
 
History Class XII Ch. 3 Kinship, Caste and Class (1).pptx
History Class XII Ch. 3 Kinship, Caste and Class (1).pptxHistory Class XII Ch. 3 Kinship, Caste and Class (1).pptx
History Class XII Ch. 3 Kinship, Caste and Class (1).pptxsocialsciencegdgrohi
 
Introduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher EducationIntroduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher Educationpboyjonauth
 
Alper Gobel In Media Res Media Component
Alper Gobel In Media Res Media ComponentAlper Gobel In Media Res Media Component
Alper Gobel In Media Res Media ComponentInMediaRes1
 
EPANDING THE CONTENT OF AN OUTLINE using notes.pptx
EPANDING THE CONTENT OF AN OUTLINE using notes.pptxEPANDING THE CONTENT OF AN OUTLINE using notes.pptx
EPANDING THE CONTENT OF AN OUTLINE using notes.pptxRaymartEstabillo3
 
Presiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha electionsPresiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha electionsanshu789521
 
How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17Celine George
 
Proudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptxProudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptxthorishapillay1
 
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdfSoniaTolstoy
 
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxSayali Powar
 
The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13Steve Thomason
 
Final demo Grade 9 for demo Plan dessert.pptx
Final demo Grade 9 for demo Plan dessert.pptxFinal demo Grade 9 for demo Plan dessert.pptx
Final demo Grade 9 for demo Plan dessert.pptxAvyJaneVismanos
 
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...Marc Dusseiller Dusjagr
 
Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17Celine George
 
Crayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon ACrayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon AUnboundStockton
 
internship ppt on smartinternz platform as salesforce developer
internship ppt on smartinternz platform as salesforce developerinternship ppt on smartinternz platform as salesforce developer
internship ppt on smartinternz platform as salesforce developerunnathinaik
 

Último (20)

Sanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfSanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdf
 
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
 
Model Call Girl in Bikash Puri Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Bikash Puri  Delhi reach out to us at 🔝9953056974🔝Model Call Girl in Bikash Puri  Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Bikash Puri Delhi reach out to us at 🔝9953056974🔝
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
 
History Class XII Ch. 3 Kinship, Caste and Class (1).pptx
History Class XII Ch. 3 Kinship, Caste and Class (1).pptxHistory Class XII Ch. 3 Kinship, Caste and Class (1).pptx
History Class XII Ch. 3 Kinship, Caste and Class (1).pptx
 
Introduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher EducationIntroduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher Education
 
Alper Gobel In Media Res Media Component
Alper Gobel In Media Res Media ComponentAlper Gobel In Media Res Media Component
Alper Gobel In Media Res Media Component
 
EPANDING THE CONTENT OF AN OUTLINE using notes.pptx
EPANDING THE CONTENT OF AN OUTLINE using notes.pptxEPANDING THE CONTENT OF AN OUTLINE using notes.pptx
EPANDING THE CONTENT OF AN OUTLINE using notes.pptx
 
Presiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha electionsPresiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha elections
 
How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17How to Configure Email Server in Odoo 17
How to Configure Email Server in Odoo 17
 
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
 
Proudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptxProudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptx
 
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
 
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
 
The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13
 
Final demo Grade 9 for demo Plan dessert.pptx
Final demo Grade 9 for demo Plan dessert.pptxFinal demo Grade 9 for demo Plan dessert.pptx
Final demo Grade 9 for demo Plan dessert.pptx
 
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
 
Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17
 
Crayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon ACrayon Activity Handout For the Crayon A
Crayon Activity Handout For the Crayon A
 
internship ppt on smartinternz platform as salesforce developer
internship ppt on smartinternz platform as salesforce developerinternship ppt on smartinternz platform as salesforce developer
internship ppt on smartinternz platform as salesforce developer
 

Create Front-End Apps with JavaScript

  • 1. FRONT-END RICH JAVASCRIPT APPLICATION CREATION BY O.PROHONNYI
  • 4.
  • 5. In computer science, the front end is responsible for collecting input in various forms from the user and processing it to conform to a specification the back end can use. The front end is an interface between the user and the back end. wikipedia.org
  • 6.
  • 8.
  • 9. HTML or HyperText Markup Language is the standard markup language used to create web pages. HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>). wikipedia.org
  • 11.
  • 12. Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. CSS is designed primarily to enable the separation of document content from document presentation, including elements such as the layout, colors, and fonts. wikipedia.org
  • 13.
  • 15.
  • 16. JavaScript (JS) is a dynamic computer programming language. It is most commonly used as part of web browsers, whose implementations allow client-side scripts to interact with the user, control the browser, communicate asynchronously, and alter the document content that is displayed. wikipedia.org
  • 17.
  • 19.
  • 20.
  • 22. jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. wikipedia.org
  • 23. Ajax (Asynchronous JavaScript and XML) is a group of interrelated Web development techniques used on the client-side to create asynchronous Web applications. With Ajax, Web applications can send data to, and retrieve data from, a server asynchronously (in the background) without interfering with the display and behavior of the existing page. wikipedia.org
  • 24.
  • 26. Backbone.js is a JavaScript library with a RESTful JSON interface and is based on the model–view–presenter (MVP) application design paradigm. Backbone is known for being lightweight, as its only dependency is on one JavaScript library, Underscore.js. wikipedia.org
  • 27. Model–view–presenter (MVP) is a derivative of the MVC architectural pattern, also used mostly for building user interfaces. In MVP the presenter assumes the functionality of the "middle-man". In MVP, all presentation logic is pushed to the presenter. Eventually, the model becomes strictly a domain model. wikipedia.org
  • 28.
  • 29. Underscore.js is a JavaScript library which provides utility functions for common programming tasks. It is comparable to features provided by Prototype.js and the Ruby language, but opts for a functional programming design instead of extending object prototypes. wikipedia.org
  • 30.
  • 32. STEP 1 BASIC PAGE STRUCTURE
  • 33.
  • 35.
  • 37. Model: - Post - PostsList (Collection:Post) View: - PostView - PostsListView Router: -
  • 38.
  • 39.
  • 40.
  • 41. Backbone.js resources: - http://backbonejs.org/ (http://backbonejs.ru/) - http://underscorejs.org/ - http://backbonetutorials.com/ - http://code.tutsplus.com/tutorials/getting-started-with- backbonejs--net-19751 - http://backbonetraining.net/resources
  • 42.