A Meteor ready-to-use boilerplate app for Blaze / FlowRouter in ES6

fen747 · December 18, 2016, 3:38pm

Hi fellow Metor enthusiasts,

I just uploaded my @meteorjs ready-to-use boilerplate app (Blaze + FlowRouter) on @github, with a bunch of handy functions. Feel free 2 share / fork / star it !

reactive window resize
20+ functional programming functions / aliases
non-global session reactive dict
10+ useful global helpers
20+ ready-to-use utility functions
7 pre-installed packages
30+ packages ready to be installed (just need to uncomment them)
All in ES6

Feel free to give me your opinion about it, I’d like to improve it with as much useful generic functions as possible !

mcrayne · December 18, 2016, 5:09pm

Just started looking, nice idea and nice work. Got this error: Error: The babel-runtime npm package could not be found in your node_module directory. Please run the following command to install it:
meteor npm install --save babel-runtime

That fixed it.

fen747 · December 18, 2016, 5:16pm

Thanks you.

Yes, npm modules aren’t uploaded with on the repo, so you have to do a meteor npm install.

Don’t hesitate to share your thoughts or submit PR. Id like to strengthen the repo to make it a really solid boilerplate in order to save dev time to those using it

Other meteor devs might have good habits / modules / generic handy libs to share to make it more and more useful !

mcrayne · December 18, 2016, 7:37pm

I like your approach and that you are sticking with Blaze. Question: why do you have in index.js file that imports the associated view.html and view.js files? I see this on the home and main layout ui folders.

Also, for those of us that forget or don’t think about it - maybe a reminder in the readme about running npm install.

fen747 · December 18, 2016, 8:13pm

Well, actually, I also developp with React, but as this boilerplate is mainly aimed to be used for one of my job (I train dev and IT teams about Meteor and associated technos), and that Blaze is still very much capable to very decently solve almost any problem, and that it’s so easy to learn, so when I provide professional training, It’s a good thing to start with it.

And Blaze is still much better than react when it comes to fast prototyping (which is my other job), so, using it or not is really a question of need regarding the work to be done.

You are right, I add a warning right now to the README

With the index.js, I can write in my main.js :
import '/imports/ui/components/navbar';

Whereas without it, I should write :

import '/imports/ui/components/navbar/navbar.html';
import '/imports/ui/components/navbar/navbar.js';

So, it’s simply to makes things a bit more easy and readable in the main.js, keeping things as clear and simple as possible. I prefer that kind of import which is more react-like (I want to import components / modules, not each of its file one by one).

Don’t hesitate to star the repo if it pleases you

PS : Excuse for my poor english

mcrayne · December 18, 2016, 9:06pm

I did star it because I like your layout of the project but I ran into problems trying to use the first module - funcProg.js. Calling “timestamp” I get: “Cannot read property ‘getTime’ of undefined”

Importing "now and today " work fine. But the def of timestamp in your code is:

export const timestamp = date => date.getTime();

I’m new to ES6 but I don’t think that is right. You don’t define date so we get the error. Besides, why would you use .getTime() anywhere in code since .now() is twice as fast and gives the same result? To use the .getTime() the Date object has to be created with a new Date() - like you did with your today() function.

do you include these for folks who don’t want to use moment.js?

Thanks again for putting it out there.

fen747 · December 18, 2016, 9:33pm

Here the explanation for that line :


export const timestamp = date => date.getTime();

I export an ES6 arrow function as a const. That function receive a Date Object and extract it’s timestamp.

Actually, you are right about one thing : I should value the parameter with a default value new Date() in case it’s not defined.

I’m going to update that.

The diffrence between now() and timestamp() is that timestamp is simply functional alias of the .getTime method applied to a Date parameter.

Functionnal programming is great for three thing :

Modularity / DRY coding
Verbosity
Easy debugging ( cause of verbosity and the very split stack of small functions)

If that interests you, I recommend you this great conf by J. Fairbank : https://www.youtube.com/watch?v=HvMemAgOw6I

Well, I myself use all these Date functions rather than momentJs in most cases. The reason is simple : I’ve always been less than a potato when it comes to working with Dates. So, like with everything that upset me because I’m not understanding it easily… Well, I recode it myself until I get the mechanism and logic behind it well carved in my brain cells

I’ve only finished to extract that boilerplates from my production apps this morning, and haven’t thoroughly test all of it yet, so it is possible that there are some hidden bugs. If you find some, don’t heistate to open an issue so I can see it asap.

PS : Here’s the new timestamp code
export const timestamp = date => ( ( date && date.getTime() ) || now() );

fen747 · December 19, 2016, 3:46pm

Just pushed my last commit : I added a super useful feature I forgot.

Changes to globals ( /both/_globals.js )

Lodash

This app already has erasaur:lodash package installed and aliased to ‘_’ instead of underscore
Lodash is known to have the same API as UndescoreJs, but with better performances, and more features

Meteor.user

I optimized the Meteor.user() function
It can now be used with a string as parameter to alias a findOne on a specific user
In addition, you can pass an array of string to automatically filter the fields you need in order to reduce the number of useless re-renders / autorun invalidation
Indeeds, the default Meteor.user() function return the whole user document, which means that any reactive computation would be invalidated if any field of the doc change, which can be very bad for debugging and performances, specially on mobiles

Use it like this :
Meteor.user() // return the whole current user doc
Meteor.user( “aUserIdString” ) // return the whole specified user doc
Meteor.user( [ ‘field1’, ‘field2’, … ] ) // return the filtered current user doc
Meteor.user( “aUserIdString”, [ ‘field1’, ‘field2’, … ] ) // return the filtered specified user doc

Example :

getPlayerLevel(){
    const playerId = this._id;
    const user = Meteor.user( playerId, [ 'playerLevel' ] );
    const playerLevel = user && user.playerLevel;

    return ( playerLevel );
}

Will only re-render when the player level up, where with the default Meteor.user(), the helper would have re-rendered every time the doc was updated.

fen747 · December 20, 2016, 11:54pm

Last update for along time I think (v1.0.1). There is now everything I could think to untill now. Next patches will be purely new features I haven’t designed yet

https://github.com/Fen747/meteor-boilerplate

fen747 · January 5, 2017, 1:34pm

New version changes available here !

github.com

Fen747/meteor-boilerplate/blob/master/HISTORY.md#v11--05012016

<h2>v1.1.3 | 01/03/2017</h2>
<ul>
	<li>Meteor updated to  1.4.3</li>
	<li>Added a 404 Not Found route in <b>/imports/api/routes/config.js</b></li>
	<li>Fixed a naming error in <b>DDPLogging</b></li>
</ul>
<h2>v1.1.1 | 31/01/2017</h2>
<ul>
	<li>Moved the window size reactive dict to its own file under /imports/modules</li>
	<li>Added the global variable <b>DDPLogging</b> to toggle on and off the listening of ddp messages on client</li>
</ul>
<h2>v1.1.0 | 05/01/2016</h2>
<ul>
<li>Added some functions to <b>funcProg.js</b> file</li>
<li>
	<ul>
	<li>Set <b>DBTimeZone</b> and <b>DBTimeZoneOffset</b> in funcProg.js to set your database time zone and offset (when you need to normalize documents created on a daily basis for example</li>
	<li>Then use <b>getDBTs</b> to get the corresponding timestamp for your database and <b>getDBDate</b> to get the corresponding date for the database</li>
	<li>Those two functions are very useful to normalize your formated date in documents for all your users all over the world.</li>
</ul>

This file has been truncated. show original

Thank you to those who starred it, it’s very enjoyable to see my first real big public repo being used by some other devs

1jerry · March 1, 2017, 12:36am

Thanks for sharing this. Since I have not started a new project since 1.0, I’m using this as a starting point for my 1.4 project since 1) it looks pretty good, and 2) there doesn’t seem to be any other current boilerplates for using Blaze. I’ll let you know how it goes. I will be adding CoffeeScript, Pug (Jade), Stylus, and ViewModel to my version.

Do you have a preference for passing along suggestions? This thread or github?

First suggestions (preferences, really):

Add a notFound page for the router
create an image in public/img so the directory exists
show usage examples and reasons why to use them for some of the library and modules you have obviously spent some time creating.

fen747 · March 1, 2017, 6:38am

For small requests like this, the forum is okay

I’ll do that later today, I have some some patch commits waiting for a new push eitherway !

fen747 · March 1, 2017, 7:45am

Do you have any specific request for completing the docs about libs and modules ? They are quite a lot and it will take time to code examples for each of them (specially for the Functional Programming file).

I might start by the one others devs are the more interested in.

EDIT : I just pushed the 1.1.3, with meteor version updated to 1.4.3 + not found page + DDPLogging fixed