javascript Archives - Creatronix

ES6: var vs let vs const

Jörn — Fri, 18 Aug 2017 19:57:49 +0000

Dealing with KnockoutJS I came across some newer features of the JavaScript language ES6

TL;DR: don’t use var anymore when You declare variables.

Some examples:

As You can see a variable declared with the var keyword is visible outside its enclosing scope. Most of the time it’s not what You want.

When You enable ES6 support in PyCharm it already warns You if You use var:

To declared a variable which is on visible in its scope You can either use let or const.

Let lets your variable be mutable so you can use it in a loop as counter. If You want to guarantee even more that one variable is used for one concept only You can use const which makes the variable immutable.

The post ES6: var vs let vs const appeared first on Creatronix.

Lint your JavaScript with grunt and jshint

Jörn — Tue, 08 Aug 2017 08:30:58 +0000

After I’ve introduced You to Yarn I will show You more client side tools in this post.

Grunt is a task runner which comes in handy for a lot of setup and configuring work e.g. concatenating and minimizing JavaScript or CSS files

To get started You can add grunt via yarn to your project

yarn add grunt

Configuration

Grunt looks for a Gruntfile.js file in your root directory. Yes it is Gruntfile.js with a capital ‘G’.

Linting with JShint

yarn add grunt-contrib-jshint

module.exports = function(grunt) {
  grunt.initConfig({
    jshint: {
      all: ['Gruntfile.js', '/js/*.js'],
      options: {
        globals: {
          jQuery: true
        }
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.registerTask('lint', ['jshint']);
};

This configuration will print all findings directly onto the console which is nice for testing the script but when you burn down your lint issues a file comes in handy.

Configuring JSHint’s Output Format

To visualize the findings in Jenkins you can configure the checkstyle format. It produces an XML file which you can use inside Jenkins’ checkstyle plugin.

When You want to have a more human readable format you can generate an html report. Therefore You have to install the jshint-html-reporter:

yarn add jshint-html-reporter

and configure the JSHint task accordingly.

options: {
   reporter: require('jshint-html-reporter'),
   reporterOutput: 'jshint.html'
 },

You can have both configurations in one file

module.exports = function(grunt) {

  grunt.initConfig({
    jshint: {
      options: {
        globals: {
          jQuery: true
        }
      },
      src_files: ['Gruntfile.js', 'app/static/js/*.js'],
      local: {
        options: {
          reporter: require('jshint-html-reporter'),
          reporterOutput: 'jshint.html'
        },
        src: [ "<%= jshint.src_files %>" ]
      },
      jenkins: {
        options: {
            reporter: 'checkstyle',
            reporterOutput: 'jshint.xml'
        },
        src: [ "<%= jshint.src_files %>" ]
    }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.registerTask('lint', ['jshint:jenkins']);
  grunt.registerTask('lint-local', ['jshint:local']);
};

The post Lint your JavaScript with grunt and jshint appeared first on Creatronix.

Bringing AJAX to Flask

Jörn — Fri, 20 Jan 2017 12:29:47 +0000

Flask is a micro web framework which is really fun to use. With the following snippet You have a complete web app working within seconds.

from flask import Flask # 1
 
app = Flask(__name__)   # 2

@app.route('/')         # 3
def hello_world():
    return 'Hello World!'

if __name__ == '__main__':
    app.run()           #4

All this snippet does is

Importing the Flask module,
Creating the app,
Defining an so called endpoint and finally
Running the web app in a container.

Flask brings its own WSGI server called “werkzeug”. Please use it just for development purposes. It is not suitable for live applications.

Rendering a Template

Because the days of writing HTML as strings in a servlet are over, Flask comes with a template language called “Jinja2”. We replace the line

return 'Hello World!'

with the render_template function and pass a template and the message into the function:

from flask import render_template
... 
@app.route('/') 
def hello_world(): 
    hello_string = "Hello World"
    return render_template("index.html", 
                           hello_message=hello_string)

Jinja2 uses curly brackets to identify their template code blocks.




    
    Title


{{ hello_message }}

{{ hello_message }} # is equivalent to
{% print hello_message %}

So if You want to show a list on your page containing your favorite fruits You can fetch a list of fruits from the server and let the template engine replace the markup with the data before handing the rendered page to the browser. We use a simple list for demonstration.

@app.route('/static_item_list')
def static_item_list():
    fruits = ["Apple", "Banana", "Lemon"]
    return render_template("static_item_list.html", 
                           fruits=fruits)


  {% for fruit in fruits %}
     
   {% endfor %}
   
  
    
      Fruit
    
  
  
       {{ fruit }}

Fruit
{{ fruit }}

Bringing AJAX to Flask

When we wanted to filter a list back in the old days, we had to do a complete roundtrip by sending a POST with parameters to the server, waiting for the response and rendering a new page. Ugh! In Flask it looks like this:

<form method="POST">

        {% for fruit in fruits %}
            
        {% endfor %}
    
    
        
            Fruit
        
        
            
                name="filter"/>
                
            
        
    
    
                {{ fruit }}

Fruit
{{ fruit }}

@app.route('/item_list_with_filter', methods=["GET", "POST"])
def item_list_with_filter():
    fruits = ["Apple", "Banana", "Lemon"]
    
    if "filter" in request.form:
        fruit_filter_value = request.form["filter"]
    else:
        fruit_filter_value = ""

    filtered_items = []
    for fruit in fruits:
        if fruit_filter_value.lower() in fruit.lower():
            filtered_items.append(fruit)

    return render_template("item_list_with_filter.html",
                           fruits=filtered_items)

Nowadays You can just refresh those parts of a site where the data should be updated. I will demonstrate this with some jQuery functionality, but You can do it as well in plain old vanilla JavaScript.

This is the udpated HTML page. Please note that the table body is empty and does not contain template language code.


    
        
            Fruit

First of all we bind a keyup event to the filter input. To ensure that the complete page is already loaded, we do it in the document-ready function:

$(document).ready(function(){
...
    $("#filter").keyup(get_table_data); 
...
});

To fetch data from the server we use the getJSON-function.

$.getJSON( url, [data], [callback] )

This function is a shortcut for

$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success
});

As URL we have to provide an endpoint that accepts GET requests, as data we give the value from the input field and last but not least as callback a function that will use the data from the response to update the table.

function get_table_data(){
    $.getJSON('/_items', {
        filter: $("#filter").val()
        }, function(data){update_table.call(this, data)}
    )
}

Let’s have a look at the before mentioned endpoint:

@app.route('/_items')
def items():
    filter_value = request.args.get('filter', "", type=str)
    fruits = ["Apple", "Banana", "Lemon"]

    filtered_items = []
    for fruit in fruits:
        if filter_value.lower() in fruit.lower():
            filtered_items.append(fruit)

    return jsonify(fruits=filtered_items)

There are two interesting parts here: To get the arguments from the request we use

request.args.get()

The get method takes the argument name, a default value and a type. Instead of returning a rendered template we use the method

jsonify()

That’s all it takes to get JSON data from a Flask application. The missing piece is the function which alters the content on the client side after receiving the data. It looks like this

function update_table (data) {
    var $tbody = $("#items").find("tbody");
    $tbody.empty();
    var rows = data.fruits.length;
    for (var i = 0; i < rows; i++) {
        var row = "" + data.fruits[i] + "";
        $tbody.append(row);
    }
}

This function clears the body of the table via empty(), iterates over the data and appends the new rows to the table body. and Bob’s your uncle!

The post Bringing AJAX to Flask appeared first on Creatronix.