Brunch Documentation. Release Brunch team
|
|
- Cassandra Poole
- 6 years ago
- Views:
Transcription
1 Brunch Documentation Release Brunch team June 22, 2012
2
3 CONTENTS i
4 ii
5 Contents: CONTENTS 1
6 2 CONTENTS
7 CHAPTER ONE FAQ 1.1 I want to start new project with Brunch. What s the workflow? Create new project (preferably from brunch-with-chaplin skeleton if you re building big app) brunch new project --skeleton git://github.com/paulmillr/brunch-with-chaplin.git && cd project. Create HTML mockups in app/assets directory (login.html, user.html etc.) & corresponding styles. Watch application files with brunch watch --server and see the results in browser on localhost:3000. Auto-debug styles in browser with auto-reload-brunch which will automatically reload browser page on every page. When all mockups are done, create app classes for them with brunch generate. E.g. brunch generate scaffold user. Debug your code in browser via console.log or debugger statements. 1.2 I don t like CoffeeScript. Does brunch work for pure js projects? Yep! Execute brunch new project_name --skeleton git://github.com/brunch/simple-js-skeleton.git and you ll create a javascript project. Customize it to your needs. 1.3 How do I change app language? For example, you want to change default Handlebars templates to eco. Remove "handlebars-brunch": "version" line from package.json. Add "eco-brunch": "version" there Change config.files.templates.defaultextension to eco in config.coffee. 1.4 What version of plugin do I need to use? There are eco-brunch 1.0.1, etc. Brunch x.y.z releases are compatible with plugins (in this case eco-brunch) x.(<= y).*. It means that: You can use: 3
8 brunch with plugin brunch with plugin brunch with plugin You can t use: brunch with plugin brunch with plugin brunch with plugin Why do you use these languages in default skeletons? CoffeeScript is used because it plays nice with object-oriented Backbone.js nature. Stylus is used because a) it has customizable syntax (you can use or drop braces / semicolons / : s), unlike less / sass; b) its mixins are transparent. If you re writing border-radius in stylus with nib, it s automatically expanded to all vendor prefixes. No need to use LESS / SCSS syntax. Example: Handlebars templates are used because they are logic-less / compatible with Mustache (that has implementations in many languages) and have nice helpers system. If you re a fan of clear syntax, you might like Jade instead, which is much clearer than HAML. 4 Chapter 1. FAQ
9 CHAPTER TWO COMMAND LINE API 2.1 brunch new <rootpath> Create new brunch project. Options: rootpath: (required) name of project directory that would be created -s PATH_TO_SKELETON, --skeleton PATH_TO_SKELETON: path or git repo address of project, contents of which will be copied to new dir..git directory is automatically removed when copying. Short-cut: brunch n. Examples: brunch n twitter -s ~/brunch-templates/simple brunch n twitter -s git://github.com/paulmillr/brunch-with-chaplin.git 2.2 brunch build Build a brunch project. Options: -m, --minify: minify the result js & css files? Analog of minify option in config file. -c CONFIG_PATH, --config CONFIG_PATH: path to config (default: config) Short-cut: brunch b. Examples: brunch b -c ios_config -m: would load ios_config.(js,coffee), build application and minify the output. 2.3 brunch watch Watch brunch directory and rebuild if something changed. Options: -s, --server: run a simple http server that would server output dir -p PORT, --port PORT: if a server option was specified, define on which port the server would run -c CONFIG_PATH, --config CONFIG_PATH: path to config (default: config) 5
10 -m, --minify: minify the result js & css files? Analog of minify option in config file. Short-cut: brunch w. Examples: brunch w: simply watch current directory & compile the output to build directory. brunch w -s: watch current project and run a webserver that would work on public directory (by default). brunch w -s -p m: watch current project and run a webserver that would work on public directory (by default). Also, auto-minify files. 2.4 brunch generate <type> <name> Generate file for current project. Options: type: (required) generator type. name: (required) generator class name / filename. -p PATH_TO_DIRECTORY --path PATH_TO_DIRECTORY: path to directory in which file will be created. Useful if you prefer non-standard directory structure. --plural FORM: plural form of <name>. Content of generated file depends on plugins and config.generators setting in config. Generator types for config.framework = backbone : model collection (uses plural version) template style view (also generates template & style) scaffold (generates model & view) Generator types for config.framework = chaplin : controller (uses plural version) model collection (uses plural version) template style view (also generates template & style) collectionview (uses plural version, also generates style) scaffold (generates controller, model & view) Short-cut: brunch g. Examples: brunch generate model user: would generate file app/models/user.coffee with class User and a unit-test test/models/user.coffee. 6 Chapter 2. Command line API
11 brunch generate collection user: would generate file app/models/users.coffee with class Users and a unit-test test/models/users.coffee. brunch generate scaffold news --plural feed: would generate file app/models/feed.coffee with class Feed and a unit-test test/models/feed.coffee. 2.5 brunch destroy <type> <name> Destroy model, view or route for current project, created by brunch generate. Options: type: (required) generator type. One of: collection, model, router, style, template, view. name: (required) generator class name / filename. -p PATH_TO_DIRECTORY --path PATH_TO_DIRECTORY: path to directory in which file will be deleted. Useful if you prefer non-standard directory structure. Short-cut: brunch d. Examples: brunch destroy collection user_list: would remove file app/collections/user_list.coffee with class UserList and a unit-test test/unit/collections/user_list.coffee. brunch d model post -p app/twitter/models: would remove file app/twitter/models/post.coffee with class Post and a unit-test test/unit/twitter/models/post.coffee brunch destroy <type> <name> 7
12 8 Chapter 2. Command line API
13 CHAPTER THREE CONFIGURATION FILE Brunch uses configuration file (config.coffee or config.js) located in the root directory to control various aspects of your application. 3.1 paths Optional, object: paths contains application paths to key directories. Paths are simple strings. public key: path to build directory that would contain output. ignored key: string, regexp, function or array of them. Will check against files that would be ignored by brunch compilator. assets key: path OR array of paths to asset files. Other valid keys, but not recommended to use: test, app, vendor, root. Example: paths: public:../deploy ignored: vendor/styles/bootstrap test: spec 3.2 files Required, object: files configures handling of application files: which compiler would be used on which file, what name should output file have etc. <type>: javascripts, stylesheets or templates defaultextension: (optional). Defines what file will be generated with brunch generate. jointo: (required) describes how files will be compiled & joined together. Available formats: * outputfilepath * map of ( outputfilepath : /regexp that matches input path/) * map of ( outputfilepath : function that takes input path) order: (optional) defines compilation order. vendor files will be compiled before other ones even if they are not * before: list of files that will be loaded before other files 9
14 * after: list of files that will be loaded after other files Note: all files from vendor directory are automatically (by-default) loaded before all files from app directory. So, vendor/scripts/jquery.js would be loaded before app/script.js even if order config is empty. Example: files: javascripts: defaultextension: coffee jointo: javascripts/app.js : /^app/ javascripts/vendor.js : /^vendor/ order: before: [ vendor/scripts/console-helper.js, vendor/scripts/jquery-1.7.js, vendor/scripts/underscore js, vendor/scripts/backbone js ] stylesheets: defaultextension: styl jointo: stylesheets/app.css order: before: [ vendor/styles/normalize.css ] after: [ vendor/styles/helpers.css ] templates: defaultextension: eco jointo: javascripts/app.js 3.3 generators Optional, object: contains templates that would be used with brunch generate command. For example, if there is generators.model and you execute brunch generate model twitter_user, brunch will call / load generators.model. This param is optional and by default it uses some predefined templates. Template could be: 1. A string. 2. A function, that will take name, entered in brunch generate. Example: generators: # formatclassname is a custom function that converts # aaa_bbb_ccc to AaaBbbCcc model: (name) -> class #{formatclassname name} extends Backbone.Model view: fs.readfilesync syspath.join dirname, generators, view 3.4 framework Optional, string: framework you ll be using as skeleton of your app. Default value is backbone. 10 Chapter 3. Configuration file
15 Examples: backbone, chaplin, ember, batman. 3.5 minify Optional, boolean: determines if minifiers should be enabled or not. Default value is false. Examples: true, false. 3.6 server Optional, object: contains params of webserver that runs on brunch watch --server. path: (optional) path to nodejs file that will be loaded. The file must contain exports.startserver function. port: (optional) port on which server will run run: should the server be launched with brunch watch? Example: server: path: server.coffee port: 6832 run: yes 3.5. minify 11
16 12 Chapter 3. Configuration file
17 CHAPTER FOUR PLUGINS Brunch uses asynchronous node.js plugins to provide compilation / minification functional. 4.1 Usage Add <plugin-npm-name> : <plugin-version> to package.json of your brunch app. Pick a plugin version that corresponds to your minor (y) brunch version. If you want to use git version of plugin, add <plugin-npm-name> : <git-repo>. Examples: "javascript-brunch": "1.3.5" "sass-brunch": "git+ssh://git@github.com:brunch/sass-brunch.git" 4.2 API Brunch language is a CoffeeScript class that has brunchplugin property. It would be initialized with application config (you can access it by instance variable). brunchplugin: (required, boolean) it s always truthy for brunch plugins. By this field, brunch determines if current package is a real plugin or just random server-side thing. type: (required in compilers & minifiers, string) extension: (required in compilers, string) compile(data, path, callback): (required in compilers, function) would be called every time brunch sees change in application source code. Data is contents of source file which will be compiled, path is path to the file and callback is a function that will be executed on compilation with arguments error and result. getdependencies(data, path, callback): (required in compilers, function) would be called every time brunch sees change in application source code. Used as chain compilation rule. For example, if _user.styl changes and main.styl depends on it, main.styl will be recompiled too. To know this, brunch needs to receive an array of dependent files from the function. * minify(data, path, callback): (required in minifiers, function) would be called every time brunch sees change in application source code. Data is contents of destination file which will be minified, path is path to the file and callback is a function that will be executed on compilation with arguments error 13
18 and result. * oncompile: (optional, function) would be called every time after brunch walks through the whole compilation circle. Could be useful if you make browser autoreload plugin etc. Example: CSSCompiler would simply read the file and return its contents. module.exports = class CSSCompiler brunchplugin: yes type: stylesheet extension: css constructor: (@config) -> null compile: (data, path, callback) -> callback null, data See wiki page for a list of plugins. Feel free to add new plugins there. wiki page: 14 Chapter 4. Plugins
19 CHAPTER FIVE SKELETONS Brunch uses skeletons to provide pre-defined application structure. Main parts of every skeleton: App path (usually app/): place for user s code should be. Vendor path (usually vendor/): place for 3rd party libs should be. Config (usually config.coffee): defines application configuration Test path (usually test/): place for tests. 15
20 16 Chapter 5. Skeletons
21 CHAPTER SIX UPGRADING BRUNCH 6.1 Upgrading to 1.2 Update package.json brunch plugins versions to > 1.0 < 1.3 Run npm install 6.2 Upgrading to 1.1 Change buildpath:... in config.coffee to paths: public:... Update package.json brunch plugins versions to > 1.0 < 1.2 Run npm install 6.3 Upgrading to 1.0 Edit config: Remove plugins section, as it has been moved to package.json. Remove defaultextensions section. Edit files section to conform to new config API. Remove node_modules/ directory. Install plugins you need by editing package.json and executing npm install after it. Upgrade backbone & jquery to latest versions (optional). 6.4 Upgrading to 0.9 Move src/app to app and src/vendor to vendor/scripts Move all files that you were putting to build directory out of there, to app/assets. build is now generated automatically. Create app/assets if it doesn t exist. Upgrade vendor/scripts/backbone js to vendor/scripts/backbone js and vendor/scripts/jquery js to vendor/scripts/jquery-1.7.js. Rename vendor/scripts/consoledummy.js to vendor/scripts/console-helper.js. 17
22 Create package.json and config.coffee. You can copy them from new brunch application (brunch new app && cp app/package.json app/config.coffee && rm -rf app). Though, config.coffee would require some editing if you ve edited config.yaml previously. Execute npm install. 6.5 Upgrading to 0.8 Update Vendor. First of all you need upgrade files from brunch/src/vendor: backbone-master.js -> backbone js ConsoleDummy.js jquery js -> jquery js underscore js -> underscore js Upgrade to Backbone : rename Controllers to Routers, refresh to reset and call navigate instead of save- Location and setlocation. For more details please visit Upgrading to 0.7 Since brunch uses stitch which comes with a CommonJS modules implementation. Therefore developers have to require modules and export variables and functions explicitly. See an upgrade example here: Update Vendor: remove brunch-0.x.js file from brunch/src/vendor and instead add these files: backbone-master.js ConsoleDummy.js jquery js underscore js You can find them by creating a new brunch app in src/vendor. to Add a config.yaml clone from a new brunch app to brunch/config.yaml Update index.html Replace all your script tags with <script src="web/js/app.js"></script> <script>require( main );</script> You need to explicitly export everything that needs to be visible in another file. For example a Todo Model should change from class Todo extends Backbone.Model class exports.todo extends Backbone.Model If you want to use any object or function from another module you need to require it. For example if the Todo model is used in Todos collection you need to add this piece of code to todos_collection.coffee. 18 Chapter 6. Upgrading brunch
23 {Todo} = require models/todo Stitch also compiles templates. So you have to require them as well. hometemplate = require templates/home class exports.homeview extends Backbone.View render: hometemplate() Cleanup Directory Structure: remove these legacy files/directories brunch/build/web/js/concatenation.js brunch/build/web/js/templates.js brunch/build/web/js/vendor/ brunch/config/ docs/ (keep it in case you still want to use docco manually) 6.6. Upgrading to
24 20 Chapter 6. Upgrading brunch
25 CHAPTER SEVEN INDICES AND TABLES genindex modindex search 21
Catbook Workshop: Intro to NodeJS. Monde Duinkharjav
Catbook Workshop: Intro to NodeJS Monde Duinkharjav What is NodeJS? NodeJS is... A Javascript RUNTIME ENGINE NOT a framework NOT Javascript nor a JS package It is a method for running your code in Javascript.
More informationpyramid_assetmutator Documentation
pyramid_assetmutator Documentation Release 1.0b1 Seth Davis February 22, 2017 Contents 1 Overview 1 2 Installation 3 3 Setup 5 4 Usage 7 5 Mutators 11 6 Settings 13 7 Asset Concatenation (a.k.a Asset
More informationNode.js. Node.js Overview. CS144: Web Applications
Node.js Node.js Overview JavaScript runtime environment based on Chrome V8 JavaScript engine Allows JavaScript to run on any computer JavaScript everywhere! On browsers and servers! Intended to run directly
More informationMaking Sling Grunt Or How to Integrate Modern Front-End Development with Sling. Philip Hornig (Publicis Pixelpark), Michael Sunaric (Netcentric)
APACHE SLING & FRIENDS TECH MEETUP BERLIN, 28-30 SEPTEMBER 2015 Making Sling Grunt Or How to Integrate Modern Front-End Development with Sling Philip Hornig (Publicis Pixelpark), Michael Sunaric (Netcentric)
More informationWebpack. What is Webpack? APPENDIX A. n n n
APPENDIX A n n n Webpack Although Webpack is used throughout the book, the primary focus of the book is on React, so Webpack didn t get a comprehensive treatment. In this Appendix, you will have the chance
More information55249: Developing with the SharePoint Framework Duration: 05 days
Let s Reach For Excellence! TAN DUC INFORMATION TECHNOLOGY SCHOOL JSC Address: 103 Pasteur, Dist.1, HCMC Tel: 08 38245819; 38239761 Email: traincert@tdt-tanduc.com Website: www.tdt-tanduc.com; www.tanducits.com
More informationroots Documentation Release jeff escalante
roots Documentation Release 3.0.0 jeff escalante March 21, 2014 Contents 1 Table of Contents 3 1.1 Installation................................................ 3 1.2 Features..................................................
More informationwebpack bundle inner structure and optimization Alexey Ivanov, Evil Martians
webpack bundle inner structure and optimization Alexey Ivanov, Evil Martians Evil Martians Evil Martians What I'm working on Problems Multiple versions of lodash or underscore. Problems Multiple versions
More informationPractical Node.js. Building Real-World Scalable Web Apps. Apress* Azat Mardan
Practical Node.js Building Real-World Scalable Web Apps Azat Mardan Apress* Contents About the Author About the Technical Reviewer Acknowledgments Introduction xv xvii xix xxi Chapter 1: Setting up Node.js
More informationLab 1 - Introduction to Angular
Lab 1 - Introduction to Angular In this lab we will build a Hello World style Angular component. The key focus is to learn how to install all the required code and use them from the browser. We wont get
More informationdjango-baton Documentation
django-baton Documentation Release 1.0.7 abidibo Nov 13, 2017 Contents 1 Features 3 2 Getting started 5 2.1 Installation................................................ 5 2.2 Configuration...............................................
More informationAngular 2 Programming
Course Overview Angular 2 is the next iteration of the AngularJS framework. It promises better performance. It uses TypeScript programming language for type safe programming. Overall you should see better
More informationWeb Development for Dinosaurs An Introduction to Modern Web Development
Web Development for Dinosaurs An Introduction to Modern Web Development 1 / 53 Who Am I? John Cleaver Development Team Lead at Factivity, Inc. An Introduction to Modern Web Development - PUG Challenge
More informationClient Side MVC with Backbone & Rails. Tom
Client Side MVC with Backbone & Rails Tom Zeng @tomzeng tom@intridea.com Client Side MV* with Backbone & Rails Benefits of Client Side MVC Backbone.js Introduction Client Side MV* Alternatives Backbone
More information"Charting the Course... MOC A: Developing with the SharePoint Framework. Course Summary
Course Summary Description This five-day instructor-led course is intended for developers who want to be able to create client-side applications with SharePoint Framework. In this course, students will
More informationWebStorm, intelligent IDE for JavaScript development
, intelligent IDE for JavaScript development JetBrains is a powerful Integrated development environment (IDE) built specifically for JavaScript developers. How does match up against competing tools? Product
More informationEpisode 298. Getting Started With Spree
Episode 298 Getting Started With Spree Spree 1 is a fully-featured e-commerce solution that can be easily integrated into a Rails application. If you need to turn a Rails app into a store that sells products
More informationChapter 1 - Development Setup of Angular
Chapter 1 - Development Setup of Angular Objectives Key objectives of this chapter Angular Files and Dependencies Node.js Node package manager (npm) package.json Semantic version numbers Installing Angular
More informationmoxie-js-client documentation
moxie-js-client documentation Release 1.0 Mobile Oxford team, IT Services, University of Oxford December 16, 2016 Contents 1 Developer 1 1.1 Overview................................................. 1
More informationStepic Plugins Documentation
Stepic Plugins Documentation Release 0 Stepic Team May 06, 2015 Contents 1 Introduction 3 1.1 Quiz Architecture............................................ 3 1.2 Backend Overview............................................
More informationFrontend UI Training. Whats App :
Frontend UI Training Whats App : + 916 667 2961 trainer.subbu@gmail.com What Includes? 1. HTML 5 2. CSS 3 3. SASS 4. JavaScript 5. ES 6/7 6. jquery 7. Bootstrap 8. AJAX / JSON 9. Angular JS 1x 10. Node
More informationAdapt Learning: Adapt Framework Concept and Vision
Adapt Learning: Adapt Framework Concept and Vision Document control Abstract: Author: Describes the concept of the Adapt Framework Sven Laux, Daryl Hedley, Paul Welch Version: 1.0 Date: 27 / 11 / 2013
More informationTools. SWE 432, Fall Design and Implementation of Software for the Web
Tools SWE 432, Fall 2016 Design and Implementation of Software for the Web Today Before we can really make anything, there s a bunch of technical stuff to get out of the way Tools make our lives so much
More informationGetting started with Tabris.js Tutorial Ebook
Getting started with Tabris.js 2.3.0 Tutorial Ebook Table of contents Introduction...3 1 Get started...4 2 Tabris.js in action...5 2.1 Try the examples...5 2.2 Play with the examples...7 2.3 Write your
More informationSASS Variables and Mixins Written by Margaret Rodgers. Variables. Contents. From Web Team. 1 Variables
SASS Variables and Mixins Written by Margaret Rodgers From Web Team Contents 1 Variables o 1.1 Nested Variables 2 Mixins 3 Inheritance Variables A variable in SASS works exactly the same as a variable
More informationYour essential APEX companion. Marko apexbyg.blogspot.com
Your essential APEX companion Marko Gorički @mgoricki apexbyg.blogspot.com About Me 10 years of experience with APEX presenter at HROUG, SIOUG, APEX World, KSCOPE, APEX Alpe Adria, APEX Connect apex.world
More informationdjango-baton Documentation
django-baton Documentation Release 1.3.1 abidibo Nov 05, 2018 Contents 1 Features 3 2 Getting started 5 2.1 Installation................................................ 5 2.2 Configuration...............................................
More informationIntroduction to Using NPM scripts as a Build Tool. 1. 1
Introduction to Using NPM scripts as a Build Tool. @kjy2143 / SK planet 1. 1 1. 2 1. 3 1. 4 Front End Developer in Past 2. 1 2. 2 Front End Developer in 2016 3. 1 3. 2 2016/2017 MUST-KNOW WEB DEVELOPMENT
More informationIntroduction and first application. Luigi De Russis. Rails 101
Introduction and first application Luigi De Russis 2 About Rails Ruby on Rails 3 Framework for making dynamic web applications created in 2003 Open Source (MIT License) for the Ruby programming language
More informationReactJS and Webpack for Rails
Modern Web Conf 2015 ReactJS and Webpack for Rails Tse-Ching Ho 2015-05-16 @tsechingho 何澤清 紅寶 石商 人 Rubiest 鐵道 工 人 Rails worker 黃碼科技創辦 人 Goldenio founder 生物資訊 Bioinformatics 資料視覺化 Infographics Javascript
More informationTangeloHub Documentation
TangeloHub Documentation Release None Kitware, Inc. September 21, 2015 Contents 1 User s Guide 3 1.1 Managing Data.............................................. 3 1.2 Running an Analysis...........................................
More informationnpm install [<name> [<name>...]] [--save --save-dev --save-optional]
Node Package Manager by Jesse Warden http://www.jessewarden.com v1 npm ls Everything you have installed in the current directory. npm search [search terms] Search the registry for packages matching the
More informationGuides SDL Server Documentation Document current as of 05/24/ :13 PM.
Guides SDL Server Documentation Document current as of 05/24/2018 04:13 PM. Overview This document provides the information for creating and integrating the SmartDeviceLink (SDL) server component with
More informationClient Side JavaScript and AJAX
Client Side JavaScript and AJAX Client side javascript is JavaScript that runs in the browsers of people using your site. So far all the JavaScript code we've written runs on our node.js server. This is
More informationSalvatore Rinzivillo VISUAL ANALYTICS
Salvatore Rinzivillo VISUAL ANALYTICS Announcment No lesson on March 5th We will meet on March 6th from 11 to 13 in Aula N1 DEVELOPMENT FRAMEWORK Objectives Setup a developing environment Install Node.js
More informationP a g e 1. Danish Technological Institute. Scripting and Web Languages Online Course k Scripting and Web Languages
P a g e 1 Online Course k72853 Scripting and Web Languages P a g e 2 Title Estimated Duration (hrs) JsRender Fundamentals 2 Advanced JsRender Features 3 JavaScript SPA: Getting Started with SPA in Visual
More informationRequireJS Javascript Modules for the Browser. By Ben Keith Quoin, Inc.
RequireJS Javascript Modules for the Browser By Ben Keith Quoin, Inc. Traditional Browser JS One global namespace Often inline JS code embedded directly in HTML Many tags with hidden ordering
More informationGuides SDL Server Documentation Document current as of 04/06/ :35 PM.
Guides SDL Server Documentation Document current as of 04/06/2018 02:35 PM. Overview This document provides the information for creating and integrating the SmartDeviceLink (SDL) server component with
More informationJavaScript: the language of browser interactions. Claudia Hauff TI1506: Web and Database Technology
JavaScript: the language of browser interactions Claudia Hauff TI1506: Web and Database Technology ti1506-ewi@tudelft.nl Densest Web lecture of this course. Coding takes time. Be friendly with Codecademy
More informationWidget ID Each user type widget should have a unique identifier within a single controller (ID). Any string can be as ID.
Widget ID Each user type widget should have a unique identifier within a single controller (ID). Any string can be as ID. Widget ID is used when installing the widget, appears in its program code and cannot
More informationReact. HTML code is made up of tags. In the example below, <head> is an opening tag and </head> is the matching closing tag.
Document Object Model (DOM) HTML code is made up of tags. In the example below, is an opening tag and is the matching closing tag. hello The tags have a tree-like
More informationAdvanced React JS + Redux Development
Advanced React JS + Redux Development Course code: IJ - 27 Course domain: Software Engineering Number of modules: 1 Duration of the course: 40 astr. hours / 54 study 1 hours Sofia, 2016 Copyright 2003-2016
More informationWebApp development. Outline. Web app structure. HTML basics. 1. Fundamentals of a web app / website. Tiberiu Vilcu
Outline WebApp development Tiberiu Vilcu Prepared for EECS 411 Sugih Jamin 20 September 2017 1 2 Web app structure HTML basics Back-end: Web server Database / data storage Front-end: HTML page CSS JavaScript
More informationComprehensive AngularJS Programming (5 Days)
www.peaklearningllc.com S103 Comprehensive AngularJS Programming (5 Days) The AngularJS framework augments applications with the "model-view-controller" pattern which makes applications easier to develop
More informationTopic 16: Validation. CITS3403 Agile Web Development. Express, Angular and Node, Chapter 11
Topic 16: Validation CITS3403 Agile Web Development Getting MEAN with Mongo, Express, Angular and Node, Chapter 11 Semester 1, 2018 Verification and Validation Writing a bug free application is critical
More informationFull Stack boot camp
Name Full Stack boot camp Duration (Hours) JavaScript Programming 56 Git 8 Front End Development Basics 24 Typescript 8 React Basics 40 E2E Testing 8 Build & Setup 8 Advanced JavaScript 48 NodeJS 24 Building
More informationCS193X: Web Programming Fundamentals
CS193X: Web Programming Fundamentals Spring 2017 Victoria Kirst (vrk@stanford.edu) CS193X schedule Today - Middleware and Routes - Single-page web app - More MongoDB examples - Authentication - Victoria
More informationBackbone.js in a Php Environment
Backbone.js in a Php Environment March 2, 2013 Ken Harris Sr. Developer, Telkonet.com Milwaukee, WI Trends in Web Apps Fatter Clients Desktop style apps Lots of Javascript Lots of CSS Requires structure
More informationFront End Nanodegree Syllabus
Front End Nanodegree Syllabus Build Stunning User Experiences Before You Start You've taken the first step toward becoming a web developer by choosing the Front End Nanodegree program. In order to succeed,
More informationDrupalCon Barcelona Preston So September 22, 2015
DrupalCon Barcelona 2015 Preston So September 22, 2015 Preston So (@prestonso) has designed websites since 2001 and built them in Drupal since 2007. He is Development Manager of Acquia Labs at Acquia and
More informationmongodb-tornado-angular Documentation
mongodb-tornado-angular Documentation Release 0.1.1 David Levy February 22, 2017 Contents 1 Installation 3 1.1 linux/mac................................................. 3 1.2 Python3.x.................................................
More informationOverview of BC Learning Network SMS2 Introduction
Overview of BC Learning Network SMS2 Introduction This guide is designed to be a cumulative overview of the SMS2 web application. SMS2 is a student management system which integrates with Moodle, a learning
More information7+ GRAPHICS LIBRARIES TO ENHANCE YOUR EMBEDDED ANALYTICS
7+ GRAPHICS LIBRARIES TO ENHANCE YOUR EMBEDDED ANALYTICS TABLE OF CONTENTS INTRODUCTION...3 FONT AWESOME...4 GOOGLE WEB FONTS...5 ADOBE COLOR WHEEL...6 WEB LANGUAGES...7 CSS FRAMEWORKS...8 JAVASCRIPT LIBRARIES...9
More informationModern Web Application Development. Sam Hogarth
Modern Web Application Development Sam Hogarth Some History Early Web Applications Server-side scripting only e.g. PHP/ASP Basic client-side scripts JavaScript/JScript/VBScript Major differences in browser
More informationJ, K, L. Node.js require() method, 403 package.json, 401 streams functionality, 401 task() method, 401 use strict statement, 403
Index A Abstract factory pattern, 122 126 Adapter pattern, 137 139 Apply and call methods, 15 16 Architectural patterns MVC (see Model-View-Controller (MVC)) MVP (see Model-View-Presenter (MVP) pattern)
More informationUnifer Documentation. Release V1.0. Matthew S
Unifer Documentation Release V1.0 Matthew S July 28, 2014 Contents 1 Unifer Tutorial - Notes Web App 3 1.1 Setting up................................................. 3 1.2 Getting the Template...........................................
More informationWelcome. Quick Introductions
AEK Introduction Welcome Quick Introductions "The AEK"? Application Extension Kit Technique for delivering cross-platform application screens via a webview A development framework that provides a responsive
More informationFront End Summit - Sep 27th
Front End Summit - Sep 27th Twitter Front End Summit Tuesday, September 27th, 2011 Featured Speaker: Andreas Gal of Mozilla PDFs are traditionally rendered using native code plugins. Often enough, those
More informationCodeHub. Curran Kelleher 8/18/2012
CodeHub Curran Kelleher 8/18/2012 Programming is Overly Complex Development environment setup Revision control management Dependency management Deployment = time and effort learning tools, not writing
More informationAngularJS Intro Homework
AngularJS Intro Homework Contents 1. Overview... 2 2. Database Requirements... 2 3. Navigation Requirements... 3 4. Styling Requirements... 4 5. Project Organization Specs (for the Routing Part of this
More informationwidgetjs Documentation
widgetjs Documentation Release 1.2.3 Nicolas Vanhoren Dec 22, 2017 Contents 1 Tutorial 3 1.1 Presentation of widgetjs......................................... 3 1.2 Quickstart................................................
More informationLinux desktop app guide Documentation. Thomas Kluyver & contributors
Linux desktop app guide Documentation Thomas Kluyver & contributors Dec 13, 2018 Contents: 1 User Interface options 3 1.1 Desktop style: GTK or Qt........................................ 3 1.2 Web tech:
More informationMEAN February. techdt.la
MEAN February techdt.la MEAN Stack Similar to Ruby on Rails & LAMP, for JavaScript Cohesive stack with Front End, Middleware & Backend Tools to help get started Little less magic than rails And much more!
More informationFront End Nanodegree Syllabus
Front End Nanodegree Syllabus Build Stunning User Experiences Before You Start You've taken the first step toward becoming a web developer by choosing the Front End Nanodegree program. In order to succeed,
More informationWe are assuming you have node installed!
Node.js Hosting We are assuming you have node installed! This lesson assumes you've installed and are a bit familiar with JavaScript and node.js. If you do not have node, you can download and install it
More informationIndium Documentation. Release Nicolas Petton
Indium Documentation Release 1.2.0 Nicolas Petton Nov 23, 2018 Contents 1 Table of contents 3 1.1 Installation................................................ 3 1.2 Getting up and running..........................................
More informationGenesys Pulse Deployment Guide. Genesys Pulse User Interface Extensions
Genesys Pulse Deployment Guide Genesys Pulse User Interface Extensions 5/3/2018 Contents 1 Genesys Pulse User Interface Extensions 1.1 Introduction 1.2 How to Create Your Own Plug-in 1.3 Genesys Pulse
More informationLeanJS Documentation. Release Romain Dorgueil
LeanJS Documentation Release 1.0.0 Romain Dorgueil December 26, 2016 Contents 1 Goals 3 2 Quick start 5 3 Documentation 7 3.1 LeanJS.................................................. 7 3.2 Getting started..............................................
More informationAngularJS Fundamentals
AngularJS Fundamentals by Jeremy Zerr Blog: http://www.jeremyzerr.com LinkedIn: http://www.linkedin.com/in/jrzerr Twitter: http://www.twitter.com/jrzerr What is AngularJS Open Source Javascript MVC/MVVM
More informationSass. The Future of Stylesheets.
Sass. The Future of Stylesheets. Chris Eppstein Follow me @chriseppstein Architect - Caring.com Creator - Compass Stylesheet Framework Core Contributor - Sass A website for caregivers of the sick and elderly.
More informationBuild Powerful FrontEnd Workflows with PostCSS. Guide to writing/generating cutting edge CSS
Build Powerful FrontEnd Workflows with PostCSS Guide to writing/generating cutting edge CSS Key TakeAways PostCSS - Deep Dive plugins you can use custom plugins Workflow Essential Concepts Plugins to help
More informationGetting started with Convertigo Mobilizer
Getting started with Convertigo Mobilizer First Sencha-based project tutorial CEMS 6.0.0 TABLE OF CONTENTS Convertigo Mobilizer overview...1 Introducing Convertigo Mobilizer... 1-1 Convertigo Mobilizer
More informationStencil: The Time for Vanilla Web Components has Arrived
Stencil: The Time for Vanilla Web Components has Arrived Gil Fink sparxys CEO @gilfink / www.gilfink.net Typical Application Web Page Design From Design to Implementation Session List Day tabs Component
More informationjquery New Wave JavaScript
jquery New Wave JavaScript Contribution Guides In the spirit of open source software development, jquery always encourages community code contribution. To help you get started and before you jump into
More informationCatbook Workshop 1: Client Side JS. Danny Tang
Catbook Workshop 1: Client Side JS Danny Tang Previously... Some frontend - Profile page - Nav bar - Stories feed page Techniques - DOM manipulation with JS In this workshop... More frontend - Stories
More informationManual Html A Href Onclick Submit Button
Manual Html A Href Onclick Submit Button When you submit the form via clicking the radio button, it inserts properly into Doing a manual refresh (F5 or refresh button) will then display the new updated
More informationJavaScript CS 4640 Programming Languages for Web Applications
JavaScript CS 4640 Programming Languages for Web Applications 1 How HTML, CSS, and JS Fit Together {css} javascript() Content layer The HTML gives the page structure and adds semantics Presentation
More informationAPACHE SLING & FRIENDS TECH MEETUP SEPTEMBER Integrating a Modern Frontend Setup with AEM Natalia Venditto, Netcentric
APACHE SLING & FRIENDS TECH MEETUP 10-12 SEPTEMBER 2018 Integrating a Modern Frontend Setup with AEM Natalia Venditto, Netcentric A modern frontend setup 2 How do we understand a modern setup? A modern
More informationwelcome to BOILERCAMP HOW TO WEB DEV
welcome to BOILERCAMP HOW TO WEB DEV Introduction / Project Overview The Plan Personal Website/Blog Schedule Introduction / Project Overview HTML / CSS Client-side JavaScript Lunch Node.js / Express.js
More informationContents in Detail. Foreword by Xavier Noria
Contents in Detail Foreword by Xavier Noria Acknowledgments xv xvii Introduction xix Who This Book Is For................................................ xx Overview...xx Installation.... xxi Ruby, Rails,
More informationIERG 4210 Tutorial 08
IERG 4210 Tutorial 08 Securing web page (II): - In principle: Cookie related security issues - In practice: Point by point checklist for Phase 4A Shizhan Zhu Logistics Content for today: Provide sample
More information20486-Developing ASP.NET MVC 4 Web Applications
Course Outline 20486-Developing ASP.NET MVC 4 Web Applications Duration: 5 days (30 hours) Target Audience: This course is intended for professional web developers who use Microsoft Visual Studio in an
More informationyawrap Documentation Release Michal Kaczmarczyk
yawrap Documentation Release 0.4.0 Michal Kaczmarczyk Jul 12, 2018 Contents 1 Features 3 2 Usage Examples 5 3 Contents 11 4 Indices and tables 19 i ii Yawrap is a powerful, lightweight, pythonic pseudo-static
More information{WebCodeChicks} </spartanburg> Beginning Sass. sass-lang.com/guide
{WebCodeChicks Beginning Sass sass-lang.com/guide We will be using the website: codepen.io to write our code. A great resource to see how others write code. Sign up for a free account. CSS
More informationArjen de Blok. Senior Technical Consultant bij ICT Groep ( sinds 1995 Programmeren sinds 1990 Technologiën. Links
Arjen de Blok Senior Technical Consultant bij ICT Groep (www.ict.eu) sinds 1995 Programmeren sinds 1990 Technologiën Links Visual C++ met Microsoft Foundation Classes.NET WinForms & WPF Silverlight ASP.NET
More informationThis tutorial has been prepared for beginners to help them understand the basic functionalities of Gulp.
About the Tutorial Gulp is a task runner that uses Node.js as a platform. It purely uses the JavaScript code and helps to run front-end tasks and large-scale web applications. Gulp builds system automated
More informationIndex. Bare-bones connect application, 125 Binary JSON (BSON), 171. Callback functions asynchronous code ifelse, 199 loops,
Index A Amazon Web Services (AWS) console, 260 261 EBS, 262 EC2 Amazon Linux AMI, 262, 265 connect script and sample usage, 271 dashboard and Launch Instance, 265 global package installation, 273 hard
More informationWe re working full time this summer alongside 3 UCOSP (project course) students (2 from Waterloo: Mark Rada & Su Zhang, 1 from UofT: Angelo Maralit)
We re working full time this summer alongside 3 UCOSP (project course) students (2 from Waterloo: Mark Rada & Su Zhang, 1 from UofT: Angelo Maralit) Our supervisors: Karen: heads project, which has been
More informationMEAN Stack. 1. Introduction. 2. Foundation a. The Node.js framework b. Installing Node.js c. Using Node.js to execute scripts
MEAN Stack 1. Introduction 2. Foundation a. The Node.js framework b. Installing Node.js c. Using Node.js to execute scripts 3. Node Projects a. The Node Package Manager b. Creating a project c. The package.json
More informationServerless Single Page Web Apps, Part Four. CSCI 5828: Foundations of Software Engineering Lecture 24 11/10/2016
Serverless Single Page Web Apps, Part Four CSCI 5828: Foundations of Software Engineering Lecture 24 11/10/2016 1 Goals Cover Chapter 4 of Serverless Single Page Web Apps by Ben Rady Present the issues
More informationBuilding Backbone Plugins
Building Backbone Plugins Eliminate The Boilerplate In Backbone.js Apps Derick Bailey and Jerome Gravel-Niquet 2013-2014 Muted Solutions, LLC. All Rights Reserved. Backbone.js and the Backbone.js logo
More informationprojecto Documentation
projecto Documentation Release 0.0.1 Projecto Team September 08, 2014 Contents 1 Part I: Projecto Overview 3 1.1 Features.................................................. 3 1.2 Project Layout..............................................
More informationSingle-Page JavaScript Apps
Single-Page JavaScript Apps with RequireJS and Backbone.js Mihai Bîrsan Who is this guy? Mihai Bîrsan Sr. Web Development Engineer Email Tools Team Amazon Development Center Romania We ve recently rebuilt
More informationJavaScript Fundamentals_
JavaScript Fundamentals_ HackerYou Course Syllabus CLASS 1 Intro to JavaScript Welcome to JavaScript Fundamentals! Today we ll go over what programming languages are, JavaScript syntax, variables, and
More informationJavaScript and MVC Frameworks FRONT-END ENGINEERING
FRONT-END ENGINEERING Introduction & History Introduction JavaScript is an incredible language to learn for anyone interested in getting into programming. It is the only programing language that can run
More informationpynetworktables2js Documentation
pynetworktables2js Documentation Release 2018.0.1.post0.dev9 RobotPy development team Feb 21, 2018 Contents 1 Documentation 3 2 Installation 5 2.1 Easy install (Windows only).......................................
More informationLecture 8. ReactJS 1 / 24
Lecture 8 ReactJS 1 / 24 Agenda 1. JSX 2. React 3. Redux 2 / 24 JSX 3 / 24 JavaScript + HTML = JSX JSX is a language extension that allows you to write HTML directly into your JavaScript files. Behind
More informationThe course also includes an overview of some of the most popular frameworks that you will most likely encounter in your real work environments.
Web Development WEB101: Web Development Fundamentals using HTML, CSS and JavaScript $2,495.00 5 Days Replay Class Recordings included with this course Upcoming Dates Course Description This 5-day instructor-led
More informationflask-dynamo Documentation
flask-dynamo Documentation Release 0.1.2 Randall Degges January 22, 2018 Contents 1 User s Guide 3 1.1 Quickstart................................................ 3 1.2 Getting Help...............................................
More informationtermite Release 0.0.2
termite Release 0.0.2 February 16, 2017 Contents 1 Features 3 2 Alternatives 5 3 Why another build tool? 7 4 Requeriments 9 5 Installation 11 5.1 Basic concepts..............................................
More information