Meteor Blaze Templates done right!

I often hear amazing and simple people find Meteors Blaze render engine, but in the same sentence mention how its difficult to manage large templates or create re-useable components. In my last two+ years working with Meteor I came across the same hurdles, but also found great solutions. So I thought its time to share my best practices in a blog post. Though this post is for advanced user, I want to give new comers a short intro into Meteors. If you’re looking for something specific you can jump right there: Using template-var Passing data around Accessing template vars from inside callbacks Reacting on data context changes Passing data in …

Add better modals to ethereum:elements

ethereum:elements gives you useful elements to make building a dapp more fun. One element, which was there since a while has now got a better API. Instead of realing on iron:router, it uses now a global object called EthElements.Modal to show and hide modals, read below to see how you can make use of them. Note that when you use the modals in combination with the dapp-styles, they look even more awesome! To start just place a modal placeholder before the closing body tag. {{> dapp_modalPlaceholder}} Render without route To render the modal simply call: EthElements.Modal.show(‘myContentTemplate’); // Or with data for the template EthElements.Modal.show({ template: ‘myContentTemplate’, data: { myData: ‘some …

Meteor Build Client

Since more to than 2 years I’ve build Meteor applications. Interestingly I’ve build most of them only using the client part. Working with TunedIn we used a LAMPP stack API, and in my current work I use Meteor to build Ðapps, which don’t have a server in the traditional sense, instead they only talk to the blockchain and get delivered over swarm, a decentralised filesystem. I wrote a while back about using Meteor as frontend library and wrote a little grunt script, which did this. My blog post got more than 3000 hits in just two days, so there seems to be a great interest in that use case. A …

Template-Var update

I am very busy improving the ethereum platform API and therefore i’m not writing to much updates here. One improvement i did to a package of mine today i want to share, though. Template-Var the package, which allows you to set template specific reactive variables has now two new methods: TemplateVar.getFrom(selector, propertyName) – which allows you to get receive vars from other templates by simply passing a selector of one of its elements. TemplateVat.setTo(selector, propertyName, value) – which does the same for setting reactive vars to other templates. Inside this other templates instances you can still use TemplateVar.set()/.get to alter the reactive variables as well. Hope you like and use …

On Angular.js

Probably everyone who want to built modern web applications stood once before the choice of the framework, so did i a 2 years back. At the time angular.js became popular and i stood before the decision to either use backbone, ember.js or angular. What i didn’t like about angular was its very specific HTML attribute syntax. I wanted to write clean HTML not some custom attribute mess. Luckily i stumbled over Meteor! At the time Meteor was not quite ready yet and single page apps were not the standard, so it was quite a risk. I went that road and build a Meteor app, which only used its frontend part …

Meteor Book and updated packages

Its a while since wrote something here, so i will post an update of whats going on in the background. My book Over the last 9 months or so i wrote a book called “Building Single page Web Apps with Meteor” and i’m finally almost done. I’m currently writing on the last chapter titled “Testing in Meteor”, which drags a little as velocity – meteors official testing framework is quite not ready just yet. The book writing experience was long, though it was a very fluid process until the last few months were i basically ran behind every change in the API to keep all chapters updated 🙂 But i …

Meteor template animation helper

UPDATE 04.06.2015 Better use the new template animation helper, which uses ui_hooks to start animations: https://atmospherejs.com/frozeman/animation-helper UPDATE 23.10.2013 You can now also pass a template name to the {{AnimateTemplate “…”}} helper, this will render the template in place, switching a hidden class to animate on the element(s) with the class animate. Additionally the data context of this template gets the _templateAnimationKey, so you can manually fade the template out. To do that call the following inside a helper or event of that template: Update made BLAZE ready, the new render engine of meteor View/Session.set(this._templateAnimationKey, false); If you’re inpatient check out atmosphere. I love meteor for its simplicity, but there is …

Using Meteor as frontend library!

UPDATE You can now use my CLI to get the client part of your Meteor app! If you’re impatient go here: https://github.com/frozeman/MeteorFrontend Meteor is awesome, i loved it immediately as i saw the video. The way you can build one page apps is absolutely intuitive. I struggled with Ember.js, Backbone.js and AngularJS (which clutter the HTML too much), but Meteor really got it, in my opinion. The problem with Meteor is that it forces you to use the full-stack. Natively there is currently no easy way to separate the frontend from the server in Meteor. As i’m using Meteor to build the awesome TunedIn WebApp and we have already an …