SlideShare a Scribd company logo
1 of 13
Migrating UI-Sortable to Angular 2
Who am I?
How I got in!?
What is UI-Sortable?
● Bringing the
jQuery UI
Sortable
interaction to
Angular
● Yes we depend
on jQuery
● Single minified
cdn link ~245kB
The DOM tree ideal
<body>
<section> <aside><section><nav>
<html>
<article> <article> <article>
Angular 1 Hierarchy
<my-container>
<my-section> <my-ads><my-section><my-nav>
<my-app>
<my-directive> <my-directive> <my-directive>
Prototypical
$scope
Inheritance
How it felt
sometimes
$scope
flooding
$scope
flooding
Big Announcements...
It's aIt's a
GenocideGenocide
New fancyfancy naming concepts
The @Component tree ideal
<my-app-component>
<my-component1> <my-component2> <my-directive>
Pass only
properties
The
@Component
tree ideal
● Same rules for everything
● Layers of @components
● Strictly defined shared objects
● Strictly defined sub-@components
Mix and match v1 & v2
How should we name our libraries?

More Related Content

What's hot

ANGULAR JS TRAINING IN PUNE
ANGULAR JS TRAINING IN PUNEANGULAR JS TRAINING IN PUNE
ANGULAR JS TRAINING IN PUNEcncwebworld
 
Angular JS tutorial
Angular JS tutorialAngular JS tutorial
Angular JS tutorialcncwebworld
 
AngularJS + React
AngularJS + ReactAngularJS + React
AngularJS + Reactjustvamp
 
AngularJS Introduction
AngularJS IntroductionAngularJS Introduction
AngularJS IntroductionCarlos Morales
 
AngularJS - Architecture decisions in a large project 
AngularJS - Architecture decisionsin a large project AngularJS - Architecture decisionsin a large project 
AngularJS - Architecture decisions in a large project Elad Hirsch
 
React basic by Yoav Amit, Wix
React basic by Yoav Amit, Wix React basic by Yoav Amit, Wix
React basic by Yoav Amit, Wix Chen Lerner
 
JS Fest 2018. Илья Иванов. Введение в React-Native
JS Fest 2018. Илья Иванов. Введение в React-NativeJS Fest 2018. Илья Иванов. Введение в React-Native
JS Fest 2018. Илья Иванов. Введение в React-NativeJSFestUA
 
Consuming REST services with ActiveResource
Consuming REST services with ActiveResourceConsuming REST services with ActiveResource
Consuming REST services with ActiveResourceWolfram Arnold
 
Олег Слободской "UVP of CSSinJS and the future"
Олег Слободской "UVP of CSSinJS and the future"Олег Слободской "UVP of CSSinJS and the future"
Олег Слободской "UVP of CSSinJS and the future"Fwdays
 
Angular Lazy Loading and Resolve (Route Resolver)
Angular Lazy Loading and Resolve (Route Resolver)Angular Lazy Loading and Resolve (Route Resolver)
Angular Lazy Loading and Resolve (Route Resolver)Squash Apps Pvt Ltd
 
Angular vs React: Building modern SharePoint interfaces with SPFx
Angular vs React: Building modern SharePoint interfaces with SPFxAngular vs React: Building modern SharePoint interfaces with SPFx
Angular vs React: Building modern SharePoint interfaces with SPFxDimcho Tsanov
 
AngularJS vs React JS vs Node JS: Which is Best For Web Development ?
AngularJS vs React JS vs Node JS: Which is Best For Web Development ?AngularJS vs React JS vs Node JS: Which is Best For Web Development ?
AngularJS vs React JS vs Node JS: Which is Best For Web Development ?MarkupBox
 
AngularJS Basics
AngularJS BasicsAngularJS Basics
AngularJS BasicsRavi Mone
 
Angularjs - lazy loading techniques
Angularjs - lazy loading techniques Angularjs - lazy loading techniques
Angularjs - lazy loading techniques Nir Kaufman
 

What's hot (19)

BDD: WTF?@#
BDD: WTF?@#BDD: WTF?@#
BDD: WTF?@#
 
ANGULAR JS TRAINING IN PUNE
ANGULAR JS TRAINING IN PUNEANGULAR JS TRAINING IN PUNE
ANGULAR JS TRAINING IN PUNE
 
Angular JS tutorial
Angular JS tutorialAngular JS tutorial
Angular JS tutorial
 
Angular js
Angular jsAngular js
Angular js
 
AngularJS + React
AngularJS + ReactAngularJS + React
AngularJS + React
 
AngularJS Introduction
AngularJS IntroductionAngularJS Introduction
AngularJS Introduction
 
AngularJS - Architecture decisions in a large project 
AngularJS - Architecture decisionsin a large project AngularJS - Architecture decisionsin a large project 
AngularJS - Architecture decisions in a large project 
 
React basic by Yoav Amit, Wix
React basic by Yoav Amit, Wix React basic by Yoav Amit, Wix
React basic by Yoav Amit, Wix
 
Angular js 1.0-fundamentals
Angular js 1.0-fundamentalsAngular js 1.0-fundamentals
Angular js 1.0-fundamentals
 
JS Fest 2018. Илья Иванов. Введение в React-Native
JS Fest 2018. Илья Иванов. Введение в React-NativeJS Fest 2018. Илья Иванов. Введение в React-Native
JS Fest 2018. Илья Иванов. Введение в React-Native
 
5 angularjs features
5 angularjs features5 angularjs features
5 angularjs features
 
Consuming REST services with ActiveResource
Consuming REST services with ActiveResourceConsuming REST services with ActiveResource
Consuming REST services with ActiveResource
 
Олег Слободской "UVP of CSSinJS and the future"
Олег Слободской "UVP of CSSinJS and the future"Олег Слободской "UVP of CSSinJS and the future"
Олег Слободской "UVP of CSSinJS and the future"
 
Angular Lazy Loading and Resolve (Route Resolver)
Angular Lazy Loading and Resolve (Route Resolver)Angular Lazy Loading and Resolve (Route Resolver)
Angular Lazy Loading and Resolve (Route Resolver)
 
Angular vs React: Building modern SharePoint interfaces with SPFx
Angular vs React: Building modern SharePoint interfaces with SPFxAngular vs React: Building modern SharePoint interfaces with SPFx
Angular vs React: Building modern SharePoint interfaces with SPFx
 
AngularJS vs React JS vs Node JS: Which is Best For Web Development ?
AngularJS vs React JS vs Node JS: Which is Best For Web Development ?AngularJS vs React JS vs Node JS: Which is Best For Web Development ?
AngularJS vs React JS vs Node JS: Which is Best For Web Development ?
 
AngularJS Basics
AngularJS BasicsAngularJS Basics
AngularJS Basics
 
Introduction to AngularJs
Introduction to AngularJsIntroduction to AngularJs
Introduction to AngularJs
 
Angularjs - lazy loading techniques
Angularjs - lazy loading techniques Angularjs - lazy loading techniques
Angularjs - lazy loading techniques
 

Viewers also liked

Peggy angular 2 in meteor
Peggy   angular 2 in meteorPeggy   angular 2 in meteor
Peggy angular 2 in meteorLearningTech
 
Adventures with Angular 2
Adventures with Angular 2Adventures with Angular 2
Adventures with Angular 2Dragos Ionita
 
Angular2 workshop
Angular2 workshopAngular2 workshop
Angular2 workshopNir Kaufman
 
Building Universal Applications with Angular 2
Building Universal Applications with Angular 2Building Universal Applications with Angular 2
Building Universal Applications with Angular 2Minko Gechev
 
Angular 2 overview
Angular 2 overviewAngular 2 overview
Angular 2 overviewJesse Warden
 
Angular2 - getting-ready
Angular2 - getting-ready Angular2 - getting-ready
Angular2 - getting-ready Nir Kaufman
 

Viewers also liked (6)

Peggy angular 2 in meteor
Peggy   angular 2 in meteorPeggy   angular 2 in meteor
Peggy angular 2 in meteor
 
Adventures with Angular 2
Adventures with Angular 2Adventures with Angular 2
Adventures with Angular 2
 
Angular2 workshop
Angular2 workshopAngular2 workshop
Angular2 workshop
 
Building Universal Applications with Angular 2
Building Universal Applications with Angular 2Building Universal Applications with Angular 2
Building Universal Applications with Angular 2
 
Angular 2 overview
Angular 2 overviewAngular 2 overview
Angular 2 overview
 
Angular2 - getting-ready
Angular2 - getting-ready Angular2 - getting-ready
Angular2 - getting-ready
 

Similar to Migrating UI-Sortable to Angular 2

NinjaScript 2010-10-14
NinjaScript 2010-10-14NinjaScript 2010-10-14
NinjaScript 2010-10-14lrdesign
 
ME vs WEB - AngularJS Fundamentals
ME vs WEB - AngularJS FundamentalsME vs WEB - AngularJS Fundamentals
ME vs WEB - AngularJS FundamentalsAviran Cohen
 
React.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UIReact.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UIMarcin Grzywaczewski
 
React Lifecycle and Reconciliation
React Lifecycle and ReconciliationReact Lifecycle and Reconciliation
React Lifecycle and ReconciliationZhihao Li
 
gDayX 2013 - Advanced AngularJS - Nicolas Embleton
gDayX 2013 - Advanced AngularJS - Nicolas EmbletongDayX 2013 - Advanced AngularJS - Nicolas Embleton
gDayX 2013 - Advanced AngularJS - Nicolas EmbletonGeorge Nguyen
 
Building Better Web Apps with Angular.js (SXSW 2014)
Building Better Web Apps with Angular.js (SXSW 2014)Building Better Web Apps with Angular.js (SXSW 2014)
Building Better Web Apps with Angular.js (SXSW 2014)kbekessy
 
Gnizr Architecture (for developers)
Gnizr Architecture (for developers)Gnizr Architecture (for developers)
Gnizr Architecture (for developers)hchen1
 
Behat Workshop at WeLovePHP
Behat Workshop at WeLovePHPBehat Workshop at WeLovePHP
Behat Workshop at WeLovePHPMarcos Quesada
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2Knoldus Inc.
 
Angular%201%20to%20angular%202
Angular%201%20to%20angular%202Angular%201%20to%20angular%202
Angular%201%20to%20angular%202Ran Wahle
 
ReactJS vs AngularJS - Head to Head comparison
ReactJS vs AngularJS - Head to Head comparisonReactJS vs AngularJS - Head to Head comparison
ReactJS vs AngularJS - Head to Head comparison500Tech
 
jQuery 1.9 and 2.0 - Present and Future
jQuery 1.9 and 2.0 - Present and FuturejQuery 1.9 and 2.0 - Present and Future
jQuery 1.9 and 2.0 - Present and FutureRichard Worth
 
Angular2 + Ng-Lightning + Lightning Design System = Great Apps
Angular2 + Ng-Lightning + Lightning Design System = Great AppsAngular2 + Ng-Lightning + Lightning Design System = Great Apps
Angular2 + Ng-Lightning + Lightning Design System = Great AppsEmily Hurn
 
NinjaScript and Mizugumo 2011-02-05
NinjaScript and Mizugumo 2011-02-05NinjaScript and Mizugumo 2011-02-05
NinjaScript and Mizugumo 2011-02-05lrdesign
 

Similar to Migrating UI-Sortable to Angular 2 (20)

Angularjs 2
Angularjs 2 Angularjs 2
Angularjs 2
 
NinjaScript 2010-10-14
NinjaScript 2010-10-14NinjaScript 2010-10-14
NinjaScript 2010-10-14
 
ME vs WEB - AngularJS Fundamentals
ME vs WEB - AngularJS FundamentalsME vs WEB - AngularJS Fundamentals
ME vs WEB - AngularJS Fundamentals
 
React.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UIReact.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UI
 
Embedded d2w
Embedded d2wEmbedded d2w
Embedded d2w
 
React Lifecycle and Reconciliation
React Lifecycle and ReconciliationReact Lifecycle and Reconciliation
React Lifecycle and Reconciliation
 
gDayX 2013 - Advanced AngularJS - Nicolas Embleton
gDayX 2013 - Advanced AngularJS - Nicolas EmbletongDayX 2013 - Advanced AngularJS - Nicolas Embleton
gDayX 2013 - Advanced AngularJS - Nicolas Embleton
 
Building Better Web Apps with Angular.js (SXSW 2014)
Building Better Web Apps with Angular.js (SXSW 2014)Building Better Web Apps with Angular.js (SXSW 2014)
Building Better Web Apps with Angular.js (SXSW 2014)
 
Gnizr Architecture (for developers)
Gnizr Architecture (for developers)Gnizr Architecture (for developers)
Gnizr Architecture (for developers)
 
Behat Workshop at WeLovePHP
Behat Workshop at WeLovePHPBehat Workshop at WeLovePHP
Behat Workshop at WeLovePHP
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2
 
J query
J queryJ query
J query
 
Angular%201%20to%20angular%202
Angular%201%20to%20angular%202Angular%201%20to%20angular%202
Angular%201%20to%20angular%202
 
ReactJS vs AngularJS - Head to Head comparison
ReactJS vs AngularJS - Head to Head comparisonReactJS vs AngularJS - Head to Head comparison
ReactJS vs AngularJS - Head to Head comparison
 
Angular - Beginner
Angular - BeginnerAngular - Beginner
Angular - Beginner
 
jQuery 1.9 and 2.0 - Present and Future
jQuery 1.9 and 2.0 - Present and FuturejQuery 1.9 and 2.0 - Present and Future
jQuery 1.9 and 2.0 - Present and Future
 
Angular js-crash-course
Angular js-crash-courseAngular js-crash-course
Angular js-crash-course
 
Angular2 + Ng-Lightning + Lightning Design System = Great Apps
Angular2 + Ng-Lightning + Lightning Design System = Great AppsAngular2 + Ng-Lightning + Lightning Design System = Great Apps
Angular2 + Ng-Lightning + Lightning Design System = Great Apps
 
NinjaScript and Mizugumo 2011-02-05
NinjaScript and Mizugumo 2011-02-05NinjaScript and Mizugumo 2011-02-05
NinjaScript and Mizugumo 2011-02-05
 
Knockout js session
Knockout js sessionKnockout js session
Knockout js session
 

Migrating UI-Sortable to Angular 2