JQuery Conf Berlin - Ondrisek - From Java To AngularJS (without pain)

Editor's Notes

• #2: Hello! My name is Barbara Ondrisek and I'm working as a freelancer for almost 15 years for different companies mostly on Java web projects, but I also like mobile development – especially Android. Currently I'm working for the Erste Bank on the new Version of their netbanking system George.
• #3: I have a strong Java background – I love Java - but I always wanted to keep in touch with the Frontend. So last year my team leader asked me wheater I want to join a Full Stack team. BUT! They use JavaScript
• #4: BUT Java developers fear Java Script. Why? ps. first I wanted to make a presentation solely with cat pictures but I decided against it
• #5: For me object oriented Java is so comforting because it uses a lot of structure – law and order, especially for the "Special Victims Unit" the Java Server Faces guys. There is a huge barrier when you start programming Java, especially when you come from "script land". But there are many very handy frameworks and standard tools such as Maven, JPA, or Spring that might help you with developing reliable large scale web apps. And for us Java people JS looks like...
• #6: Sodom and Gomorrha, because there are sooo many frameworks and tools and noone standardizes anything. Of cause there are certain streams to use structural frameworks such as Backbone, React, ... and now Ecma Script 6 is coming... But for me as a Java developer JS was always a place where every thing is allowed and possible and you can do whatever comes to your mind...
• #7: I mean seriously
• #8: ...eval is the same as ...
• #9: ...evil!
• #10: What ever prgramm any antipattern that comes into your mind such as spaghetti code (this is actually a picture of my lunch last week), extension of objects, pollution of the global Namespace, improper Use of Truthy and Falsey Evaluation etc. JS has no standardisation, millions of different, frameworks and github projects... All those strange "undefined is not a function"s and "object Object"s (when you print out a variable and HTML code mixed with javascript... No IDE, no debugging...
• #11: Some might see through the matrix, but not many can handle JS code in a proper way that it is maintainable or scalable. BUT web app implementations in Java aren't much better: ps. now I'm coming to the a little more serious part of my presentation.
• #12: Your code base usually grows very fast and you need structure. Model-View-Controller is a pattern meaning the separation of concerns. You seperate the presentation (the view) from the program's logic (the controller) and the data layer (the model). There are several ways to achieve MVC in Java. A good approach is Spring MVC with Spring Web Flow - but there are also bad and very bad approaches such as JSP or JSF with Beans or Servlets. Old technology I contributed some bad still on my own. So the solution is:
• #13: AngularJS FTW! The self-called "Superheroic JavaScript MVW Framework" AngularJS is a state of the art JavaScript tool for single page web applications that offers a lot that JS alone does not - namely structure. And it's from Google so it can't be "bad". In jQuery apps the DOM often represents the model, but with Angular the business logic is decoupled from DOM manipulation. And just a litte disclaimer: I'm talking about Angular 1, not 2, because AFAIK it's still BETA.
• #14: Angular calls their principle "Model-View-Whatever": You have a single page app devided into modules such as the login, a main screen, config). Simply speaking: An Angular app is a collection of modules. A module consists of different components: * Model (Services / Factories <-> REST API) * <-> Controller (Controllers) * <-> View (Templates with build in Directives)
• #15: Here you find a simple html file. I include the angular dependency as js script in the header and define that this references an angular app with "ng-app". With a very simple reference to "ng-model" I define an object (through data binding) in the current scope respectively DOM that will be initialized on runtime. Next I just display it by referencing it inside this curly braces, which means that it will be "printed out" in the HTML.
• #16: When you now open the html file in a browser the browser loads this mini app and when you now enter something in the input field the value is displayed here in this span immediately.
• #17: Easy, isn't it?
• #18: Now you add some swag: A Controller. This is an example app I wrote for my talk here, but it is also used with a side project of me: The Hungry? App, an app that uses your location to show you venues such as restaurants close by. In this app you can also save your favorite venue in a list. And this is done on a server. For this server, a REST API, I made this Angular frontend. With "ng-controller" you define a function that encapsulates our logic that is defined in a separate js file. You also have integrated form validations. Here the input type is text with a max lenght of 30. You can also define something like floats or regexs.
• #19: A typical controller is placed in a seperate module – in this case we only have one, that is the app, but in the next example there will be more... Now you define the controller as a function that contains the app's logic such as scope objects and different functions to handle data. This a a super simple example so let me show you a little bit more.
• #20: Here you see...
• #24: In this example you see the different modules: I defined a module "hungry.controllers", a module "hungry.constants" and "hungry.factories". The factories module is the model module, in Angular it is called "Factory". With my factory I can fetch data from my REST API. This is accomplished with the resource library that I referenced in the html and injected here into my factory. I defined a constants module for some fixed values such as the API path and I defined different controllers. The angular resource library is a jquery tool to fetch data.
• #25: Dependency injection is the most amazing feature of AngularJS. It allows you to declaratively describe how your application is wired. This means that your application needs no main() method which is usually an unmaintainable mess. You work modular and can also simply remove or replace components.
• #26: Directives is a unique and powerful feature available only in Angular. Directives let you invent new HTML syntax, specific to your application. At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children. Directives are pretty handy, but hard to test because of the HTML code. This is a simple example. One can also use reusable HTML templates and add lots of complexity. Nice is that the scope is directly seperated.
• #27: Localization An important part of serious apps is localization. Angular's locale aware filters and stemming directives give you building blocks to make your application available in all locales. Angular supports i18n/l10n for date, number and currency filters.
• #28: Deep Linking A deep link reflects where the user is in the app, this is useful so users can bookmark and email links to locations within apps. Round trip apps get this automatically, but AJAX apps by their nature do not. AngularJS combines the benefits of deep link with desktop app-like behavior. Angular is a single page app, but with these routes you can set ...
• #29: For views we use jade templates in our project. And you can nest them inside of each other. Such as headers, menues, and other reusable components
• #30: For views we use jade templates in our project. And you can nest them inside of each other.
• #31: For views we use jade templates in our project. And you can nest them inside of each other.
• #32: Structure by type: controllers, directives, services templates Structure by features
• #33: Testable AngularJS was designed from ground up to be testable. It encourages behavior-view separation, comes pre-bundled with mocks, and takes full advantage of dependency injection. It also comes with end-to-end scenario runner which eliminates test flakiness by understanding the inner workings of AngularJS. As tools there are karma and phantom JS. Angular has a built-in mock framework "angular.mock.module".
• #34: Build with gulp! Gulp: Task runner built on Node.js. Build process (less, coffee script / jasmine, jade) Gulp + extensions, such as - babel for ES6 support - lodash
• #35: Dependencies are managed by bower resp. Webpack. overview of supporting state of the art frameworks: npm FTW! Bower: Package manager (lodash ) Gulp: Task runner built on Node.js. Build process (less, coffee script / jasmine, jade) Bootstrap UI
• #36: overview of supporting state of the art frameworks: npm FTW! lodash Bootstrap UI Etc.etc.
• #37: No pain, no gain? Best practices are: Define controllers, factories etc. in seperate files Cache dependencies Don't use $rootScope. At all. Never live reload as tool Debug in IntelliJ Lessons Learned Integration in mvn, gulp in build (win vs. Osx) Test coverage (no integration in sonar?)
• #38: No Downsides at all! ...just kidding
• #39: Downsides Structure is provided but not enforced The code is only as good as its programmers Why I love Angular MVC (MVW) Modular design Declarative approach Active development - community