Industrial JavaScript

- Bringing JavaScript development to enterprise - Especially in big enterprises - Massive workflows Hello everyone. I'm going to talk to you today about bringing JavaScript development in enterprise. Especially in big enterprises which have massive industrial workflows.

@Swiip

- Litle word about myself - Matthieu Lux from Lyon - Zenika, an IT service company specialized in Java - I also run the Lyon JavaScript meetup First off all, a little word about myself. I don't usually talk to much about myself but today I wanted to start with a little personal story. So, I'm Matthieu Lux from Lyon. I work at Zenika which an IT service company specialized in Java and I also run the Lyon JavaScript meetup.

I'm involved in both Java and JavaScript communities

JAVA

- Mix up the two languages - Involved in both communities - Java developer in a Web conference could be hard - Web community has a bad image of Java developers As you can see, I mix up the two langages and the two communities. I'm involved in both Java and JavaScript communities. To be honest, being a Java developer in a Web conference could be hard. The Web community as such a bad image for Java developers.

Java ?

Yes, I "still" do Java and I "still" enjoy it!

- Still enjoy doing Java - Not here to compare - There is some good in Java and its ecosystem But today, I choose to make my coming out. I'm a Java developer and I still enjoying doing Java. Or most of it. I'm not trying to compare here Java and JavaScript, I'm just saying that there is some good in Java and his ecosystem.

I ended up working in"big companies"

- Leads to end up working in "big Java only companies" Being a Java developer leads me to end up working in "big Java only companies".

In these "big companies"...

Javadeveloper

JavaScriptdeveloper

- Put the context - Situation is different from a Web conference - JavaScript developer is seen as a dangerous hipster - Java developer is seen as a succesful businessman To put the context of these companies, the situation is quite different than in a Web conference. It's the JavaScript developer who is seen as a dangerous hipster.

Being a developer in one of these companies...

- Being a developer is hard - Powerfuls managers - Respected senior architects - Developers are only soldiers In fact, just being a developer is hard. You know, you have the powerfuls managers and big respected senior architects, but developers are only laborer...

Thinkpad forever

1 GB Ram, Win XP (no kidding) Thinkpad

- Hardware is awful - Revered the Thinkpad - Same computer to everyone - From the secretary to the top manager My favorite thing is the hardware, they revered the Thinkpad. They still can't understand that developers needs a minimum of tools. They just give to every one the same computer to everyone with a maximum of antivirus and crypted harddrive and consider the developer has to be happy with it.

Internet Explorer

- Kingdom of old Internet Explorers - IT department security politics - Official browser You also got Internet Explorer. Big companies are the kingdom of olds Internet Explorer. The IT departments politics are always about only Internet Explorer, you know, for security!

Choosing a new piece of software...

They have to spend money
One solution to rules them all

- Workflow is really corrupted - Absolutly spend money - They wan to aquire the technology - They want the solution be used in every single project A very difficult topic is that the workflow to choose a new piece of software is really corrupted. They absolutly want to spend money to be reassured. That's of course not a great start to choose Open Source. The worse is that as they spent money, they want the solution to be used by everyone and everywhere in the company. We all know that any solution can fit for every single project of a big company.

Industrial Workflows

- Industrial Workflows - A diagram like this one in every conference room - To sum it up, processes are really complex - The goal is to be able to fit in And finaly, there is the Industrial Workflow. I actualy worked in a company where there had a diagram like this one in every single meeting rooms. All the processes in this companies are huge and be able to fit in is a key of the success.

Selling the Web Platform to these "big companies" is not an easy task

- Sell Web UI and JavaScript is not easy You can imagine know that triying to sell Web UI and JavaScript development in these companies is not an easy task.

- Hipster technology - Companies workflow - Leads to a dead end It's often ending here because Hipster technology not fitting in the companies workflow does not go very far.

- Theres is hope - Also a great show by the way But there's hope! (And it's also a great show by the way)

The situation has evolved

drops drops - Context has evolved - I6 is finally dead - There will still be old IE - At least IE 8 can do a little of HTML 5 - Key concurents has been droped - Projects still exists as OS project - No more support is like death sentence First off all, the context has evolved. IE6 is finally dead. Or at least, I haven't seen it for a while and I really hope to never see it again. Flex and GWT which was the most commonly used alternatives was both dropped. Even if both projects still exists as Open Source projects, the drop of support is death sentence from the view of a big company.

The magic Keyword has landed

- Magic keyword is appeared - Transform an hipster technology - Trendy and shiny thing And the magic Keyword has appeared. Keywords are great to sell software to big companies, they can transform a technology from a geeky unstable one to a trendy shiny thing. And it's exactly what the HTML 5 keyword do for the Web Platform.

JavaScript ecosystem has evolved

- I'm here for that today - The JavaScript development has greatly evolved - New tools, new frameworks - Wich allows to comply with heady workflows But most of all, and I'm here for that today, the JavaScript ecosystem has greatly evolved.

First you have to enter

- You have to enter First of all, you have open the doors of the industrial world.

AngularJS

- Perhaps somebody knows - Huge fan of AngularJS - Gave a few talks about it And for that, you've got Angular. As perhaps somebody knows, I'm a huge fan of Angular.

Whether you like AngularJS or not, it's the key to bring JavaScript development in big companies

- Why I prefer Angular over other frameworks - Really good to enter big companies But I will not talk about why I prefer Angular over any other JS MVC framework but why Angular is really good to enter big companies.

The following views are NOT my own!

- To be clear - Not good developers arguments - There are not mines - Those which works in enterprises To be clear, these points are not good developers arguments. And they are not mines. But they are those which works in enterprises.

Supported by Google

- "by Google" power - Big companies are looking for support - They can't pay - At least, there is the leader of Internet behind First, the "by Google" power. As I said before, big companies are looking for support. If they can't pay for support, at least, Angular is supported by a big company which gives references.

Full stack framework

- Full stack framework - Afraid of the so called jungle of JS frameworks - Hope to simplify - It's an utopy - It still works pretty well as an argument Angular is a full stack framework. They are afraid of the so called jungle of JavaScript frameworks. And they hope to simplify that jungle by choosing a single framework to make everything. It's an utopy but it still works pretty well as an argument.

Dependency Injection

Structure
Modularity
Testability

Match with Java EE conceptsSpring & EJB

- This one at least is a real argument - Depdency injection pattern - It provides structure, modularity, testability - Reassuring - Same pattern as majors Java frameworks - Java developers who handles theses concepts for a while This one at least is a real argument. Angular has dependency injection. It provides structure, modularity and testability which is great features and also reassuring for Java developers which handles theses concepts for a while now.

But once inside, it's only the beginning

- We're in - Everything remains to be done Well. At this point, we're in, but everything remains to be done.

They never have invested in design...

- Often internal projects with few users - Don't invest a thing in design - Let design to a Java trainee - Usually a disaster These big companies, when they start a new internal project they don't invest a thing in design. Which leads to let the design to Java trainee which is usually a disaster.

- We've got Bootstrap - You probably know it as the most starred project of GitHub - Best practice is to make a design on top of it - At least, ables to produce clean webapps But now, we've got Bootstrap. It's not perfect, and of course, every applications looks the same, but at least, Web applications looks clean and it changes the way of seeing webapps.

Bring Java developer to (real) JavaScript development isn't easy, but...

- Bring Java developers to real JavaScript development - JavaScript is not object - Weak typed - Very permissive - There again, there is tools The second element is to bring Java developers to do real JavaScript development. As JavaScript is not object, weak typed and very permissive langage, Java developers struggle with it. But there again, there is tools.

- Many solutions - Different approaches - Plug into you IDE - Have feeback like in Java with the compiler There is many solutions with different approaches, you just have to choose yours. But you have to plug it into your IDE to be able to have good feedbacks while you develop.

We've got also Dependency management

- Used to dependency managment - JavaScript has its own Java developers are used to dependency management. And now, JavaScript has it's own.

- Called Bower - Pretty simple and useful - It uses Git to download dependencies - Ables to use directly GitHub It's called Bower. It's pretty simple and useful, it uses Git to download the dependencies directly from GitHub.

Build

- Most important revolution - JavaScript industrialisation - Build tools - There's few of them But the most important revolution of the JavaScript industrialisation is the build tools. There's few of them. The leader is Grunt even if Gulp is the buzz right now.

"JavaScript is not compiled, it doesn't need to be built"

- Big mistake - Made for too long - Web doesn't need to be built The big error which was made for too long is to think that the Web doesn't need to be built.

Grunt

- Main build tool - Great logo Let's talk some more about Grunt. Yes, it has a great logo!

Web optimization

No one should anymore copy his source files on a Web server

- First usage is for Web optimization - So many operations to perform - Pass from your source files to a production package The first usage of Grunt is for Web optimizations. There is so many operations you have to perform today to pass from your source files to a production version of your website.

Web Deploymentin 2014 =

Verifications (JsHint) + Preprocessors (Sass, Coffee...) + Minifications (Uglify) + Image Optim (Imagemin...) + Concatenations (concat) + Cache Buster (rev) + ...

- Packaging process should look like this - No way considering deploying with a simple copy In 2014, your build process should look like this. There is no way you could still considering deploying a web app with a simple copy.

Grunt can "watch" your files and recompile everything

- Great feature - To be able to watch your files - Run every task when it sees a change One of it's great features is to be able to watch your files and then run every task you want when it sees a change.

Welcome preprocessors!

for CSS...

- It opens the doors to preprocessors - Big enhancement of Web development - Most commonly used are for CSS - Almost a must have nowadays It opens the doors of all Web preprocessors. Preprocessors are a big enhancement for Web development. The most commonly used preporcessors are for CSS with Sass Less or Stylus. It's almost a must have nowadays.

JavaScript...

- Also consider JavaScript preprocessors - CoffeeScript which I use myself - TypeScript which is great even if it's made by Microsoft - Even try EcmaScript 6 with Traceur Compiler But you can now also consider JavaScript preporcessors like CoffeeScript, TypeScript. You can even try ECMA Script 6 with the Traceur compiler from Google.

Even HTML!

- Also process your HTML - Handle simpler and more meaningul files Finally, you can also process your HTML to handle simpler and more meaningful HTML files.

Too much Grunt configuration?

- Afraid of the amount of Grunt configuration - I'm one of them For those who are afraid of the amount of Grunt configuration, and I'm one of them...

There is also a solution, he's called Yeoman

- Once again a solution - Yeoman is a scaffolding solution - Will initiate your project and you Gruntfile There is, once again, a solution. Yeoman is a scaffolding solution which will initiate your project with a very complete Gruntfile.

Grunt will also run your tests!

- Also be able to run the tests Grunt will also be able to run your tests.

Unit Testing JavaScript?

YES!

- Very good testing framework for JavaScript - Tests are really important to handle browsers differences - Most used is called Jasmine Yes, there is very good testing in JavaScript now. The most commonly used framework is called Jasmine.

With Jasmine

- Sorry for my little joke Oops, not this one.

No, this one

- This logo Yes, this one.

Or with that one from the Node.js community

- My prefered one - The one from the Node.js community - Also work in browsers - Particularity is to do nothing - External modules to do the rest But it's not my prefered one. I really enjoy Mocha which is the test framework built by the Node.js community which also works for the Web. It has a particularity, it does nothing. It provides only the tests structure and allows external modules to do the rest.

- Chai for assertions - Very beautiful assertions - Should, expect and assert - Complete with Sinon JS - Brings spys, stubs and mocks Like the assertions which are handled, for example, by Chai JS which allows to make very beautiful assertions. You can also complete with Sinon JS which brings spys, stubs, mocks and everything you need for a really complete test environment.

- Not finished with test tools - Web tests needs to be run in a browser - Karma can handle your browser - Run your tests and gather the results And it's not finished with the test tools. There is also Karma which will watch your files, run your tests...

In every browsers!

- In several browsers ...in every browsers you configure.

And produce reports

In the console
In HTML files
In JUnit compatible format
With coverage!

- Producing all kinds of reports - Test reports - Coverage - Compatible with all the Java tools It's also capable of producing all kinds of reports and coverage which will be compatible with all the Java tools.

You can fit your JavaScript project in Jenkins & Sonar

+ => &

- All theses tools can be orchestrated by Grunt - Produce all the reports you need - Fit in industrial processes - Plug your project Jenkins for CI - Load you reports in Sonar to have quality dashboard All theses tools I talked about can be orchestrated with Grunt. They can produce all the reports you need to fit in the industrial processes of big companies. You can plug your project in Jenkins for continuous integration and Sonar for quality reports.

JavaScript projects can finally fit in Industrial workflows

- Build, tests, reports - JavaScript project fit in industrial workflow You have, build, tests, reports, your JavaScript project can fit in the Industrial workflow.

- Your business man should be happy - Perhaps no more looking at you as a dangerous hipster At this point, your business man should be happy and perhaps not looking at you as a dangerous hipster!

Thank you!

@Swiip

- Thank you - Any questions Thank you! Any questions?

Industrial JavaScript

Swiip

Industrial JavaScript

0 0 (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();