WebDev Workflow

[Speakerator]

Hey, I am currently trying to get deeper into JS and want to take a look into various different frameworks (JQuery, D3, Angular). First of all, a bit about my intentions, though the TL:DR version can be found below.

 

I did a cooperative bachelor degree (business information technology) in Germany, which means that I studied for three month and worked for another at a IT company, applying for various projects. Since I wanted to do a Masters Degree anyway, I wanted to get started in WebDev for my last project, since I thought it should be something we should capable off. Now, during my masters I kind of continue my job as  as a student developing frontends for my colleagues. Unfortunately, we use some crap of online IDE which integrates testing, deployment to a cloud platform etc. into a closed system (which we do also sell of course   ) My problem / question is the following:

 

I started learning Javascript in this "restricted" environment, which is fine, but of course, many colleagues or even interns surpass me in the "general" JavaScript stuff that is not specific to our tools and libraries. This is why I'd like to start over again from a different angle, without any company specific encironment or else and get some experience in the libraries mentioned above. I plan to start at codecadamy, codeschool and the likes.

 

TL:DR:

Off course I know that basically, you can develop WebApplications using notepad and a local web server, but I am interested in what kind of workflow you guys follow. Do you code in Notepadd++, Sublime... , dump the files on a TomCat, code directly on the Server? Since I essentially never worked "off the leash", but always worked within a preconfigured eclipse with our package of company tools or aforementioned Web IDE, I'd really like to know any best-practices, tips or general insight on what other people do.

 

Best regards

Chris

[burnttoastnice]

I usually work on the server using a web ide such as Codiad, which is installed on the server itself. Changes are made to a non-publicly accessible clone of the website, then when testing is complete, the modified site goes live.

 

I'm sure others have completely different workflows to mine - probably Notepad++ and an FTP server

[ColonelPanic]

I edit the files on my PC, using Gedit usually, then push them over my local network to my little Pi webserver. Testing will then happen on separate machines (laptop, couple of tablets, phone). Rinse --> Repeat 

 

Once I'm happy, I'll FTP the finished files from my PC up to my web host, where I usually get somebody else to test it, because I'm too lazy, and don't have any devices running mobile Safari.

[N0ps32]

I'd say it really depends on the project / the requirements. The company I work for has tons of completely different projects so I have

a couple of workflows to get stuff done. My IDE of choice is IntelliJ IDEA pro / Webstorm.

 

I use Grunt for every project to simplify common tasks like copying, minification and compilation, dependency injection, ....

Usually I have a source folder that contains everything I need (images, fonts, SCSS, JS, JADE).

When I start a full "build" with grunt it wipes the target directory copies all necessary assets and compiles everything into the target folder. 

 

I use ES6 for all of my newer projects and transpile the code to ES5 (old JS standard) with Babel.

ES6 has some awesome features like the module system that keeps your JS code organized.

Take for example this simple map over an Array. ES6 just looks a lot cleaner IMO:

//ES5var doubled = [2, 4, 6].map(function(n) {    return n * 2;});//ES6let doubled = [2, 4, 6].map(n => n * 2); 

If you don't want to use ES6 I would still highly recommend using some sort of polyfill to get Promises in older JS versions.

 

If I develop a mobile application with Phonegap/Ionic then I usually don't care about how many

libraries I use and how big the application is going to be. So I just minify the source files and don't compress them into one file.

I usually use JADE as a templating engine for everything that has no backend as it integrates wonderfully with JS.

The App is then written in AngularJS.

 

If the target is a website then I usually use the module system integrated into ES6 and bundle it with something like RequireJS / Browserify.

Something that has worked really well for me is transpiling my ES6 code into a cache directory and then bundeling it up with r.js into one small file.

I then also run uglifyJS over the code.

 

My most used frameworks / libraries have to be AngularJS, jQuery, lodash-fp and Moment.js.

If the client is actually willing to pay for testing then I love to use mocha, chai and chai-as-promised.

 

All of the steps above are in one Gruntfile that has multiple build option depending if I'm building for dev or production.

I for example don't minimize my code for dev (duh).

 

I run Apache2 as my Webserver (you'll need a webserver to test certain things like cross domain font loading).

When I have to support Internet Explorer I use the free virtual machines that Microsoft provides for that purpose.

[Hazy125]

Depends on the project for me. Personal stuff is usually pretty ghetto. Quick things like daranthe3dprinter.com was coded entirely in the cPanel code editor, which is damn awful. For larger projects I've done I take it a little safer.

 

On my main computer, I code using sublime text 3. I used to use dreamweaver, but had some technical issues so switched a few months ago. I have a few plugins for sublime, such as a FTP/SFTP plugin to transfer files to servers without having to jump between programs. Using sublime I code directly off a Linux box with no internet connection. It's about as barebones as you can get. Apache 2.4, PHP 5.6. Sometimes I have to virtualise Windows to have a semi decent ASP setup. It also has PHPMyAdmin on it to make database work so much easier.

 

From there, once I'm happy with security I then upload it to the testing server where I have a couple of people test out user interfaces and what not. After changes are made then it goes to production server

[Speakerator]

Wow, that is more input than I was hoping for, thanks at all of you!    I'll come back to this during my "training" and will test and try as much as possible = ).

 

Thanks again!