DOCSLIB.ORG

Javascript Web Tools with Visual Studio 2015 and ASP.NET 5

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Javascript Web Tools with Visual Studio 2015 and ASP.NET 5 JavaScript Web Tools with Visual Studio 2015 and ASP.NET 5 April 2015. 1 Readme Welcome! This document contains a set of articles that introduce the most commonly used JavaScript/frontend web development tools (libraries, task runners, frameworks…). Frontend development ecosystem is growing fast and getting complex, and we hope this brief doc will help you put the pieces together and decide on the ones that best fit your needs. You’ll be able to find updated versions of these articles (and more!) on the asp.net page at http://aka.ms/webdevdocs. You can get a good understanding just by reading the different articles, but we really recommend you follow the step by step samples to gain exposure to these tools, we created the samples with the free Visual Studio 2015 Preview. We hope you find it useful!! If you have any question, comment or feedback about the articles, we’ll be listening on the #jswebtoolsdoc hashtag on twitter. - Developer Platform team at Microsoft 2 Contents Grunt and Gulp. JavaScript task runners. .................................................................................................... 6 Using Grunt ............................................................................................................................................... 7 Preparing the Application ..................................................................................................................... 7 Configuring NPM ................................................................................................................................... 8 Configuring Grunt ............................................................................................................................... 10 All Together Now ................................................................................................................................ 14 Watching for Changes ......................................................................................................................... 15 Binding to Visual Studio Events ........................................................................................................... 15 Using Gulp ............................................................................................................................................... 16 NPM Package Differences ................................................................................................................... 16 Gulpfile vs Gruntfile Examples ............................................................................................................ 16 The Gulp Stream ................................................................................................................................. 17 All Together ......................................................................................................................................... 17 Summary ................................................................................................................................................. 18 Bower. Package Manager. ......................................................................................................................... 19 Getting Started ........................................................................................................................................ 19 Exploring the Client Build Process .......................................................................................................... 22 Define Packages .................................................................................................................................. 22 Install Packages to the Web Application ............................................................................................. 25 Reference Packages ............................................................................................................................ 26 Use the Installed Packages .................................................................................................................. 27 Summary ................................................................................................................................................. 28 Bootstrap. Responsive Web Framework. .................................................................................................. 29 Getting Started ........................................................................................................................................ 29 Basic Templates and Features ................................................................................................................ 30 The Bootstrap Theme ............................................................................................................................. 35 More Themes .......................................................................................................................................... 39 Components ............................................................................................................................................ 39 JavaScript Support .................................................................................................................................. 40 Summary ................................................................................................................................................. 41 Less, Sass & Font Awesome. Styling applications ..................................................................................... 42 CSS Preprocessor Languages ................................................................................................................... 42 3 Less .......................................................................................................................................................... 43 Getting Started .................................................................................................................................... 44 Sass .......................................................................................................................................................... 49 Less or Sass? ............................................................................................................................................ 52 Font Awesome ........................................................................................................................................ 53 Summary ................................................................................................................................................. 54 TypeScript. Enterprise-scale JavaScript. .................................................................................................... 55 Getting Started ........................................................................................................................................ 55 Language Features .................................................................................................................................. 57 TypeScript Ecosystem ............................................................................................................................. 61 Summary ................................................................................................................................................. 63 Knockout.js . MVVM JavaScript Library..................................................................................................... 64 Getting Started ........................................................................................................................................ 64 Observables, ViewModels, and Simple Binding ...................................................................................... 65 Control Flow ............................................................................................................................................ 69 Templates................................................................................................................................................ 72 Components ............................................................................................................................................ 73 Communicating with APIs ....................................................................................................................... 73 Summary ................................................................................................................................................. 73 Backbone.js. MVC Library ........................................................................................................................... 74 Getting Started ........................................................................................................................................ 74 Backbone Objects ................................................................................................................................... 74 Views ....................................................................................................................................................... 78 Collections ............................................................................................................................................... 80 Routers ...................................................................................................................................................
Load more

Recommended publications
  • Machine Learning in the Browser
    Machine Learning in the Browser The Harvard community has made this article openly available. Please share how this access benefits you. Your story matters Citable link http://nrs.harvard.edu/urn-3:HUL.InstRepos:38811507 Terms of Use This article was downloaded from Harvard University’s DASH repository, and is made available under the terms and conditions applicable to Other Posted Material, as set forth at http:// nrs.harvard.edu/urn-3:HUL.InstRepos:dash.current.terms-of- use#LAA Machine Learning in the Browser a thesis presented by Tomas Reimers to The Department of Computer Science in partial fulfillment of the requirements for the degree of Bachelor of Arts in the subject of Computer Science Harvard University Cambridge, Massachusetts March 2017 Contents 1 Introduction 3 1.1 Background . .3 1.2 Motivation . .4 1.2.1 Privacy . .4 1.2.2 Unavailable Server . .4 1.2.3 Simple, Self-Contained Demos . .5 1.3 Challenges . .5 1.3.1 Performance . .5 1.3.2 Poor Generality . .7 1.3.3 Manual Implementation in JavaScript . .7 2 The TensorFlow Architecture 7 2.1 TensorFlow's API . .7 2.2 TensorFlow's Implementation . .9 2.3 Portability . .9 3 Compiling TensorFlow into JavaScript 10 3.1 Motivation to Compile . 10 3.2 Background on Emscripten . 10 3.2.1 Build Process . 12 3.2.2 Dependencies . 12 3.2.3 Bitness Assumptions . 13 3.2.4 Concurrency Model . 13 3.3 Experiences . 14 4 Results 15 4.1 Benchmarks . 15 4.2 Library Size . 16 4.3 WebAssembly . 17 5 Developer Experience 17 5.1 Universal Graph Runner .
    [Show full text]
  • Learning React Functional Web Development with React and Redux
    Learning React Functional Web Development with React and Redux Alex Banks and Eve Porcello Beijing Boston Farnham Sebastopol Tokyo Learning React by Alex Banks and Eve Porcello Copyright © 2017 Alex Banks and Eve Porcello. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://oreilly.com/safari). For more information, contact our corporate/insti‐ tutional sales department: 800-998-9938 or [email protected]. Editor: Allyson MacDonald Indexer: WordCo Indexing Services Production Editor: Melanie Yarbrough Interior Designer: David Futato Copyeditor: Colleen Toporek Cover Designer: Karen Montgomery Proofreader: Rachel Head Illustrator: Rebecca Demarest May 2017: First Edition Revision History for the First Edition 2017-04-26: First Release See http://oreilly.com/catalog/errata.csp?isbn=9781491954621 for release details. The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. Learning React, the cover image, and related trade dress are trademarks of O’Reilly Media, Inc. While the publisher and the authors have used good faith efforts to ensure that the information and instructions contained in this work are accurate, the publisher and the authors disclaim all responsibility for errors or omissions, including without limitation responsibility for damages resulting from the use of or reliance on this work. Use of the information and instructions contained in this work is at your own risk. If any code samples or other technology this work contains or describes is subject to open source licenses or the intellectual property rights of others, it is your responsibility to ensure that your use thereof complies with such licenses and/or rights.
    [Show full text]
  • Introducing 2D Game Engine Development with Javascript
    CHAPTER 1 Introducing 2D Game Engine Development with JavaScript Video games are complex, interactive, multimedia software systems. These systems must, in real time, process player input, simulate the interactions of semi-autonomous objects, and generate high-fidelity graphics and audio outputs, all while trying to engage the players. Attempts at building video games can quickly be overwhelmed by the need to be well versed in software development as well as in how to create appealing player experiences. The first challenge can be alleviated with a software library, or game engine, that contains a coherent collection of utilities and objects designed specifically for developing video games. The player engagement goal is typically achieved through careful gameplay design and fine-tuning throughout the video game development process. This book is about the design and development of a game engine; it will focus on implementing and hiding the mundane operations and supporting complex simulations. Through the projects in this book, you will build a practical game engine for developing video games that are accessible across the Internet. A game engine relieves the game developers from simple routine tasks such as decoding specific key presses on the keyboard, designing complex algorithms for common operations such as mimicking shadows in a 2D world, and understanding nuances in implementations such as enforcing accuracy tolerance of a physics simulation. Commercial and well-established game engines such as Unity, Unreal Engine, and Panda3D present their systems through a graphical user interface (GUI). Not only does the friendly GUI simplify some of the tedious processes of game design such as creating and placing objects in a level, but more importantly, it ensures that these game engines are accessible to creative designers with diverse backgrounds who may find software development specifics distracting.
    [Show full text]
  • Teaching Introductory Programming with Javascript in Higher Education
    Proceedings of the 9th International Conference on Applied Informatics Eger, Hungary, January 29–February 1, 2014. Vol. 1. pp. 339–350 doi: 10.14794/ICAI.9.2014.1.339 Teaching introductory programming with JavaScript in higher education Győző Horváth, László Menyhárt Department of Media & Educational Informatics, Eötvös Loránd University, Budapest, Hungary [email protected] [email protected] Abstract As the Internet penetration rate continuously increases and web browsers show a substantial development, the web becomes a more general and ubiq- uitous application runtime platform, where the programming language on the client side exclusively is JavaScript. This is the reason why recently JavaScript is more often considered as the lingua franca of the web, or, from a different point of view, the universal virtual machine of the web. In ad- dition, the JavaScript programming language appears in many other areas of informatics due to the wider usage of the HTML-based technology, and the embedded nature of the language. Consequently, in these days it is quite difficult to program without getting in touch with JavaScript in some way. In this article we are looking for answers to how the JavaScript language is suitable for being an introductory language in the programming related subjects of the higher education. First we revisit the different technologies that lead to and ensure the popularity of JavaScript. Following, current approaches using JavaScript as an introductory language are overviewed and analyzed. Next, a curriculum of an introductory programming course at the Eötvös Loránd University is presented, and a detailed investigation is given about how the JavaScript language would fit in the expectations and requirements of this programming course.
    [Show full text]
  • Create Mobile Apps with HTML5, Javascript and Visual Studio
    Create mobile apps with HTML5, JavaScript and Visual Studio DevExtreme Mobile is a single page application (SPA) framework for your next Windows Phone, iOS and Android application, ready for online publication or packaged as a store-ready native app using Apache Cordova (PhoneGap). With DevExtreme, you can target today’s most popular mobile devices with a single codebase and create interactive solutions that will amaze. Get started today… ・ Leverage your existing Visual Studio expertise. ・ Build a real app, not just a web page. ・ Deliver a native UI and experience on all supported devices. ・ Use over 30 built-in touch optimized widgets. Learn more and download your free trial devexpress.com/mobile All trademarks or registered trademarks are property of their respective owners. Untitled-4 1 10/2/13 11:58 AM APPLICATIONS & DEVELOPMENT SPECIAL GOVERNMENT ISSUE INSIDE Choose a Cloud Network for Government-Compliant magazine Applications Geo-Visualization of SPECIAL GOVERNMENT ISSUE & DEVELOPMENT SPECIAL GOVERNMENT ISSUE APPLICATIONS Government Data Sources Harness Open Data with CKAN, OData and Windows Azure Engage Communities with Open311 THE DIGITAL GOVERNMENT ISSUE Inside the tools, technologies and APIs that are changing the way government interacts with citizens. PLUS SPECIAL GOVERNMENT ISSUE APPLICATIONS & DEVELOPMENT SPECIAL GOVERNMENT ISSUE & DEVELOPMENT SPECIAL GOVERNMENT ISSUE APPLICATIONS Enhance Services with Windows Phone 8 Wallet and NFC Leverage Web Assets as Data Sources for Apps APPLICATIONS & DEVELOPMENT SPECIAL GOVERNMENT ISSUE ISSUE GOVERNMENT SPECIAL DEVELOPMENT & APPLICATIONS Untitled-1 1 10/4/13 11:40 AM CONTENTS OCTOBER 2013/SPECIAL GOVERNMENT ISSUE OCTOBER 2013/SPECIAL GOVERNMENT ISSUE magazine FEATURES MOHAMMAD AL-SABT Editorial Director/[email protected] Geo-Visualization of Government KENT SHARKEY Site Manager Data Sources MICHAEL DESMOND Editor in Chief/[email protected] Malcolm Hyson ..........................................
    [Show full text]
  • Extracting Taint Specifications for Javascript Libraries
    Extracting Taint Specifications for JavaScript Libraries Cristian-Alexandru Staicu Martin Toldam Torp Max Schäfer TU Darmstadt Aarhus University GitHub [email protected] [email protected] [email protected] Anders Møller Michael Pradel Aarhus University University of Stuttgart [email protected] [email protected] ABSTRACT ACM Reference Format: Modern JavaScript applications extensively depend on third-party Cristian-Alexandru Staicu, Martin Toldam Torp, Max Schäfer, Anders Møller, and Michael Pradel. 2020. Extracting Taint Specifications for JavaScript libraries. Especially for the Node.js platform, vulnerabilities can Libraries. In 42nd International Conference on Software Engineering (ICSE have severe consequences to the security of applications, resulting ’20), May 23–29, 2020, Seoul, Republic of Korea. ACM, New York, NY, USA, in, e.g., cross-site scripting and command injection attacks. Existing 12 pages. https://doi.org/10.1145/3377811.3380390 static analysis tools that have been developed to automatically detect such issues are either too coarse-grained, looking only at 1 INTRODUCTION package dependency structure while ignoring dataflow, or rely on JavaScript is powering a wide variety of web applications, both manually written taint specifications for the most popular libraries client-side and server-side. Many of these applications are security- to ensure analysis scalability. critical, such as PayPal, Netflix, or Uber, which handle massive In this work, we propose a technique for automatically extract- amounts of privacy-sensitive user data and other assets. An impor- ing taint specifications for JavaScript libraries, based on a dynamic tant characteristic of modern JavaScript-based applications is the analysis that leverages the existing test suites of the libraries and extensive use of third-party libraries.
    [Show full text]
  • Focus Type Applies To
    Focus Type Applies To All Power Tools All All Power Tools Team Foundation Server All Templates Team Foundation Server All Integration Provider Team Foundation Server All Power Tools Team Foundation Server All Power Tools Team Foundation Server All Integration Provider Team Foundation Server Architecture Power Tools Visual Studio Architecture Power Tools Visual Studio Architecture Templates Visual Studio Architecture Integration Provider Oracle Architecture Templates Expression Builds Power Tools Team Foundation Server Builds Integration Provider Visual Studio Builds Power Tools Team Foundation Server Builds Templates Team Foundation Server Builds Power Tools Team Foundation Server Builds Power Tools Team Foundation Server Builds Power Tools Team Foundation Server Coding Power Tools Visual Studio Coding Integration Provider Visual Studio Coding Azure Integration Visual Studio Coding Integration Provider Dynamics CRM Coding Documentation Visual Studio Coding Integration Provider Visual Studio Coding Templates Visual Studio Coding Documentation Visual Studio Coding Templates SharePoint Coding Templates SharePoint Coding Integration Provider Visual Studio Coding Integration Provider Visual Studio Coding Templates SharePoint Coding Power Tools Visual Studio Coding Power Tools Visual Studio Coding Templates SharePoint Coding Templates Visual Studio Coding Templates Visual Studio Coding Templates Visual Studio Coding Power Tools Visual Studio Coding Integration Provider SharePoint Coding Templates Visual Studio Coding Templates SharePoint Coding
    [Show full text]
  • Microsoft AJAX Library Essentials Client-Side ASP.NET AJAX 1.0 Explained
    Microsoft AJAX Library Essentials Client-side ASP.NET AJAX 1.0 Explained A practical tutorial to using Microsoft AJAX Library to enhance the user experience of your ASP.NET Web Applications Bogdan Brinzarea Cristian Darie BIRMINGHAM - MUMBAI Microsoft AJAX Library Essentials Client-side ASP.NET AJAX 1.0 Explained Copyright © 2007 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, Packt Publishing, nor its dealers or distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. First published: July 2007 Production Reference: 1230707 Published by Packt Publishing Ltd. 32 Lincoln Road Olton Birmingham, B27 6PA, UK. ISBN 978-1-847190-98-7 www.packtpub.com Cover Image by www.visionwt.com Table of Contents Preface 1 Chapter 1: AJAX and ASP.NET 7 The Big Picture 8 AJAX and Web 2.0 10 Building
    [Show full text]
  • Learning Javascript Design Patterns
    Learning JavaScript Design Patterns Addy Osmani Beijing • Cambridge • Farnham • Köln • Sebastopol • Tokyo Learning JavaScript Design Patterns by Addy Osmani Copyright © 2012 Addy Osmani. All rights reserved. Revision History for the : 2012-05-01 Early release revision 1 See http://oreilly.com/catalog/errata.csp?isbn=9781449331818 for release details. ISBN: 978-1-449-33181-8 1335906805 Table of Contents Preface ..................................................................... ix 1. Introduction ........................................................... 1 2. What is a Pattern? ...................................................... 3 We already use patterns everyday 4 3. 'Pattern'-ity Testing, Proto-Patterns & The Rule Of Three ...................... 7 4. The Structure Of A Design Pattern ......................................... 9 5. Writing Design Patterns ................................................. 11 6. Anti-Patterns ......................................................... 13 7. Categories Of Design Pattern ............................................ 15 Creational Design Patterns 15 Structural Design Patterns 16 Behavioral Design Patterns 16 8. Design Pattern Categorization ........................................... 17 A brief note on classes 17 9. JavaScript Design Patterns .............................................. 21 The Creational Pattern 22 The Constructor Pattern 23 Basic Constructors 23 Constructors With Prototypes 24 The Singleton Pattern 24 The Module Pattern 27 iii Modules 27 Object Literals 27 The Module Pattern
    [Show full text]
  • Analysing the Use of Outdated Javascript Libraries on the Web
    Updated in September 2017: Require valid versions for library detection throughout the paper. The vulnerability analysis already did so and remains identical. Modifications in Tables I, III and IV; Figures 4 and 7; Sections III-B, IV-B, IV-C, IV-F and IV-H. Additionally, highlight Ember’s security practices in Section V. Thou Shalt Not Depend on Me: Analysing the Use of Outdated JavaScript Libraries on the Web Tobias Lauinger, Abdelberi Chaabane, Sajjad Arshad, William Robertson, Christo Wilson and Engin Kirda Northeastern University {toby, 3abdou, arshad, wkr, cbw, ek}@ccs.neu.edu Abstract—Web developers routinely rely on third-party Java- scripts or HTML into vulnerable websites via a crafted tag. As Script libraries such as jQuery to enhance the functionality of a result, it is of the utmost importance for websites to manage their sites. However, if not properly maintained, such dependen- library dependencies and, in particular, to update vulnerable cies can create attack vectors allowing a site to be compromised. libraries in a timely fashion. In this paper, we conduct the first comprehensive study of To date, security research has addressed a wide range of client-side JavaScript library usage and the resulting security client-side security issues in websites, including validation [30] implications across the Web. Using data from over 133 k websites, we show that 37 % of them include at least one library with a and XSS ([17], [36]), cross-site request forgery [4], and session known vulnerability; the time lag behind the newest release of fixation [34]. However, the use of vulnerable JavaScript libraries a library is measured in the order of years.
    [Show full text]
  • Npm Packages As Ingredients: a Recipe-Based Approach
    npm Packages as Ingredients: a Recipe-based Approach Kyriakos C. Chatzidimitriou, Michail D. Papamichail, Themistoklis Diamantopoulos, Napoleon-Christos Oikonomou, and Andreas L. Symeonidis Electrical and Computer Engineering Dept., Aristotle University of Thessaloniki, Thessaloniki, Greece fkyrcha, mpapamic, thdiaman, [email protected], [email protected] Keywords: Dependency Networks, Software Reuse, JavaScript, npm, node. Abstract: The sharing and growth of open source software packages in the npm JavaScript (JS) ecosystem has been exponential, not only in numbers but also in terms of interconnectivity, to the extend that often the size of de- pendencies has become more than the size of the written code. This reuse-oriented paradigm, often attributed to the lack of a standard library in node and/or in the micropackaging culture of the ecosystem, yields interest- ing insights on the way developers build their packages. In this work we view the dependency network of the npm ecosystem from a “culinary” perspective. We assume that dependencies are the ingredients in a recipe, which corresponds to the produced software package. We employ network analysis and information retrieval techniques in order to capture the dependencies that tend to co-occur in the development of npm packages and identify the communities that have been evolved as the main drivers for npm’s exponential growth. 1 INTRODUCTION Given that dependencies and reusability have be- come very important in today’s software develop- The popularity of JS is constantly increasing, and ment process, npm registry has become a “must” along is increasing the popularity of frameworks for place for developers to share packages, defining code building server (e.g.
    [Show full text]
  • 6. Client-Side Processing
    6. Client-Side Processing 1. Client-side processing 2. JavaScript 3. Client-side scripting 4. Document Object Model (DOM) 5. Document methods and properties 6. Events 7. Calling a function 8. Table of squares function 9. Comments on previous script 10. Defining a function 11. Event handlers 12. Event handlers example 13. Event listeners 14. Functions and form fields 15. Defining the function myTranslate 16. Navigating the DOM tree 17. Finding elements by name 18. Finding elements by name (function body) 19. Using CSS selectors 20. Adding elements 21. Deleting elements 22. Using jQuery 23. Using jQuery to add elements 24. Finding elements by name (jQuery) 25. DOM and XML 26. jQuery method to load an XML file 27. Retrieving RSS item titles 28. Retrieving JSON data 29. JSON country data 30. Code for JSON retrieval (1) 31. Code for JSON retrieval (2) 32. Exercises 33. Links to more information 6.1. Client-side processing client program (e.g. web browser) can be used to customise interaction with the user validate user input (although HTML5 now provides this) generate (part of) document dynamically send requests to a server in the background make interaction with a web page similar to that of a desktop application this is typically done using JavaScript, since a Javascript interpreter is built into browsers 6.2. JavaScript interpreted, scripting language for the web loosely typed variables do not have to be declared the same variable can store values of different types at different times HTML <script> element specifies script to be executed type attribute has value text/javascript src attribute specifies URI of external script usually <script> appears in the <head> and just declares functions to be called later ECMAScript, 10th edition (June 2019) is the latest standard 6.3.
    [Show full text]