More than a live-reload server, built for efficient frontend development
- create static server at target dir (default in current dir)
- auto reload : editing css will update styles only, other files will reload the whole page.
- weinre integrated use
- proxy server mode, use it with an existing server
- http request mock by
-a addon，the addon is also live reloaded
- connect-middleware support
Front end is product for the user. Does’nt matter how complex and well designed back-end you have, if your front-end lacks the user expectations then at some point it’s gonna fail. In previous tutorial we have configured the express.
In this tutorial i am going to explain how to use EJS to template your advanced web applications. For those who are confuse with HTML and EJS. EJS parse complete HTML without any issue, with that it also provide some cool features which i am gonna explain below.
Beauty of EJS is that you can use one template to perform multiple operations. For.eg if i create on EJS file and set the title, head, div ID etc coming from server. I can set it multiple times depending upon the routes call.
In a recent article I showed how you can use webrtc, canvas and websockets together to create a face detection application whose frontend runs completely in the browser, without the need for plugins. In that article I used a Jetty based backend to handle the image analysis using OpenCV through the JavaCV wrapper.
When I almost finished the article, I noticed that websockets is also supported from Play 2.0. I really like developping in Play and in Scala so as an experiment I rewrote the backend part from a Jetty/Java/JavaCV stack to a Play2.0/Scala/JavaCV stack. If you want to do this for yourself, make sure you start with the frontend code from here. Since the frontend code hasn’t changed except the location where the websockets are listening.
It’s time to take your workflow to the next level! Yeoman makes Front-End Workflow not only fun, but powerful, professional and very cool.
If you’re a front-end developer and you don’t use Yeoman, Grunt and Bower, then get ready to enjoy the complexities of front-end development in a whole new way.
Yeoman will scaffold out your project in moments.
It then harnesses Grunt to watch for changes to your files and automatically refresh your web browser.
Finally, it uses Bower to apply package management to all of your front end files.
Bower Tutorial: http://www.youtube.com/watch?v=Vs2wdu…
Bootstrap Tutorial: http://www.youtube.com/watch?v=no-Ntk…
Github Tutorial: http://www.youtube.com/watch?v=0fKg7e…
Web Development Career Advice: http://www.youtube.com/watch?v=zXqs6X…
There are many tutorials around the web that explain some stuff about web development in Java using servlets and JSP pages, however I have never found aconcise, simple enough for beginers, tutorial. A tutorial like that should explain the whole process of creating a simple web app, including the frontend, the backend, and most importantly, the ways that someone can use to interact with both of them. It is not enough to show how to get information from the server, it is also important to kn0w how to differentiate between the information in a structured way, as well as to know how to make changes to the backend through the application environment.
What we want to achieve by this post here, is to guide through the whole process of creating a complete “toy” web application. It is a “toy” application in the sense that it does only two things and we are using no extra features to make the environment beautiful. The purpose of the application will be simple:
- Add a band name with a list of albums (separated by commas) and press the “Submit” button to add them to the database.
- Press the “Show bands!” button to get a list of the bands, or the “Show bands and albums!” button to get a list of bands with their albums.
The look of the app is as bare-bones as possible, but the code behind it is everything you need to start creating your own dynamic web applications, which are most commonly called CRUD applications (Create, Read, Update, Delete). They are called that way because all their functionality can be abstracted to these very basic commands.
Before we start creating the application step-by-step, let’s take a look at all the tools that we are going to work with in this example:
- Eclipse Luna
- Java 7
- Tomcat 7 (web application server)
- Gson 2.3 (Google Java library)