From SPA to PWA
Progressive Web Apps are the next level of browser based applications. While Single Page Apps (SPAs) have already meant a giant leap forward, PWAs are taking things even one step further. They offer a rich user experience that parallels what users know and expect from native apps and combine that with the benefits that browser based applications provide. In this post, we’ll look at how to turn a Single Page App into a Progressive Web App.
Read onBuilding a PWA with Glimmer.js
We recently set out to build a progressive web app with Glimmer.js. Instead of building it with Ember.js, which is our standard framework of choice, we wanted to see how suitable for prime-time Glimmer.js is and what we’d be able to accomplish with it. To put it short, we are really happy with how building the app went and the result that we were able to achieve. In this series of posts, we will give some insights into how we built the app, why we made particular decisions and what the result looks like.
Read onactix – a basic TCP client
In our last post about actix we introduced you to the Rust programming language and the actix actor framework. This week we will build a basic TCP client with actix.
Read onember-intl data loading patterns
At simplabs we ❤️ ember-intl and use it for all our projects where translations or other localizations are needed. ember-intl is based on the native Intl APIs that were introduced in all newer browsers a while ago. Unfortunately some users are still using browsers that don’t support them and this blog post will show you our preferred way to load the necessary polyfill and the associated data.
Read onactix – an actor framework for the Rust programming language
While we mostly focus our work around Ember.js, Rails and Elixir, we sometimes experiment with other technologies for internal projects. This time we tried out Rust, and more specifically the actix actor framework. This blog post is a short intro into what we’ve discovered so far.
Read onAutodiscovery for the Ember.js component playground
In our previous post about ember-freestyle we have setup
a component playground for our Ember.js application. In this post we will
discuss how to implement “convention over configuration” for it by automatically
discovering new components and showing them in the playground.
A Little Encouragement Goes a Long Way in 2018
In May 2018, Ember Core team member Katie Gengler published Ember’s 2018 Roadmap: A Call for Blog Posts. With this call-to-action she invites the community to give feedback on their hopes and wishes for Ember moving forward. In this context, I also want to share some of my own thoughts on Ember and what I’d be excited to see in its nearest future.
Read onHandling Webhooks in Phoenix
I recently had to implement a controller, which took care of receiving and processing webhooks. The thing is, the application had to handle webhooks which often contained very different information, and they were all going to one route and one controller action. This didn’t really seem to fit with my goal of keeping controller actions concise and focused. So I set out to find a better solution.
Read onUsing ember-freestyle as a component playground
A component playground is an application that you can use to test out and
play around with your custom components in isolation from the rest of your
project. In the React and Vue ecosystem Storybook is a quite popular project
that implements such a component playground as part of your app. In the Ember
ecosystem we have the ember-freestyle addon that can be
used for this purpose. This blog post will show you how to install
ember-freestyle in your app and how to use it to build and test components
in isolation.
Enginification
We recently improved the initial load time of an Ember.js app for mobile clients, by using Ember Engines and leveraging that to lazily loaded parts of the app’s code. In this blog post we’re going to show how we extracted the engine out of the app and discuss some smaller issues we ran into along the way and how we solved them. So let’s dive right in!
Read onember-test-selectors: The road to 1.0
Back in January we wrote about the
latest changes
in ember-test-selectors
and how we implemented them. Since then we adjusted a few things and this blog
post should give you an idea what has happened so far and what else will happen
before we feel comfortable promoting the addon to v1.0.0.
High Level Assertions with qunit-dom
At EmberFest this year we presented and released
qunit-dom. A plugin for
QUnit providing High Level DOM Assertions with the
goal to reduce test complexity for all QUnit users. This blog post will show
you how to write simpler tests using async/await and qunit-dom.
As an introduction to what this means let’s start with an example template for an Ember app that we will write a test for:
From the template above you can see that we have essentially two states that
we need to test: one with and one without a username property being set.
Magic Data in Tests
Often when working on large codebases, my changes break some existing tests. While I would prefer my coding to be perfect, it’s highly unlikely that I’ll ever achieve the state of coding zen, so it’s nice to know I have a test suite to catch me when I fall. Given that the codebase is large and in the majority not written by me, I tend to be introduced to code via the test files. One important principle I’ve started to follow when writing and refactoring tests is AAA.
Read onCreating Web Components with Glimmer
At this year’s EmberConf the Ember core team officially announced the release of Glimmer - a light-weight JavaScript library aimed to provide a useful toolset for creating fast and reusable UI components. Powered by the already battle-tested Ember-CLI, developers can build their Glimmer apps in an easy and efficient manner as they already came to love building applications in Ember.js before.
Read onOn Computed Properties vs. Helpers
Ember’s computed properties are a great mechanism for encapsulating reactive logic and implementing consistent, auto-updating UIs. Since the past year or so though, there seems to be an increasing tendency in the community to use template helpers as the main tool for expressing this kind of logic right in the templates. Following up on a talk I gave at last year’s EmberFest, I’ll elaborate in this post why I think that is often not the best choice and what the drawbacks are.
Read onUsing npm libraries in Ember CLI
tl;dr Use npm instead of Bower whenever you can!
With Ember 2.11 we are now using the ember-source module and
no longer the ember Bower package. In the upcoming Ember CLI 2.12
release, Bower will also no longer be installed by default and only install
lazily when an addon requests it. All this indicates that from now on we should
try to use npm packages instead of Bower whenever possible. This blog post
will explain how we can do that and what options are available to us.
Class based Computed Properties
We think Computed Properties in Ember are awesome. We also think they are in many cases the better alternative to template helpers as they allow for cleaner separation of where a computation is triggered and the implementation of that computation. In some cases though it is currently very hard to do things in Computed Properties (and Computed Property macros in particular) that are possible with Class based helpers. With the introduction of Class based Computed Properties we’re aiming at making these scenarios solvable easily.
Read onNew features for ember-test-selectors
In March 2016 we have released the first version of
ember-test-selectors and
today we are proud to present you our next milestone: 0.1.0.
While 0.1.0 does not sound like much has changed, the addon has actually
gained a lot of new functionality and should be considered our release candidate
for 1.0.0.
This blog post will highlight the major changes in this release, and will give you a short introduction into how we have implemented these new features.
Read onOut-of-the-box FastBoot support in Ember Simple Auth
Ever since FastBoot was first announced at EmberConf 2015 it was clear to us that we wanted to have out-of-the-box support for it in Ember Simple Auth. Our goal was to make sure that Ember Simple Auth did not keep anyone from adopting FastBoot and adopting FastBoot would not result in people having to figure out their own authentication and authorization solutions. Today we’re happy to announce the availability of Ember Simple Auth 1.2.0-beta.1, the first release with out-of-the-box support for FastBoot.
Read onUsing better element selectors in Ember.js tests
We just released ember-test-selectors, an Ember Addon that enables better element selectors in Ember.js tests. It removes all data attributes starting with data-test- from the application’s templates in the production environment so that these attributes can be used to select elements with in acceptance and integration tests without polluting the markup that is delivered to the end user.
ember-cli-deploy-notifications
A few weeks ago a new version of the “official” ember deployment solution ember-cli-deploy was released:
ember-cli-deploy 0.5 is now released and ready for use with a great docs site and already-rich plugin ecosystem: https://t.co/6yhjmjQrYD
— Luke Melia (@lukemelia) 29. Oktober 2015Updating to Ember Simple Auth 1.0
With Ember Simple Auth 1.0.0 having been released a few days ago, a lot of people will want to upgrade their applications to it so they can finally make the switch to Ember.js 2.0. While quite a big part of the public API has been changed in 1.0.0, updating an application from Ember Simple Auth 0.8.0 or earlier versions is actually not as hard as it might appear at first glance. This post explains the steps that are necessary to bring an application to 1.0.0.
Read onRails API Auth
We are happy to announce the first public release of the rails_api_auth gem. rails_api_auth is a lightweight Rails Engine that implements the “Resource Owner Password Credentials Grant” OAuth 2.0 flow as well as Facebook authentication and is built for usage in API projects. If you’re building a client side application with e.g. a browser MVC like Ember.js (where you might be using Ember Simple Auth which works great with rails_api_auth of course), a mobile app or anything else that’s backed by a Rails-based API, rails_api_auth is for you.
Read onEmber Simple Auth 1.0 - a first look
The first beta of Ember Simple Auth 1.0 will be released soon and this post provides a first look at the changes that come with it.
Read onEmber.js Workshop in Munich, July 22nd-24th
We are organizing a three day Ember.js Workshop in Munich from July 22nd to 24th, taking participants through building a full Ember.js application.
Read onThe most important command when working with XCode 6
defaults write com.apple.CrashReporter DialogType none
This disables the Crash Reporter window that shows when SourceKitService crashes (which is all the time). So while it doesn’t prevent SourceKitService from crashing at least you don’t have to click that window away anymore.
Read onTesting with Ember Simple Auth and Ember CLI
The last blog post showed how to use Ember Simple Auth with Ember CLI to implement session handling and authentication. This post shows how to test that code.
Read onUsing Ember Simple Auth with ember-cli
With the latest release of Ember Simple Auth, using the library with ember-cli has become much simpler. As ember-cli in general is still pretty new to many people though, this post describes how to setup a project using Ember Simple Auth with ember-cli.
Read onEmber.SimpleAuth needs a logo!
Every good open source project needs a nice and shiny logo these days. It would be great if Ember.SimpleAuth had one as well. As I’m not really an expert in these things it would be great if some of the more artistic advanced contributors/followers could contribute something!
Read onEmber.SimpleAuth 0.3.0
Ember.SimpleAuth 0.3.0 was just released. The main change in this release is the split of Ember.SimpleAuth into one core library and a set of extension libraries. These extension libraries include everything that’s not mandatorily required for Ember.SimpleAuth like authenticators, stores etc. so that every application would only have to load whatever it needs.
Read onEmber.SimpleAuth 0.2.1
Ember.SimpleAuth 0.2.1 was released with some minor improvements: https://github.com/simplabs/ember-simple-auth/releases/tag/0.2.1
Read onEmber.SimpleAuth 0.2.0
Ember.SimpleAuth was released with a completely rebuilt build and testing infrastructure as well as some important bug fixes. Find the complete release notes on github.
Read onEmber.SimpleAuth 0.1.0
Since Ember.SimpleAuth was released in October 2013, there were lots of issues reported, pull requests submitted and merged etc. Now all this feedback together with some fundamental design improvements results in the release of the 0.1.0 version of Ember.SimpleAuth. This is hopefully paving the way for a soon-to-be-released version 1.0.
Read onEmber.SimpleAuth implements RFC 6749 (OAuth 2.0)
Update: Ember.SimpleAuth 0.1.0 has been released! The information in this is (partially) outdated.
With the release of Ember.SimpleAuth 0.0.4 the library is compliant with OAuth 2.0 - specifically it implements the “Resource Owner Password Credentials Grant Type” as defined in RFC 6749 (thanks adamlc for the suggestion). While this is only a minor change in terms of functionality and data flow, used headers etc. it makes everyone’s life a lot easier as instead of implementing your own server endpoints you can now utilize one of several OAuth 2.0 middlewares that already implement the spec.
Read onEmber.SimpleAuth
Update: Ember.SimpleAuth 0.1.0 has been released! The information in this is (partially) outdated.
After I wrote 2 blog posts on implementing token based authentication in Ember.js applications and got quite some feedback, good suggestions etc., I thought it would be nice to pack all these ideas in an Ember.js plugin so everybody could easily integrate that into their applications. Now I finally managed to release version 0.0.1 of that plugin: Ember.SimpleAuth.
Read on(better) Authentication in ember.js
Update:I released an Ember.js plugin that makes it very easy to implement an authentication system as described in this post: Ember.SimpleAuth.
When we started our first ember.js project in June 2013, one of the first things we implemented was authentication. Now, almost 2 months later, it has become clear that our initial approach was not really the best and had some shortcomings. So I implemented a better authentication (mostly based on the embercasts on authentication).
Read onAuthentication in ember.js
Update:I released an Ember.js plugin that makes it very easy to implement an authentication system as described in this post: Ember.SimpleAuth.
Update: After I wrote this I found out that it’s actually not the best approach to implement authentication in Ember.js… There are some things missing and some other things can be done in a much simpler way. I wrote a summary of the (better) authentication mechanism we moved to.
I’m using the latest (as of mid June 2013) ember/ember-data/handlebars code directly from the respective github repositories in this example.
Read on