Starting your next Javascript project can be frustrating or overwhelming when you have to set up your local development environment.
The most of the new Javascript techniques and frameworks are dependent on node and NPM.
Especially when you want to create a tutorial, blog post or prepare a workshop.
The setup for each type of operating system can take to much time and your audience can lose the focus on the message you are trying to send.
For this problem, CodeSandbox can help you out! On codesandbox.io you can start your next project with just one click and demonstrate, experiment or build cool stuff.
Continue reading →
In this report Sjoerd Valk (@Sjoerdus) and Martijn van der Wijst (@vanderwise) try to sum up their experiences in Cluj-Napoca, Romania.
They stayed in Cluj during the 17th and 21st of April to attend the JSHeroes conference, a frontend conference all about JavaScript.
Presented by heroes of the JavaScript open source community.
Although most of the speakers admitted they weren’t really heroes, the very last speaker gave his talk in a hero-esque costume.
This year marks only the second edition of JSHeroes, but it’s organized really professional.
Speakers are from all over the world, and the location is a chique hotel.
A few kilometers out of the city center.
Its grandeur reminds us a bit of the Grand Budapest Hotel.
The name too by the way: the Grand Hotel Italia.
On Wednesday we followed an Angular Masterclass.
Thursday and Friday are the JSHeroes conference days.
The talks are just 30 minutes each. A quick pace and quite diverse topics.
The popular frameworks (React, Angular and Vue) were covered much, but also webfonts, Codesandbox, and V8, the engine behind JavaScript.
Continue reading →
As all who have used it know Selenium is a powerful tool when testing front-end applications.
I personally use it in combination with protractor.
This is because most of the work I do is with Angular and AngularJS applications.
When you are using Typescript extending classes is an easy thing.
In light of this I’ve been experimenting with new approaches to creating page objects.
The experiments started out by creating a class and then passing the "container" to it’s constructor.
This is a powerful mechanism which has served me well during my time working with non-Typescript AngularJS.
But the downside for this approach is that you’d have to expose each and every API function Selenium gives you.
Even if you’d only expose those functions you’d need; it would still feel like a hassle. The extensions would look something like this:
And though this works and makes it all very explicit there had to be a better way.
So when looking into the API for Selenium it exposes two classes which are exactly what we need.
These being: ElementFinder & ElementArrayFinder.
Continue reading →
Combining Angular2 and Spring Boot is a great way of getting up and running quickly with a new web application. However, it can be challenging to fit all the different pieces together in the beginning. In this blog post we will create a new project that is easy to build and run across different environments. The goal is to create a minimal, but runnable, application with as little dependencies and setup as possible. You can then start expanding the application however you see fit. We will create the Angular2 application using angular-cli. This allows us to easily generate a new project with a clear structure. This will also make it easy to add new elements to our Angular2 application. When adding new elements with angular-cli, we will maintain the same structure and wire the new elements together automatically. Angular-cli is an npm module, so it requires Node and npm to install and run. Make sure to install a recent version of both of these applications before continuing with the steps below. We will use Maven as the overall build manager for our application. The steps should be easy to follow and will not require a lot of work. However, you can get the result directly in this GitHub repository if you want to. There is a seperate commit for every step.
The first step is to generate a new Spring Boot project at https://start.spring.io. I've used the values in the screenshot below. Of course you can use your own group and artifact ids. We need at least the Web plugin to let Spring Boot serve the Angular2 application. If you already know you need more dependencies for your project, feel free to add them. Click on Generate Project to download the zip file with your new Spring Boot project. Extract the zip file somewhere on your computer. Then open a command prompt and go to the newly created project directory.
Continue reading →
Having a Angular HTML5 single page application and a Spring Boot application, we would like to serve the complete Angular app from Spring Boot.
This blog shows you a couple simple steps to get everything up and running: run NPM from Gradle, integrate the Gradle frontend build in the main build and support HTML5 mode in the ResourceHandler of Spring Boot.
Create a subdirectory called frontend with the frontend code and build scripts (webpack, npm).
Let's assume our npm start and npm run watch output to the /frontend/dist/ directory.
First we need to make sure the frontend code is build when we run gradle build on our project.
We can use the plugin gradle-node-plugin for this.
Go ahead and create a /frontend/build.gradle file.
Continue reading →
