Front-end development iz

ugla .NET programeraBranko Radičević, @bradicev

O meni

• Microsoft & .NET

• 7+ godina razvoj enterprise aplikacija

• ASP.NET MVC je zakon

• Uglavnom izbegavao JavaScript

Pogled unapred

• Moja priča

• Kako početi?

• Zašto raditi na drugi način?

• HTML

• CSS

• JavaScript

Šta je FE developmen

t

• jQuery(“#id”).show()

• jQuery(“#id”).show(500)Šta je FE developmen

t

Prvo FE iskustvo

• Pre 2-3 godine

• Backbone, RequireJs, Knockout

• MVC (Razor) je zakon, JavaScript umire

Prvo pravo FE iskustvo -

Ryanair

• Angular

• NodeJs

• Gulp

• Bower

• NPM

Prvo pravo FE iskustvo -

Ryanair

• WebStorm

• ECMAScript 6

• GIT & Console

• Angular 2.0

• Karma/Jasmine

Programski jezik

• ECMAScript 6

• CoffeeScript

• TypeScript

Task Runner

• configuration vs code• file based vs

streaming

GULP

• gulp.task

• gulp.src

• gulp.dest

• gulp.watch

• https://goo.gl/kEqFnaJavaScript Build Automation With Gulp.js – John Papa

GULP

gulp.task(‘minify', function() {

var stream = gulp.src('client/**/*.js')

.pipe(minify())

.pipe(gulp.dest('build'));

return stream;

});

GULP

• browser-sync

• gulp-inject

• wiredep

• gulp-sourcemaps

• gulp-git

• karma-coverage

Razvojno okruženje

• WebStorm

• Visual Studio

• Sublime Text

• VS Code

Visual Studio

• File > Open > Web Site

• Web Essentials

• Console Launcher

Version control

• GIT

• SVN

• TFS

Yeoman• generator-hottowel

• generator-angular-fullstack

• generator-m-ionic

Kako početi• Izabrati razvojno

okruženje

• Izabrati Yeoman template

• Počni da kodiraš

• Testiraj

Za kraj

• HTLM5 aplikacija

• FE alati i praksa

• Kako početi

• Moj pogled na FE development pre i sad

• Zašto raditi na drugi način?