Architecture & Workflow of Modern Web Apps

Editor's Notes

• #2: This architecture combines the advantages of traditional Web applications - dynamic behavior, networking, and easy access from the browser - with those of classic desktop client applications: Offline availability, fast response time and speed. How many of you are backend developers? How many of you are frontend developers? How many of you are full stack developers? How many of you have never used AngularJS? How many of you have been using it for more than a year?
• #3: A problem we regularly face in this industry is an abundance of choice. We have a plethora of tools, frameworks, languages, abstractions and platforms. Choice is ultimately good for competition and innovation, however when faced with too many choices, we can feel paralysis. Rather than making a choice we feel frozen and alone with the indecision of having too many options in front of us. This isn’t necessarily an industry problem — it’s a human problem. People often consider that creating a web application is done by creating a bunch of HTML, Javascript and CSS files together in a text editor and uploading them on the web. Well, things have changed and in this presentation, you will see how the workflow used to deliver web applications has evolved over the past few years! We will start by seeing how you can use Yeoman and its generators to kickstart your project. Then you will see how Bower let you manage the dependencies of your project. Downloading the JavaScript and CSS frameworks that you are using for you. After that we will have a look at Chrome Devtools in order to debug and edit our application. We will also see how to use remote debugging to inspect a web application running on a phone or a tablet. Finally we will see how you can set up your whole continuous integration workflow with Grunt. Compilation, static code analysis, unit tests, integration tests, minification, code coverage, you name it. If you work with JavaScript, it’s highly probable that you already know of at least some of these tools, even if you’re new to Angular.
• #6: In the beginning...
• #8: Let there be CGI
• #36: YEOMAN THE WEB'S SCAFFOLDING TOOL FOR MODERN WEBAPPS
• #44: BOWER Bower is used for dependency management, so that you no longer have to manually download and manage your scripts. KILLER PACKAGE MANAGEMENT Need a dependency? It's just a keystroke away. It allows you to easily search for new packages via the command-line (e.g. `bower search jquery`), install them and keep them updated without needing to open your browser. BOWER.JSON { "name":"myproject", "version":"0.1.0", "dependencies":{ "jquery":"~1.11.0", "bootstrap-sass-official":"~3.1.0" }, "devDependencies":{ "mocha":"1.14.0" } } INSTALL NEW PACKAGE bower install underscore bower install jqueryui#1.10.4 bower search calendar
• #45: BOWER Bower is used for dependency management, so that you no longer have to manually download and manage your scripts. KILLER PACKAGE MANAGEMENT Need a dependency? It's just a keystroke away. It allows you to easily search for new packages via the command-line (e.g. `bower search jquery`), install them and keep them updated without needing to open your browser. BOWER.JSON { "name":"myproject", "version":"0.1.0", "dependencies":{ "jquery":"~1.11.0", "bootstrap-sass-official":"~3.1.0" }, "devDependencies":{ "mocha":"1.14.0" } } INSTALL NEW PACKAGE bower install underscore bower install jqueryui#1.10.4 bower search calendar
• #54: GRUNT Grunt is used to build, preview and test your project, thanks to help from tasks curated by the Yeoman team and grunt-contrib. SAMPLE TASKS test build serve PLUGINS connect jshint mocha imagemin, svgmin, htmlmin compass karma
• #62: http://www.slideshare.net/michaelenslow/intro-to-html5-boilerplate
• #66: What is Bootstrap? 2. Bootstrap is a free collection of tools for creating websites and web applications lBootstrap contains HTML and CSS-based design templates for text, forms, buttons, navigation and other components lBootstrap also contains optional JavaScript extensions lBootstrap is open source and available on GitHub 3. Bootstrap History Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools. Before Bootstrap, various libraries were used for interface development, which led to inconsistencies and a high maintenance burden. Bootstrap was released as an open source product in August 2011 on GitHub. 4. Why Use Bootstrap? Mobile-first approach: Since Bootstrap 3, the framework consists of mobile-first styles throughout the entire library Browser support: Bootstrap is supported by all popular browsers 5. Responsive web design: Bootstrap responsive CSS adjusts to Desktops, Tablets, and Mobile phones Easy to get started: With just the knowledge of HTML and CSS anyone can get started with Bootstrap 6. What Does Bootstrap Include? Scaffolding: Contains layout, grid system, fluid grid system, and responsive design Base CSS: Contains classes for typography, tables, forms, buttons, images, and more Components: Contains reusable components: icons, dropdowns, navbars, breadcrumbs, alerts, and more 7. JavaScript Plugins: Contains over a dozen custom jQuery plugins. You can include them all, or one by one Customizable Components : Customize Bootstrap's components, LESS variables, and jQuery plugins to create your own version
• #70: http://www.slideshare.net/Hazems/automated-jasmine-tests-for-java-script http://www.slideshare.net/cebartling/javascript-tdd-with-jasmine-and-karma Introducing Jasmine • Testing framework • Suites possess a hierarchical structure • Tests as specifications • Matchers, both built-in and custom • Spies, a test double pattern Jasmine suite describe("A specification suite", function() {
 
 … 
 
 }); • Group specifications together using nested describe function blocks. • Also useful for delineating context-specific specifications. Jasmine specification describe("A specification suite", function() {
 
 it(“contains spec with an expectation", function() {
 expect(view.tagName).toBe(‘tr’);
 });
 
 }); • Specifications are expressed with the it function. • The description should read well in the report. • Expectations are expressed with the expect function. Jasmine matchers • not • toBe • toEqual • toMatch • toBeDefined • toBeUndefined • toBeNull • toBeTruthy • toBeFalsy • toContain • toBeLessThan • toBeGreaterThan • toBeCloseTo • toThrow
• #71: http://www.slideshare.net/Hazems/automated-jasmine-tests-for-java-script http://www.slideshare.net/cebartling/javascript-tdd-with-jasmine-and-karma Introducing Jasmine • Testing framework • Suites possess a hierarchical structure • Tests as specifications • Matchers, both built-in and custom • Spies, a test double pattern Jasmine suite describe("A specification suite", function() {
 
 … 
 
 }); • Group specifications together using nested describe function blocks. • Also useful for delineating context-specific specifications. Jasmine specification describe("A specification suite", function() {
 
 it(“contains spec with an expectation", function() {
 expect(view.tagName).toBe(‘tr’);
 });
 
 }); • Specifications are expressed with the it function. • The description should read well in the report. • Expectations are expressed with the expect function. Jasmine matchers • not • toBe • toEqual • toMatch • toBeDefined • toBeUndefined • toBeNull • toBeTruthy • toBeFalsy • toContain • toBeLessThan • toBeGreaterThan • toBeCloseTo • toThrow
• #72: http://www.slideshare.net/Hazems/automated-jasmine-tests-for-java-script http://www.slideshare.net/cebartling/javascript-tdd-with-jasmine-and-karma Introducing Jasmine • Testing framework • Suites possess a hierarchical structure • Tests as specifications • Matchers, both built-in and custom • Spies, a test double pattern Jasmine suite describe("A specification suite", function() {
 
 … 
 
 }); • Group specifications together using nested describe function blocks. • Also useful for delineating context-specific specifications. Jasmine specification describe("A specification suite", function() {
 
 it(“contains spec with an expectation", function() {
 expect(view.tagName).toBe(‘tr’);
 });
 
 }); • Specifications are expressed with the it function. • The description should read well in the report. • Expectations are expressed with the expect function. Jasmine matchers • not • toBe • toEqual • toMatch • toBeDefined • toBeUndefined • toBeNull • toBeTruthy • toBeFalsy • toContain • toBeLessThan • toBeGreaterThan • toBeCloseTo • toThrow
• #73: Spectacular Test Runner for Javascript
• #83: AngularJS... is not a JavaScript library (e.g jQuery) is not a Platform (e.g .Net, Java) or a Language (e.g C#) is not a Plugin or a browser extension doesn’t abstract away HTML, CSS, or JavaScript doesn’t require jQuery or inheritance from proprietary types doesn’t use one-way data binding doesn’t require boilerplate code is not that complicated
• #86: http://yeoman.io/learning/ JavaScript has “Yet another framework syndrome” (how many solutions do we have for MVC, template rendering or data-binding?), Perl has “There’s more than one way to do it” (TIMTOWTDI), and Python has “There should be one obvious way to do it”, The Zen of Python.