Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

Truly modular AngularJS

Building application with Webpack

Nik Butenko

@nkbtnk, github.com/nkbt

What makes a good and consistent code?

Small, independent, easy to understand

code modules

Static code analysis

Code style guide

Code-nazi in your team

Code review

CI/CD

It is always good. But...

Not always easy to setup

Requires extra tooling and effort

Slows down initial development cycle

Thus [almost] always skipped at the start

And that is OK, because...

Compiled languages

Javascript naturally came to be compiled first... At last!

Remember CoffeeScript

And why it was not OK?

Sourcemaps!

Now you can compile JS and debug it with sourcemaps

With any syntax you like

ES6, ES7, ES2025

Why compiled?

Babel JS

https://babeljs.io

Webpack

https://webpack.github.io

ESLint

http://eslint.org/

ESLint Loader

https://github.com/MoOx/eslint-loader

Let's bring it to the compilation!

Simple AngularJS app

src / index.html

src / app.js

src / hello / index.js

src / hello / hello_directive.js

src / hello / hello.html

src / hello / hello.css

npm start

Let's change some code

What if I make some mistake?

> SHOWTIME <

Thanks!

https://github.com/nkbt/ng-modular

https://github.com/packetloop/angular-webpack

@nkbtnk