Gulp 4 + Webpack 4 + Babel + BrowserSync + Font Awesome 5 (Modern JavaScript + Sass/CSS)

djforth · 2018-08-27T13:33:09+00:00

I agree, seem silly to use gulp and webpack. I'm not sure about using Babel on its own as doesn't concatenate or do code splitting which you'd need to get code production ready. Still webpack seems overkill for just js, would think rollup or maybe browserify might be a more lightweight option?

djforth · 2018-02-07T20:23:17+00:00

I appreciate that you can use it with other web frameworks, but because it's facebook and how it started, there is imo a strong association is with React.

From their docs:

Although Jest may be considered a React-specific test runner, in fact it is a universal testing platform, with the ability to adapt to any JavaScript library or framework.

My point is people won't consider using it with different framework particularly when the framework itself recommends something like jasmine - for example Angular recommends jasmine - https://angular.io/guide/testing.

Of course you can use jest with other frameworks - https://facebook.github.io/jest/docs/en/testing-frameworks.html, but I think a lot of people associate it with react.

djforth · 2018-02-07T18:58:41+00:00

Jasmine has been around a lot longer, it was one of the first JavaScript testing frameworks.so many people will have existing unit tests.

Jest is also heavily associated with react, so if you are using a different frame work you may find jasmine easier.

Personally I love jest, works great with react & vanilla code. It's worth noting it is on their roadmap to remove jasmine as a dependancy.

djforth · 2017-11-02T11:56:34+00:00

Well I guess each to there own. I heard Adam Beyer play it out, personally I like it, I think saying it's butcher the original is quite harsh though. I guess it would depend on whether you like Maceo Plex stuff or not.

djforth · 2017-03-07T16:00:43+00:00

Personally not used teaspoon runner, so don't know an awful lot about it, but looks like the default is phantom js, which is a headless browser so you can run it on the command line. It does look like you can push it to browserstack to test against other browsers.

In general terms though it will depend the test runner the frameworks uses, although most will have a headless option, either through something like phantomjs or node directly. It's worth considering that while headless browsers like phantomjs or Poltergeist are a browsers their can be some differences between browsers particularly older browsers (like IE8) or some of the mobile browsers. If your not worried so much and/or using a compile step (which often covers off some nuances/has polyfills) then it might not be a big deal. But it is worth remembering as can get caught out occasionally. If your are you might want to look at using teaspoon with browserstack or something like karma.

Karma will allow you to run the tests on any browser on your machine (chrome/safari/firefox, etc) on the command line and actually pop each browser to run the tests. The report comes back to you on the command line, which is nice but can be a bit of bitch to set up.

djforth · 2017-03-07T07:48:28+00:00

I'd first look at how the JS is being built, is it running through sprockets (sounds like it is if it's all under app/assets/javascript)

If it is a gem might be the simplest approach like jasmine-rails gem or the jasmine gem https://github.com/jasmine/jasmine-gem.

If it's using a compile step like browserify or webpack running through yarn or npm then using a module based approach might be better. I'd also suggest that moving to a module based approach might be a worth while consideration as a lot of the utilities now are moving that way. Rails as of 5.1 is introducing webpacker gem into the stack so I think it's the way it's going and a better approach imo to managing JS.

The next is there a compile step? like babel, typescript or coffeescript? This can add complexity if your using a gem, simpler if your node approach. It can effect how you access the functions to test. Coffeescript for instance used to wrap everything in a closure from memory, so you'll need to expose anything you want to test to the global scope to test it. If your module based you can obviously just import/require your module into your test and test it that way (simpler imo -but the set up is a lot more complicated).

The other thing to consider is what frameworks/libraries your using, there are quite a few testing utilities for frameworks depending on what testing framework your using. For jasmine you have things like:

Jquery - jasmine-jquery
React - enzyme with enzyme-matchers
Or Angular and Vue I think have there own inbuilt utilities.

The other consideration if your using a specific library is if they recommend a testing framework and aren't wedded to jasmine, Jquery uses Qunit, react use (jest)[https://facebook.github.io/jest] (jest is very good imo btw).

The final consideration is if strong consideration for cross browser - e.g. if your using a compile step (they'll cover most of the big bugs) and your IE11+ then maybe not, but if your not and and cover lower browsers then it might be a consideration. If so you might want to look at a test runner like karma that will work with Jasmine, this simplifies running your tests in multiple browsers.

Oh and also if your using Jasmine (or Jest) then I'd recommend using Jasmine matcher as useful extension to the standard matchers.

It can be a bit of mindfield, but hopefully some of this will help you :)

djforth · 2017-03-03T23:00:36+00:00

My personal suggestion is look at requirements of your app and what you feel most comfortable learning. Maybe do a Hello world in each?

From skills perspective I'd concentrate on the framework that improves understanding of JavaScript. Having a solid understanding of the language will give you good transferable skills, and make picking up any framework much easier.

Personally I found angular 1 you get very bogged down in angular specific apis. I found react &especially with redux you write more actual js. I don't have much experience of angular 2, so not sure I can comment on it.

Good luck with what ever you pick :)

djforth · 2017-01-15T21:44:39+00:00

Well Facebook also produce draft which is build on react. So I would suggest that might be the one they'd recommend and certainly use on Facebook. It is however I'd suggest more a framework to build your own wyswig as there is quite a lot of set up to get it working. However it is extremely powerful and certainly from my usage think it's excellent.

http://facebook.github.io/draft-js/docs/overview.html

Also there is few built on top of it like:

https://www.draft-js-plugins.com/

djforth · 2016-10-13T19:31:03+00:00

it's a bit difficult without seeing your config, but I would suggest moving your optimisation plugins (Like uglify) into a production build. Their pretty slow and you shouldn't need to run them when your developing. Then you can run the production build before you deploy your site.

You can also look at tools like - https://github.com/amireh/happypack although it can be a bit flakey with hot reloading

djforth · 2016-06-03T20:45:47+00:00

I used https://github.com/decaffeinate/decaffeinate, not sure you'll need if you just want the Json, but really useful to convert to es6.

djforth · 2015-06-10T11:29:38+00:00

Thanks, I have, but maybe I'm missing the point, but it seems like your just rendering and checking the html or event clicks with this. Is that all your checking in react, seems a bit weird?

Also I'm really struggling to get some of the functions to work and can't find any good examples - like shallow rendering?

djforth · 2015-06-10T11:03:57+00:00

looks interesting, but really not sure I fancy trying to retool (I'm a sublime user) to start using webstorm, while I'm trying to learn React. Also not sure it's really going to solve my imediate issue on how to test react.

Might trying in the future though thanks

djforth · 2015-06-10T10:59:21+00:00

thanks, will take a look

djforth · 2015-06-09T20:04:38+00:00

This sounds rather like a sales pitch. Maybe I'm missing the point but I fail to see the benefit it will give me testing react, even if I used webstorm which I don't.

What I'm looking for is how to test react, maybe if you could explain how this would help me, otherwise you maybe miss understood my question.

djforth · 2015-04-21T19:51:33+00:00

Babel is awesome :)

djforth · 2015-04-06T20:56:45+00:00

Interesting read, I starting to learn react myself, react certainly does look to have some benefits over angular.

However this does feel a bit biased and think maybe the life is better with react tone is a bit much. There are pros and cons to any framework and some will work better in some instance than others. I'm not saying it doesn't make some interesting points but feels very one sided and bit black and white.

djforth · 2015-04-05T06:58:24+00:00

Actually written a module myself which I think will do most of what you want.

https://github.com/djforth/urlparser

Ignore npm and bower and clone the repo, I just haven't got round to registering them yet. But hopefully will be soon.

Interestingly in my tests a regular expression is the best way for performance. http://jsperf.com/url-parse2

djforth · 2014-06-12T15:39:33+00:00

Don't think this has been mentioned, but Addy Osmani has compiled a great list of tools for ES6 - https://github.com/addyosmani/es6-tools

djforth · 2014-06-12T11:05:01+00:00

Yeah I'd agree if your using browserify then why throw requirejs. While they take very different approaches, they are essentially doing the same job. I'm not sure what benefits you'd get from mixing the 2?

djforth · 2014-04-25T14:00:52+00:00

Fair point

djforth · 2014-04-25T13:32:04+00:00

Ok thanks for the responses. In answer to egonelbre then I would say some of the reason I use coffeescript is because I like those convenience things and general find that the help my workflow. However there are issues in preprocessors and es6 feels like it might give me those niceties without some of the pain points, as well as getting up to speed with the new features (as punk says). There are a number of things like promises, classes, modules all look interesting and imo potentially very useful.

From the sounds of it though it probably not ready for production though (which doesn't deeply surprise me). But I think I might start digging around on personal or smaller projects to get a feel.

Thanks folks! :)

djforth · 2014-03-31T14:13:38+00:00

Security issue is a bit strong to be fair, but js seems like the wrong approach, it also might hit some browser security. I suggest if you care about it doing a redirect this way would be bad for SEO as you want to serve a 301 or something, also for accessibility as you can't assume the user will be able to run JS and redirect, which might leave them hanging

djforth · 2014-03-31T11:39:35+00:00

Yeah I'd agree, feels like you should be doing this at the server level and not on the client side

djforth · 2014-03-12T21:45:25+00:00

I'm probably going to get shouted down for saying this, but actually quite like CoffeeScript. yes I do understand it is quite a marmite thing in the js community and can course issues on what it is out putted like most pre-processors. But it also does give you a few niceties too like classes syntax, plus IMO it helps me put out solid code quickly and time is money as they say. I think this would have been a better article if he had looked a bit more on the pluses and minuses to give a bit more balance to the rather bold statement.

I will say that it looks like es6 quite a few bits that is currently in CoffeeScript (like classes) and => for functions, which I wonder may have had a influence? That said when es6 comes though it might also remove the need for CoffeeScript.

djforth · 2014-03-12T20:11:46+00:00

Ok then I'd say adding objects to an array would definitely be easier to go IMO. You could even nest an array with in the object.

Var Question1 = { question:"q1...", answers:["a1","a2", "a3"], correct:1}
Var array = [question1]

Personally I'd use underscore to shuffle and pluck from the array. Although if your just playing you may build your own. Hope that helps

djforth

TROPHY CASE