Grunt helps front-end web developers automate common tasks such as: linting, testing, sass compilation, watching assets. Check basic features of node.js, npm and Grunt.
An overview of the steps required to build Javascript apps before and get them ready for deployment. It explains how Grunt helps us to validate, minimize and package our code.
Hitchhiker's guide to the front end development정윤 김
2016년 11월 5일 있었던 GDG DevFest 2016 Seoul 행사에서 진행된 `Boot Camp: 초보 개발자를 위한 웹 프론트엔드 개발 101` 워크숍의 front-end development 트렌드 및 프로세스 슬라이드입니다.
- 행사 URL: https://festi.kr/festi/gdg-korea-2016-devfest-seoul/program/92/
Splitting your source code into separate modules and importing them into the current namespace is the standard way of coding for the backend. Until recently this has not been possible in the frontend because of the time it would have taken to synchronously load all required assets.
Tools like Webpack and JSPM allow exactly that and much more. This talk is going to give you an overview over the two and show why you should stop putting everything into the global namespace.
A practical workflow using Bower and Grunt that keeps your vendor folder clean, copies your assets in different locations and makes your dependency management an easy task.
Grunt helps front-end web developers automate common tasks such as: linting, testing, sass compilation, watching assets. Check basic features of node.js, npm and Grunt.
An overview of the steps required to build Javascript apps before and get them ready for deployment. It explains how Grunt helps us to validate, minimize and package our code.
Hitchhiker's guide to the front end development정윤 김
2016년 11월 5일 있었던 GDG DevFest 2016 Seoul 행사에서 진행된 `Boot Camp: 초보 개발자를 위한 웹 프론트엔드 개발 101` 워크숍의 front-end development 트렌드 및 프로세스 슬라이드입니다.
- 행사 URL: https://festi.kr/festi/gdg-korea-2016-devfest-seoul/program/92/
Splitting your source code into separate modules and importing them into the current namespace is the standard way of coding for the backend. Until recently this has not been possible in the frontend because of the time it would have taken to synchronously load all required assets.
Tools like Webpack and JSPM allow exactly that and much more. This talk is going to give you an overview over the two and show why you should stop putting everything into the global namespace.
A practical workflow using Bower and Grunt that keeps your vendor folder clean, copies your assets in different locations and makes your dependency management an easy task.
Talking about future of NodeJS, from Node 7 to Node 10.
NPM 5. N-API, async_hooks, util.promisify().
A big part on the ESM vs CommonJS module loader, and all the problem NodeJS is facing to implement ESM.
The next generation JavaScript doesn't need to dependent on browser, that's just like other programming language. Node.js is it, no need browser, based on fastest V8 JavaScript Engine and provides many APIs for system integration. It can be used to server-side and system, even more purpose.
The SPDY Protocol is likely going to be the successor of http. This short talk summarizes the most important points and includes a demo on how to migrate a Wordpress blog on httpd.
AMD (Asynchronous Module Definition) is JavaScript's missing module system for the browser. It's a cosmos of interoperability, efficient loading, dependency resolution, code optimization, etc.
At excentos we're using it as part of the Dojo Toolkit to organize our single-page product advisor web apps.
I will give a short introduction to the concept and some tools and I'm going to explain why everyone with a reasonably-sized code base should adopt it.
"How to Use Bazel to Manage Monorepos: The Grammarly Front-End Team’s Experie...Fwdays
At some point, we reached the limit of the existing build process in the Grammarly Editor monorepo. Build tools required too much time to support, and each new package increased build time and made dependency management harder. To move further, we had to rethink the architecture of the build process. Our solution: We switched to Bazel. In this talk, I will share our findings and how we made the architecture of the build process scalable and predictable.
Fundamental of Node.JS - Internship Presentation - Week7Devang Garach
Fundamental of Node.JS - Internship Presentation - Week 7
What is Node.JS
Features of Node.JS
Node.JS Architecture
Core modules in Node.JS
Node.JS Installation
npm
Creating first node.js application
Node.js and server side JavaScript are powerful technologies, although they do not stand on their own in enterprise environments, where Java has been the reigning force for many years. Bridging Node.js and Java provides a much sought after migration path for many Java developers who are moving to their systems to JavaScript. Last year we opened sourced J2V8, a rich set of bindings for Google's V8 JavaScript runtime, this year we built upon that work to bring Node.js to JVM.
In this talk we will introduce Node4J, our NodeJS bindings for the JVM and demonstrate it in action. We will explore the performance characteristics and highlight tools that will help you develop, debug and deploy NodeJS applications running directly on the JVM. We will explain how we integrated NodeJS, with Java through a JNI bridge, and demonstrate how you can use this technology to bridge the gap between JavaScript and Java.
Advanced front-end automation with npm scriptsk88hudson
With a little planning and some helpful tools, you can use npm scripts to do complex front end builds without the use of any other build tool. Try it out!
Talking about future of NodeJS, from Node 7 to Node 10.
NPM 5. N-API, async_hooks, util.promisify().
A big part on the ESM vs CommonJS module loader, and all the problem NodeJS is facing to implement ESM.
The next generation JavaScript doesn't need to dependent on browser, that's just like other programming language. Node.js is it, no need browser, based on fastest V8 JavaScript Engine and provides many APIs for system integration. It can be used to server-side and system, even more purpose.
The SPDY Protocol is likely going to be the successor of http. This short talk summarizes the most important points and includes a demo on how to migrate a Wordpress blog on httpd.
AMD (Asynchronous Module Definition) is JavaScript's missing module system for the browser. It's a cosmos of interoperability, efficient loading, dependency resolution, code optimization, etc.
At excentos we're using it as part of the Dojo Toolkit to organize our single-page product advisor web apps.
I will give a short introduction to the concept and some tools and I'm going to explain why everyone with a reasonably-sized code base should adopt it.
"How to Use Bazel to Manage Monorepos: The Grammarly Front-End Team’s Experie...Fwdays
At some point, we reached the limit of the existing build process in the Grammarly Editor monorepo. Build tools required too much time to support, and each new package increased build time and made dependency management harder. To move further, we had to rethink the architecture of the build process. Our solution: We switched to Bazel. In this talk, I will share our findings and how we made the architecture of the build process scalable and predictable.
Fundamental of Node.JS - Internship Presentation - Week7Devang Garach
Fundamental of Node.JS - Internship Presentation - Week 7
What is Node.JS
Features of Node.JS
Node.JS Architecture
Core modules in Node.JS
Node.JS Installation
npm
Creating first node.js application
Node.js and server side JavaScript are powerful technologies, although they do not stand on their own in enterprise environments, where Java has been the reigning force for many years. Bridging Node.js and Java provides a much sought after migration path for many Java developers who are moving to their systems to JavaScript. Last year we opened sourced J2V8, a rich set of bindings for Google's V8 JavaScript runtime, this year we built upon that work to bring Node.js to JVM.
In this talk we will introduce Node4J, our NodeJS bindings for the JVM and demonstrate it in action. We will explore the performance characteristics and highlight tools that will help you develop, debug and deploy NodeJS applications running directly on the JVM. We will explain how we integrated NodeJS, with Java through a JNI bridge, and demonstrate how you can use this technology to bridge the gap between JavaScript and Java.
Advanced front-end automation with npm scriptsk88hudson
With a little planning and some helpful tools, you can use npm scripts to do complex front end builds without the use of any other build tool. Try it out!
Get Grulping with JavaScript Task Runners (Matt Gifford)Future Insights
Taken from the London Web Meet-up, this is Matt's session: Get Grulping with JavaScript Task Runners.
In this session Matt will introduce the attendees to Grunt and Gulp, two incredibly powerful JavaScript task runners. It will help clarify what they are, why you need them and how you could use them in your projects, including how to introduce them into your development workflow and cycle.
You will learn
* What Gulp and Grunt are
* Running Tasks – how they can be used
* Plugins, extensions and enhancements
* Building them into your workflow
* The differences between the two task runners
Gradle is a flexible general purpose build system with a build-by-convention framework a la Maven on top. It uses Apache Ivy under the hood for its dependency management. Its build scripts are written in Groovy.
Adopting GraalVM - Scale by the Bay 2018Petr Zapletal
After many years of development, Oracle finally published GraalVM and sparkled a lot of interest in the community. GraalVM is a high-performance polyglot VM with a number of potentially interesting traits we can take advantage of like increased performance and lowered cost. It can also tackle shortcomings of JVM/Scala we are struggling for years like slow-startup times or large jars. Lastly, thanks to its polyglot nature it can open interesting doors we may want to discover. On the other hand, GraalVM may still be bleeding edge technology and having a hard time to deliver the promised features. In this talk, I’d like to discuss advantages and disadvantages of adopting GraalVM, provide you guidance if you decide to do so and also share our story in this area including various samples, and recommendations. This talk is focused on JVM and Scala but should be beneficial for everyone with interested in this topic.
Unit testing in JavaScript? There is no such thing.” This is something most of the Java developers would say. With AngularJS coming more and more to scene and Google standing behind it, testing is starting to be core part of all AngularJS project. I would like to show how you can do unit testing in pure JavaScript (AngularJS) application (together with backend mocking…).
KSS, the new Ajax framework for Plone 3 comes with great components by default. But what if you need to integrate it with legacy Javascript? Or maybe you want to integrate that nice library/widget you found on the web. During this talk I will show you where you can extend KSS and how to do it. You can watch me create both the server side and client side code needed to integrate an existing piece of Javascript. After this talk KSS should have no limits for you.
Introduction to Nightwatch.js artifacts, usage in a CI environment, and current integration with Drupal 8.
Video of session: https://www.youtube.com/watch?v=9GYZJ1AZqI8
Security testing of YUI powered applicationsdimisec
http://lanyrd.com/2012/yuiconf/szwrf/
Everyone agrees that application security is of crucial importance, and attacks on web frontends are getting more frequent, sophisticated, and dangerous. Yet the area of security testing of frontend and YUI-based applications has so far received little attention. This talk highlights the need to embed security testing in the standard repertoire of every Javascript and YUI developer, alongside with functionality and performance tests. We will emphasize the security testing as part of development workflow - writing and running tests alongside creating the code. Our main goal is to attract the YUI community's attention to this grey area and start a discussion and cooperation of webappsec and YUI worlds.
After many years of development, Oracle finally published GraalVM and sparkled a lot of interest in the community. GraalVM is a high-performance polyglot VM with a number of potentially interesting traits we can take advantage of like increased performance and lowered cost. It can also tackle shortcomings of JVM/Scala we are struggling for years like slow-startup times or large jars. Lastly, thanks to its polyglot nature it can open interesting doors we may want to discover. On the other hand, GraalVM may still be bleeding edge technology and having a hard time to deliver the promised features. In this talk, I’d like to discuss advantages and disadvantages of adopting GraalVM, provide you guidance if you decide to do so and also share our story in this area including various samples, and recommendations. This talk is focused on JVM and Scala but should be beneficial for everyone with interested in this topic.
Similar to Continuous Integration for front-end JavaScript (20)
100 tests per second - 40 releases per weekLars Thorup
This talk shows how the Triggerz engineering team continuously deliver new software versions to our users.
The Triggerz product is a web application built with React, Node.js and PostgreSQL. The product has been live since October 2017 with users worldwide.
We have built a simple continuous deployment pipeline, also mostly in JavaScript, that we use to validate every push to master before deploying it automatically to production.
This talk demonstrates how we write tests and how the pipeline is scripted. We discuss the thinking behind and the tools that we've used to do continuous delivery.
The past years, a number of new database systems have appeared, like MongoDB and Redis. Most of them have radically new ways to look at data persistance, where efficient replication is prioritized over advanced query support.
In this talk we will discuss some of the benefits and drawbacks of the new key/value stores and document databases. As an example, we will demonstrate Redis, an advanced key/value store. Redis is different from most other key/value stores on two dimensions: It runs entirely in RAM and it supports a number of advanced data structures with accompanying specialized algorithms.
Automated end-to-end tests are often seen as a necessary evil. A common example is Selenium-based browser tests. This kind of testing has many drawbacks: 1) They take a long time to run. 2) They require complicated setup. 3) They are fragile. But it doesn't have to be like that!
In this talk I describe how we can write automated end-to-end tests that are 1) Superfast. 2) As easy to setup as unit tests. 3) As robust as unit tests.
This technique is leveraging existing unit testing techniques. Tests for lower layers (such as server code) is instrumented to record all requests and responses in a log file. Tests for higher layers (like client code) is extended with an mocking layer that automatically configures with the contents of that log file.
It is then possible to run a almost a hundred end-to-end tests every second.
A lot of applications these days have a substantial, if not a major, part written in JavaScript. And not only for the front-end part, as Node.js is gaining popularity on the back-end. You might already have started doing some unit testing for your JavaScript code, but JavaScript has a quite a few concepts where it differs from traditional back-end programming languages like C# or Ruby. This fast-paced talk will show best practices for unit testing code involving 7 of those concepts. We will cover:
- Asynchronous code, both with callbacks and with promises
- Time and timers
- Ajax requests
- DOM manipulation
- Responsive design with CSS media queries
- Cross browser compatibility
- Leak detection
Unit testing and test-driven development are practices that makes it easy and efficient to create well-structured and well-working code. However, many software projects didn't create unit tests from the beginning.
In this presentation I will show a test automation strategy that works well for legacy code, and how to implement such a strategy on a project. The strategy focuses on characterization tests and refactoring, and the slides contain a detailed example of how to carry through a major refactoring in many tiny steps
Advanced QUnit - Front-End JavaScript Unit TestingLars Thorup
Code: https://github.com/larsthorup/qunit-demo-advanced
Unit testing front-end JavaScript presents its own unique set of challenges. In this session we will look at number of different techniques to tackle these challenges and make our JavaScript unit tests fast and robust. We plan to cover the following subjects:
* Mocking and spy techniques to avoid dependencies on
- Functions, methods and constructor functions
- Time (new Date())
- Timers (setTimeout, setInterval)
- Ajax requests
- The DOM
- Events
* Structuring tests for reuse and readability
* Testing browser-specific behaviour
* Leak testing
One of the cornerstones in Agile development is fast feedback. For engineering, "fast" means "instantly" or "in 5 minutes", not "tomorrow" or "this week". Your engineering practices should ensure that you can answer yes to most of the following questions:
- Do we get all test results in less than 5 minutes after a commit?
- Is our code coverage more than 75% for both front-end and back-end?
- Can we start exploratory testing in less than 15 minutes after a commit?
- Do all our tests pass more than 90% of our commits?
This talk will give you practical advice on how to get to "yes, we get fast feedback".
Streamline your database changes by versioning your database instances and your database schema, running database instances locally and implementing database changes using migration scripts based on database refactoring patterns.
Advanced Jasmine - Front-End JavaScript Unit TestingLars Thorup
Code: https://github.com/larsthorup/jasmine-demo-advanced
Video: https://www.youtube.com/watch?v=g4eQplHxU18
Audio: https://www.youtube.com/watch?v=8FUwc3gZDMw
Unit testing front-end JavaScript presents its own unique set of challenges. In this session we will look at number of different techniques to tackle these challenges and make our JavaScript unit tests fast and robust. We plan to cover the following subjects:
* Mocking and spy techniques to avoid dependencies on
- Functions, methods and constructor functions
- Time (new Date())
- Timers (setTimeout, setInterval)
- Ajax requests
- The DOM
- Events
* Expressive matchers
- Jasmine-jQuery
* Structuring tests for reuse and readability
* Testing browser-specific behaviour
If you are like most test driven developers, you write automated tests for your software to get fast feedback about potential problems. Most of the tests you write will verify the functional behaviour of the software: When we call this function or press this button, the expected result is that value or that message.
But what about the non-functional behaviour, such as performance: When we perform this query the expected speed of getting results should be no more than that many milliseconds. It is important to be able to write automated performance tests as well, because they can give us early feedback about potential performance problems. But expected performance is not as clear-cut as expected results. Expected results are either correct or wrong. Expected performance is more like a threshold: If the performance is worse than this, we want the test to fail.
Test and Behaviour Driven Development (TDD/BDD)Lars Thorup
In this introduction to Test Driven Development (TDD) or Behaviour Driven Development (BDD) we give a high level description of what it is and why it is useful for developers. Then we go into some details on stubs and mocks, test data, UI testing, SQL testing, JavaScript testing, web services testing and how to start doing TDD/BDD on an existing code base.
How do you sell an agile project? Most clients expect to buy software by time-and-material or by fixed-price-fixed scope contracts based on detailed requirements. These models cannot create a fertile environment for collaboration between client and vendor.
In this presentation, we report on our experiments with commercial contracts that supports an agile development process, based on concrete examples of win-win contract types. We will outline the different aspects of these contracts, as well as experiences creating and delivering software solutions under these contracts.
High Performance Software Engineering TeamsLars Thorup
Based on my experiences building high performance engineering teams, this presentation focuses on the technical practices required. These practices centers around automation (build, test and deployment) and increased collaboration between Engineering and QA (TDD, exploratory testing, prioritization, feedback cycles).
For agile development to work well, it is important to have many small stories and many small tasks. This presentation will show how to divide epics into minimal achievable stories and how to decompose stories into minimal achievable tasks.
Automated Testing for Embedded Software in C or C++Lars Thorup
When software developers write automated tests for their software, the quality increases, the design improves and the project becomes more manageable. The development also becomes more fun!
In this presentation you will learn how to write automated tests for embedded software. You will see a live demonstration of writing an automated test for a feedback control algorithm in C. I will also talk about the benefits of writing tests and why it can actually improve your design and save you time.
When having a large set of automated tests it becomes valuable to run all tests automatically every time the code is changed. I will touch upon what is the best continuous integration setup for embedded software projects.
Sample code can be downloaded from http://www.zealake.com/public/embedded-autotest.zip
Unit Testing in JavaScript with MVC and QUnitLars Thorup
While more and more application code move from the back-end to a JavaScript-based front-end, we still need to test this code efficiently. Testing JavaScript is often done using browser automation frameworks, but system-level testing is slow and brittle.
Here we present a way to structure your JavaScript application according to the Model-View-Controller (MVC) design pattern and how this enables us to write unit tests for a large part of the application logic, using a testing framework like QUnit.
Sample source code available at http://www.zealake.com/public/javascript-unit-testing.zip
Learn about the benefits of writing unit tests. You will spend less time fixing bugs and you will get a better design for your software. Some of the questions answered are:
Why should I, as a developer, write tests?
How can I improve the software design by writing tests?
How can I save time, by spending time writing tests?
When should I write unit tests and when should I write system tests?
2. Who is Lars Thorup?
● Software developer/architect
● JavaScript, C#
● Test Driven Development
● Continuous Integration
● Coach: Teaching agile and
automated testing
● Advisor: Assesses software
projects and companies
● Founder of ZeaLake
4. GruntJS
● Command line ● Good support for
● NodeJS ● RequireJS
● CoffeeScript
● Static analysis
● JSHint ● Lots of other plugins
● Run tests in PhantomJS ● Popular and actively
● QUnit developed
● Jasmine
● and others
● Code Coverage
● Istanbul
● Blanket
5. src/test/code.test.js
describe('durationInEnglish', function () {
it('should return "now" when duration is 0', function () {
expect(durationInEnglish(0)).toBe('now');
});
it('should return "x seconds ago" when ...', function () {
var now = new Date(2013, 04, 19, 11, 00, 17);
var then = new Date(2013, 04, 19, 11, 00, 00);
expect(durationInEnglish(now - then)).toBe('17 seconds ago');
})
});