{"action":"created","issue":{"url":"https://api.github.com/repos/mxcube/mxcube3/issues/34","labels_url":"https://api.github.com/repos/mxcube/mxcube3/issues/34/labels{/name}","comments_url":"https://api.github.com/repos/mxcube/mxcube3/issues/34/comments","events_url":"https://api.github.com/repos/mxcube/mxcube3/issues/34/events","html_url":"https://github.com/mxcube/mxcube3/issues/34","id":113600427,"number":34,"title":"Using a module bundler, ES6 and other philosophical questions about front-end development","user":{"login":"mguijarr","id":2834952,"avatar_url":"https://avatars.githubusercontent.com/u/2834952?v=3","gravatar_id":"","url":"https://api.github.com/users/mguijarr","html_url":"https://github.com/mguijarr","followers_url":"https://api.github.com/users/mguijarr/followers","following_url":"https://api.github.com/users/mguijarr/following{/other_user}","gists_url":"https://api.github.com/users/mguijarr/gists{/gist_id}","starred_url":"https://api.github.com/users/mguijarr/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mguijarr/subscriptions","organizations_url":"https://api.github.com/users/mguijarr/orgs","repos_url":"https://api.github.com/users/mguijarr/repos","events_url":"https://api.github.com/users/mguijarr/events{/privacy}","received_events_url":"https://api.github.com/users/mguijarr/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":6,"created_at":"2015-10-27T14:43:27Z","updated_at":"2015-10-29T13:16:41Z","closed_at":null,"body":"I studied a lot the way front-end developers are working in general with newest tools that exist in the Javascript and web development world, and lately lines have moved a lot to improve code organization, automatic processes (including testing) and even code writing itself so I wanted to share my findings with you guys, so we can decide which direction to go. Of course I have an opinion :) But before doing any pull request I prefer to explain first.\r\n\r\nMXCuBE 3 client-side code is depending on React, Bootstrap, and many other little libraries. There is going to be more and more dependencies as features grow, which is normal. On the server dependencies are handled in requirements.txt and distutils in general, that's great - I always wanted to have a similar mechanism for Javascript code. I realized it exists, in different forms... It turns out people are setting up tool chains to handle dependencies (and much more), mixing tools like bower, grunt, gulp, yeoman, browserify, webpack...\r\n\r\nWhatever the tool chain is, the idea is always the same:\r\n- to make it easy to download Javascript libraries (possibly with CSS and images) and have them integrated in the project\r\n- to maintain a registry of library versions \r\n- to do some processing on the code (syntax checking, transpiling, minifying, etc.) in order to produce a final .js file\r\n- the final .js file is highly optimized, \"production-ready\" and contains all dependencies inline\r\n\r\nIn order to do all this, my personal choice is [webpack](https://webpack.github.io/) since it does the job of browserify + gulp (or grunt), using \"standard\" tools (like Node and npm) for package download and versions management.\r\n\r\nSo in my MXCuBE 3 repository I configured webpack and node modules to work with our code base.\r\n\r\nThere is more... I think we should write our Javascript code in ES6 syntax ; this is the syntax for the upcoming versions of Javascript, it is a standard that just needs to be implemented in all browsers.\r\nIt makes code much more readable, in particular when working with React components if we decide to follow the principle of having \"1 .jsx file === 1 component\" since it becomes possible to use ES6 modules syntax to import code from other modules just like we do in... Python. Thanks to the webpack installation it is the same for third-party dependencies too :) So one can write \"import React\" or \"import { Button } from Bootstrap\" for example.\r\n\r\n[Babel](https://babeljs.io/) is a tool that converts ES6 code to ES5, to make it runnable on all web browsers. I added it to the webpack configuration, so it becomes transparent : we can write ES6 code and the final .js file is in ES5.\r\n\r\nI followed guides on the net and I also configured [webpack-dev-server](https://webpack.github.io/docs/webpack-dev-server.html) : it allows to test the UI without starting the \"real\" MXCuBE 3 server. So the front-end developer can focus on the user interface, not worrying about real hardware or whatever. A very interesting feature of webpack is hot reloading ; it allows code changes to be immediately visible in the web browser during development.\r\n\r\nI would like to get your opinion on all this, as soon as possible in order to see if we can merge a\r\nPR from my repository and to continue development on good rails, or if you disagree we can\r\nsee how to organize all this differently.\r\n\r\n**Let's try it !**\r\n\r\nYou can clone [my repository](http://github.com/mguijarr/mxcube3) *be careful to use branch webpack*:\r\n\r\n    git clone git://github.com/mguijarr/mxcube3 -b webpack\r\n\r\n**How to use webpack ?**\r\n- first install Node and npm, required version is 0.12 at least ; for Debian-based systems I recommend doing this:\r\n\r\n    ````\r\n    # Note the new setup script name for Node.js v0.12\r\n    curl -sL https://deb.nodesource.com/setup_0.12 | sudo bash -\r\n\r\n    # Then install with:\r\n    sudo apt-get install -y nodejs\r\n    ````\r\n- then just install MXCuBE 3 dependencies:\r\n\r\n    ````\r\n    cd mxcube3-repo\r\n    npm install\r\n    ````\r\n\r\n- finally, run webpack in development mode:\r\n\r\n    ````\r\n    npm start\r\n    ````\r\n\r\nOpen a web browser to [http://localhost:8090](http://localhost:8090) and see what I am working on...\r\n\r\n**What do you think ?**\r\n\r\n\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/mxcube/mxcube3/issues/comments/152176252","html_url":"https://github.com/mxcube/mxcube3/issues/34#issuecomment-152176252","issue_url":"https://api.github.com/repos/mxcube/mxcube3/issues/34","id":152176252,"user":{"login":"meguiraun","id":12758327,"avatar_url":"https://avatars.githubusercontent.com/u/12758327?v=3","gravatar_id":"","url":"https://api.github.com/users/meguiraun","html_url":"https://github.com/meguiraun","followers_url":"https://api.github.com/users/meguiraun/followers","following_url":"https://api.github.com/users/meguiraun/following{/other_user}","gists_url":"https://api.github.com/users/meguiraun/gists{/gist_id}","starred_url":"https://api.github.com/users/meguiraun/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/meguiraun/subscriptions","organizations_url":"https://api.github.com/users/meguiraun/orgs","repos_url":"https://api.github.com/users/meguiraun/repos","events_url":"https://api.github.com/users/meguiraun/events{/privacy}","received_events_url":"https://api.github.com/users/meguiraun/received_events","type":"User","site_admin":false},"created_at":"2015-10-29T13:16:41Z","updated_at":"2015-10-29T13:16:41Z","body":"Glad to read that news! That must be a big relief for you!\r\n\r\nThanks for the answers, and good to read that someone else will also join your team! \r\n\r\nPerhaps we can discuss about this changes in the meeting (we will try to send you a tentative/proposal date soon, we are having a busy week...).\r\n\r\nRegarding my bug... I have push everything to my fork, I removed all the sse stuff hoping that the problem was related to that but not... The problem is that this line [SampleCentring]  (https://github.com/meguiraun/mxcube3/blob/master/mxcube3/routes/SampleCentring.py#L33) does not wait (I tried with both L33 and L34), it executes inmediately probably because I already have a value (so I am not clearing the data perhaps?)... \r\n\r\nThe origin of the event comes from the camera_hwobj, where I did set a ```time.sleep```, in fact a sleep there makes sense to me. Looking at timing at this HO I do not see anything wrong.\r\n\r\nI think I was having this problem from the beginning but I have not noticed until now when I was trying to connecto to our beamline though a limited vpn access ... I was sending the image at a very high rate, but I did not notice anything when I was inside the beamline network.  In the process of debugging I moved to only use mockups, so it is nothing related to real hardware or network (now I run the server in a vm and I use the browser of the host machine)\r\n\r\nI (kind of ) fixed defining a ```time.sleep``` [here] (https://github.com/meguiraun/mxcube3/blob/master/mxcube3/routes/SampleCentring.py#L38), but it does not look very elegant to me...\r\n\r\nI started with the wiki to talk about the [centring] (https://github.com/mxcube/mxcube3/wiki/Sample-Centring), it is mostly for my understanding but I will try to make a real video with all of currently working features of the sample video/centring and publish somewhere so you can see.\r\n\r\ncheers,\r\n\r\nmikel"}}