workflow and tools for meteor - javascript

I'm about to start digging into Meteor for real (instead of just reading about it). I'm a near-complete noob but I've at least determined I'm going to use Sublime Text as my editor vs webstorm. I know I need a git account (going Bitbucket there). What else?
Are yeoman, grunt, and bower, (and lineman?) which seem like the workflow tools of the day, also necessary for writing a non-trivial app? It seems like Meteor already does a lot of the main functionality of these tools.
Do I need a testing suite like Jasmine (at least to get started?)
Anything else I'm missing? I just want to get everything I need (yes, including a couple good Javascript books) before I start.

You'll need the basic elements you already have (node, npm, git and ruby). You seem to know a little bit about web apps so I'll try analogies.
Yeoman essential purpose is to scaffold, meteor will do a really basic scaffolding for you. If you want to have a more advanced scaffold tool I encourage you to try em : https://github.com/EventedMind/em by Chris matter.
Grunt basic tasks equivalents are handled by the meteor commands (server, livereload, build, deploy...)
Bower is a package manager, I highly encourage you to use meteorite and its repo atmosphere (https://atmospherejs.com/) as your package manager. Actually, meteorite commands (mrt) are going to replace meteor commands in your projects. Eventually, atmosphere and meteorite are going to be fold into the core of meteor. (see meteor roadmap : https://trello.com/b/hjBDflxp/meteor-roadmap)
(note that you can use npm packages to)
All the essential functionalities of Lineman are handled by meteor.
However, some tasks are NOT handled by meteor.
I run the classic compass watch on my sass folder.
A good testing framework for meteor is Laika : http://arunoda.github.io/laika/
To start, you can go to discover meteor : https://www.discovermeteor.com/. For more advanced learning; go to evented mind : https://www.eventedmind.com/
The first thing you want to learn is how to handle iron-router
EDIT
There is now two major resources to start :
https://guide.meteor.com/
https://themeteorchef.com/
Iron router has been replaced by flow router ; there is a guide to use it :
https://kadira.io/academy/meteor-routing-guide
To manage scss :
https://atmospherejs.com/fourseven/scss
The view layer :
React replaced Blaze

Related

Build for js environment without npm?

We are currently building our frontend js codebase (angularjs) using nodejs with grunt, which seems to be a popular setup, but we are not happy with this solution. Does anyone have suggestions for a build setup for e.g. linting, minimizing our js, running less, etc (in addition to some custom steps for angular in general and for our application specifically) without using nodejs at all?
I would leave it at that to avoid starting a flamewar, but here are, for context, some of the shortcomings of the current setup in our view:
grunt does not have even the basic functionality of a 1970s build system, like automatically re-building only files that have been modified based on file modification time
npm is causing constant headaches running on our build servers at every build
If grunt does not have even the basic functionality of a 1970s build system, why won't you use a 1970s build system then?
Just use make if that's what you're happy with. It still works fine. There's no reason not to use it if it you're satisfied with how it works.

What are npm, bower, gulp, Yeoman, and grunt good for?

I'm a backend developer, and slightly confused by npm, bower, gulp, grunt, and Yeoman. Whenever I ask someone what their purpose is, the answer tends to boil down to dependency manager - for all of them. Surely, we don't need four different tools that all do the same?
Can someone please explain what each of these is good for in as few sentences as possible - if possible just one per tool, using language a five year old (with development skills) could understand?
For example:
SVN stores, manages, and keeps track of changes to our source code
I have used maven, Jenkins, nexus and ant in the past; maybe you could compare the tools above to these?
Also feel free to add other front-end tools to the list.
Here is what I have found out so far - not sure it's correct, though:
bower dependency manager for front-end development/JS libraries, uses a flat dependency list
npm dependency manager for node.js server, can resolve transitive dependencies/dependency trees
grunt runs tasks, much like Jenkins, but locality on the command line
Yeoman provided scaffolding, i.e skeleton projects
gulp same as grunt, but written in js only
node.js server for js apps?
git decentralized SCM/VCS, counterpart to svn/cvs
Am I close? :)
You are close!
Welcome to JavaScript :)
Let me give you a short description and one feature that most developers spend some time with.
bower
Focuses on packages that are used in the browser. Each bower install <packagename> points to exactly one file to be included for (more can be downloaded). Due to the success of webpack, browserify and babel it's mostly obsolete as a first class dependency manager.
2018 Update: bower is mostly deprecated in favour of NPM
npm
Historically focuses on NodeJS code but has overthrown bower for browser modules. Don't let anyone fool you: NPM is huge. NPM also loads MANY files into your project and a fresh npm install is always a good reason to brew a new cup of coffee. NPM is easy to use but can break your app when changing environments due to the loose way of referencing versions and the arbitrariness of module publishing. Research Shrink Wrap and npm install --save-exact
2018 Update: NPM grew up! Lot's of improvements regarding safety and reproducibility have been implemented.
grunt
Facilitates task automation. Gulps older and somewhat more sluggish brother. The JavaScript community used to hang out with him in 2014 a lot. Grunt is already considered legacy in some places but there is still a great amount of really powerful automation to be found. Configuration can be a nightmare for larger use-cases. There is a grunt module for that though.
2018 Update: grunt is mostly obsolete. Easy to write webpack configurations have killed it.
gulp
Does the same thing as grunt but is faster.
npm run-script
You might not need task runners at all. NodeJS scripts are really easy to write so most use-cases allow for customizedtask-automation workflow. Run scripts from the context of your package.json file using npm run-script
webpack
Don't miss out on webpack. Especially if you feel lost on the many ways of writing JavaScript into coherent modular code. Webpack packages .js files into modules and does so splendidly. Webpack is highly extensible and offers a good development environment too: webpack-dev-server
Use in conjunction with babel for the best possible JavaScript experience to date.
Yeoman
Scaffolding. Extremly valuable for teams with different backgrounds as it provides a controllable common ground for your projects architecture. There even is a scaffolding for scaffolds.
So, Since you have a good idea what each is, I will give you a simple workflow.
I use yeoman to scaffold a basic skeleton.
I am using node as the runtime for my application. ie. run node appname
I use npm to install node modules for helping me write the application in node
I might need some component from bower like front-end libraries so use bower to fetch these.
Now to do some repetitive task I will use grunt or gulp to write some tasks. So everytime I want to repeat it, say minimify my js files I call grunt/gulp and make them do it. Difference you ask, Gulp is stream based while grunt is task based.
I do version control using git to keep track of changes
Gulp vs Grunt: Gulp provides more flexibility with task automation, Grunt comes built in with a lot of functionality as per the common development practices. There are two main differences between Grunt and Gulp:
Grunt focuses on configuration, while Gulp focuses on code
Grunt was built around a set of built-in, and commonly used tasks, while Gulp came around with the idea of enforcing nothing, but how community-developed micro-tasks should connect to each other Read here
NodeJS: It is a Non-blocking server-side scripting language. Which means operations won't block further execution until current operation finishes.
Git: As you mentioned it is an SCM tool, a widely used one. As per the GitHub docs it is different from other SCM tools as data is never deleted.
Git thinks of its data more like a set of snapshots of a mini filesystem. Every time you commit, or save the state of your project in Git, it basically takes a picture of what all your files look like at that moment and stores a reference to that snapshot.
When you do actions in Git, nearly all of them only add data to the Git database. It is very difficult to get the system to do anything that is not undoable or to make it erase data in any way. As in any VCS, you can lose or mess up changes you haven’t committed yet; but after you commit a snapshot into Git, it is very difficult to lose, especially if you regularly push your database to another repository.
Read More
Bower vs NPM : Bower and NPM are dependency managers but Bower modules are for front-end development. NPM is a huge collection of modules to be used with NodeJS backend. This SO answer covers it better
I added some details:
npm is a package manager for javascript, npm is nodejs's package ecosystem, but it can be used only for front-end projects.
grunt & gulp are useful to separate and automate tasks like minification, compilation, unit testing on command line, it's a way lighter solution than (for example) visual studio as the process is only a separated (and usually lightweight) command line/process.
Regarding the differences between gulp, grunt and bower there is already a ticket: What are the differences between Grunt, Gulp.js and Bower? Why & when to use them?
Nodejs is more a javascript runtime. Node.js allows the creation of web servers and networking tools using js and a collection of "modules" that handle various core functionality and other core functions. Source
This ticket resumes the differences between Git and Subversion: Why is Git better than Subversion?

How to use Meteor packages in non-Meteor project

I have standard node.js REST API. And I want to use some meteor's packages like Minimongo, Tracker, Blaze (any Meteor's package)
There a lot of articles how use npm modules in Meteor but I have opposite task. Should I create some wrapper to make it possible to use as a Node modules?
There is similar question: How to use Meteor packages outside of Meteor?
but nobody answer.
this is a good question, but you cannot just use require for a meteor in npm. You also cannot use Drupal modules in in plain PHP, it will not work as in the context they are written for. Yes you can use npm packages in Meteor, but only because Meteor is build on top of Node, not vice-versa.
Meteor has its own packaging system, because Meteor Packages are Isomorph, they have the ability to share their code on client and server, like the SimpleSchema Package or many others. To make it simple for developers to use it, it's an complete encapsulated system.
But to your question. There are a some of really valuable "ports" of Meteor Packages to plain npm architecture. For example you mentioned Tracker, so there is a npm package for that.
Tracker:
https://github.com/eface2face/meteor-tracker
(There is no Readme, but I guess it should be used, like Meteor Tracker, right?)
Minimongo:
https://www.npmjs.com/package/minimongo-standalone
... just to mention some...
To port a package you just need to extract the needed code, which don't depend on Meteor and other meteor packages and create a npm package of them.. So the code still behaves the same.. Just look at the Tracker code
You have to decide, why do you need meteor packages for your node/express application? And maybe there are already some better solutions in the npm world itself. If you really depend on major meteor packages, then just use Meteor ;)
I just get the same issue so i look around perhaps it's too late
However o found this https://www.npmjs.com/package/meteor-client-packages-meteor
Perhaps it could be helpful now
Or use this which the author recommends https://www.npmjs.com/package/meteor-webpack-client
Both are available..

How to set up an automated testing environment for AngularJS

I have spent hours trying to set up an automated testing environment for my AngularJS applications that I can run from Maven (capturing results in Bamboo)
A Google search reveals frameworks galore, based on Jasmine, Karma and generic JavaScript frameworks.
But for some reason the installation of these never goes as described.
Can anyone just point me to a set of downloads that I can install manually to proper directories, that will just execute my unit tests?
I asked a similar question previously and got down checked and requests to close. If you need to check me down, please leave a reason, as I am besides myself with frustration trying to solve this, and I am sure there many other developers experiencing the same issue
Testing javascript is not a totally mature thing, so there isn't a great diversity of good tools for doing so. Jasmine and Karma are the current best ways of doing that.
Those tools are best managed using bower, which is a nodejs package. So you'll have to install, in this order:
nodejs
npm (node package manager)
bower (using npm)
jasmine and karma using bower
phantomjs, and whatever other dependencies your javascript needs (presumably angular)
Then you can run the tests.
I found this package for maven with some brief googling, but god knows how to set it up:
http://searls.github.io/jasmine-maven-plugin/
There are many tutorials on going through this process. You have to accept that these are currently the best tools for doing this and give it your best shot. If you post more specific issues regarding the 'installation that never goes as described' of jasmine and karma you will get assistance.
you can use for example yeoman or angular-seed. both will require nodejs and optionally ruby. both will set you with phantomjs, jasmine, karma, bower and many more. however i would avoid combining that build with maven. imho it's far from perfect. java tools will never be as good as native js tools for building js project. if you really want to combine the builds then use java only to call nodejs and nothing more

How do Bower and NPM couple together?

So to preface my question, I'm coming from a Java back-end developer perspective, where we use Maven to build. I have worked on testing on a server-side Node project we recently developed, but now I'm moving on to setting up testing on our front-end JavaScript client. I'm not very well-versed in front-end development and this is really my first foray into that.
All that being said, I'm thinking I'm going to use the following technology stack for our front-end testing: Eclipse IDE, Maven build process, Mocha testing framework, Chai assertion framework, Nock HTTP mocking framework, Sinon mocking/spying/stubbing framework, Rewire dependency injection framework. That all should be fine, and since that's the stack we use for our Node project, I would like to keep the front-end setup as similar as possible.
So, this is where my knowledge breaks down, though. I cannot seem to understand the difference in dependency management between our Node project and our front-end JavaScript project. I cannot see why I would not continue to use NPM, integrated into our Maven build, to handle dependency management and installation.
I see many people advocating Bower, but after looking at its page and docs, I still am not seeing what niche it fills that NPM would not. I am seeing a lot of adamant rejection of NPM insofar as browser dependency management goes; the main reasoning being that NPM is designed for server-side Node projects, and not for the front-end space. But who cares? Regardless of its initial design's intentions, if it does what I need it to do, where is the downside?
Please approach this "question" as if I am a complete newbie. I have realized as I've gone through this process and research, that I have very large dearths of knowledge in regards to the front-end side of things. With that being said, be as specific and thorough as possible in your answers, please. I would be happy to share project configuration and such, as needed, in order to help paint a picture of the space I'm in. Thanks for any feedback!
Bower and NPM do work differently.
NPM is very powerful and great at what it does. However, you won't find many client-side packages in there; most of them are there because they work in Node too. (For example, Underscore.JS and the JADE template engine.)
That's why you have Bower, which has the majority of the client-side packages. It has many jQuery plugins, templating engines, CSS frameworks, etc. Don't expect to find such packages in NPM.
You can work fine with both. I do so. :)
Traditionally, many web development projects combined npm and Bower. npm was used to manage back-end dependencies, while Bower was used for front-end dependencies. In fact, you needed to use npm in order to install Bower in the first place.
Although Bower’s advantages were compelling, they are now provided by other tools, namely npm, Yarn and webpack. While the open source project is still maintained, its creators decided to deprecate it, and advise how to migrate to other solutions—namely Yarn and webpack.
more explanation

Categories

Resources