No Fluff Just Stuff (NFJS) brings the New England Software Symposium conference to the Boston area every spring and fall. Speakers deliver topics related to the latest in technology. Topics at this year’s fall event included everything from Java 8, HTML5, Spring, Android development, Groovy, Gradle, Cujo.js, and team-based topics like Quality Is a Team Sport. The topics that I enjoyed were about Java 8 and HTML5.
Java 8 New Features
Venkat Subramaniam presented an interesting session about Java 8, which is planned for release in March 2014. Features like Lambda expressions, functional interface, and stream are reasons why the Java community is excited about this release. So, what are these features?
Until now, an interface could not have a default method definition, but Java 8 allows default and static methods in an interface. Having a default method in interface makes it easier to modify an existing interface without breaking the code that implements it.
Functional interface
Functional interface is an interface that has only one abstract method. A lambda expression instantiates it, as there is only one abstract method. That interface can have more than one default method, but only one abstract method.
Lambda expressions
Lambda expressions enable developers to treat functionality as a method argument, code, or data.
It consists of a comma-separated list of formal parameters enclosed in parentheses, a ->, and body.
public interface Sample {
public void invoke(String s1, String s2);
}
public interface Cart {
default void foo(){
System.out.println("Calling Cart.foo()");
}
}
public class Mobile implements Cart {}
Mobile mobileCart = new Mobile();
mobileCart.foo(); // prints Calling Cart.foo();
public class Sample {
public static void main(String[] args) {
List numbers = Arrays.asList(1, 2, 3, 4, 5, 6);
numbers.forEach(number -> System.out.println(number));
}
Stream
Use stream to perform functional-style operations on streams of elements:
int sum = widgets.stream()
.filter(b -> b.getColor() == RED)
.mapToInt(b -> b.getWeight())
.sum();
This code filters the widgets collection, for b, where b.color is red, and then gets the sum of the weights of red widgets.
Stream is not a data-storage structure, but instead conveys elements from a data structure, such as an array through a pipeline of computational operations. Venkat showed how this can simplify Java code by reducing the number of lines of code that operate on a data set based on a series of conditions.
import java.util.*;
import java.util.function.*;
public class Sample {
public static void main(String[] args) {
List numbers = Arrays.asList(1, 2, 3, 4, 5, 6);
int totalOfValuesDoubled = 0;
for(int number : numbers) {
totalOfValuesDoubled += number * 2;
}
System.out.println(totalOfValuesDoubled);
System.out.println(
numbers.stream()
.mapToInt(number -> number * 2)
.sum());
}
}
HTML5
HTML5 and CSS styles make developing web applications with a rich user experience more fun, while reducing the requirement for JavaScript in their development.
The W3Schools HTML section has very good HTML5 examples.
The features discussed at the symposium used Canvas, local storage, and the usage of content-specific elements instead of div, CSS 3 support, and form validations.
<DOCTYPE html>
This declaration at the top of an html page lets the browser know that the page uses HTML5. All browsers don’t support HTML5 as robustly, but it is so powerful that developers are willing to use it to take advantage of the ease at which improved user experience can be achieved.
Content-specific elements
There are new content-specific elements in HTML5, including article, footer, header, nav, section.
<article>
<article> is useful to display blogs, news articles, and the like. Anything written between can be a story on its own.
<article> <h1>Fall colors</h1> <p>Fall is the time when leaves change color before trees lose leaves.</p> </article>
<header> and <footer>
The benefit of content-specific tags is that they can be easily styled using CSS as to their location on the page. For example, all sections in a page can be styled in a similar way.
Canvas
Another interesting feature in HTML5 is canvas.
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>
The Canvas component makes an area on the page where you can draw graphics. As Venkat showed us, there is great potential for canvas. It can be used to create art, design, and even for a video game. From changing color, drawing lines and shapes, to moving images, HTML5 provides powerful tools for front-end developers.
Client-side form validation made easy by HTML5
HTML5 allows basic form validations on the client side without making server calls. For example, we can validate up front if an input field is not left blank. Input types can be date, email, telephone number, month, number etc. Also, if the user has entered data that does not match the input type, the browser will give a warning.
Ghost images that prompt users on what to print, such as first name, last name, date etc., can be displayed in the input box making it easier for users to know what should be entered in a field.
<form action="demo_form.asp"> Birthday (month and year): <input type="month" name="bdaymonth"> <input type="submit"> </form> |
This will even show a calendar, making it easy for a user to pick a date without any added code to display the calendar in the page.
Ghost effect, rounded edges, browser prompt, and browser validation messages make creating a great user experience, without third party tools, so much easier.
Video and sound tags
You can now embed videos and sound effects in a web page using the <video> and <sound> HTML5 tags. Until now, if a developer wanted to embed a video, they used the <object> tag and rely on third party tools like Flash to make sure the video worked properly. With HTML5, users don’t need to install a Flash player to view the video, and the page can be viewed from mobile devices as well.
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4> </video> |
Local storage:
The local storage feature seems to be a favorite amongst front-end developers. This can be useful in making web applications usable even when the user loses WIFI for a little while.
A program can store data in the client web browser on the user’s device, and data is transferred when the user is ready to make a transaction. For example, a user’s choice in a shopping cart can be stored on the user’s machine. When the user comes back to the web page after a few hours or even days, as long as that data is in local storage, the web site will remember the user’s selection without saving any data in expensive server databases.
localStorage.lastname="Smith";
document.getElementById("result").innerHTML="Last name:"
+ localStorage.lastname;
|
Local storage is easier, faster, no cookie is required, data does not get deleted when browser is closed, and there is no expiration date.
I find going to NFJS worthwhile because I can take in lots of great information like this and so much more in just one weekend.
What did you learn at NFJS this fall? Share it in the comments section.
Leave a Comment