SlideShare une entreprise Scribd logo
1  sur  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

Contenu connexe

Tendances

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
 

Tendances (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
 

En vedette

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
 

En vedette (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
 

Similaire à Front-end rich JavaScript application creation (Backbone.js)

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
 

Similaire à Front-end rich JavaScript application creation (Backbone.js) (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
 

Plus 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
 

Plus 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)
 

Dernier

Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...ZurliaSoop
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17Celine George
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...Poonam Aher Patil
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxDr. Sarita Anand
 
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptxCOMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptxannathomasp01
 
FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024Elizabeth Walsh
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfAdmir Softic
 
On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsMebane Rash
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxheathfieldcps1
 
Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfPoh-Sun Goh
 
Interdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxInterdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxPooja Bhuva
 
How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSCeline George
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptxMaritesTamaniVerdade
 
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Pooja Bhuva
 
Plant propagation: Sexual and Asexual propapagation.pptx
Plant propagation: Sexual and Asexual propapagation.pptxPlant propagation: Sexual and Asexual propapagation.pptx
Plant propagation: Sexual and Asexual propapagation.pptxUmeshTimilsina1
 
Towards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxTowards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxJisc
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentationcamerronhm
 
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfUGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfNirmal Dwivedi
 
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptxExploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptxPooja Bhuva
 

Dernier (20)

Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17
 
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptx
 
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptxCOMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
 
FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan Fellows
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
 
Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdf
 
Interdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxInterdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptx
 
How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POS
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
 
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
 
Plant propagation: Sexual and Asexual propapagation.pptx
Plant propagation: Sexual and Asexual propapagation.pptxPlant propagation: Sexual and Asexual propapagation.pptx
Plant propagation: Sexual and Asexual propapagation.pptx
 
Towards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxTowards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptx
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentation
 
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfUGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
 
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptxExploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
 

Front-end rich JavaScript application creation (Backbone.js)

  • 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.