Your Choice JavaScript News

Pretty big deal, Ngrx effect, Certificate & more… Angular News Monday, February 26

Angular News TLDR / Table of Contents

  • Your NGRX Effects are Probably Wrong – Austin –
    • In this simple effect, we are saving a pizza via a HTTP service. This is wrong though! Heres the right way: Do you see the difference? Its subtle but can be a huge difference in production; instead…
    • pretty big deal, NGRX Effect, simple effect, HTTP service, Bonnie Brennan
  • Running Angular CLI over HTTPS with a Trusted Certificate
    • Running an Angular application over a secure connection is pretty straight forward. There are plenty of tutorials how you can enable this. However, you can run into some problems. This blog post…
    • certificate, git bash, application, new trusted certificate, Angular CLI
  • 🎼webpack 4: released today!!✨ – webpack –
    • Today we’re happy to release that webpack 4 (Legato) is available today! Up to 98% faster builds, huge bundle size decreases, #0CJS, and more!! Upgrade today!
    • webpack, webpack presets design, legato, old JS Framework, largest OpenCollective sponsor
  • Server Side Rendering | Aurelia
    • Without Server Side Rendering the server returns only boilerplate HTML without any content. Today we’re announcing Aurelia Server Side Rendering which allows a Node.js server to render your application on the server and return the HTML of a fully rendered page.
    • Server Side Rendering, Aurelia SSR implementation, initial render times, Aurelia Server, Aurelia application
  • From a convenience store to Redux architecture
    • Imagine that you’re a proud owner of a convenience store that sells various products. Remember how did you start? You rented an empty place (i.e. the store was in its initial state). Then you purchased shelves and ordered products. After that, multiple vendors started delivering products. You hired employees that…
    • state, app, app state, current state, state object
  • Its subtle but can be a huge difference in production; instead of switchMap, I used concatMap.
  • Well the switchMap can cause race conditions.
  • With a switchMap it will cancel and replace the prior observable with a new value that came through.
  • Now there are cases where you want to use a switchMap, lets say you have a typeahead where as the user types, you want to fetch the new results and you really dont care about the previous result.
  • To help illustrate the difference, checkout this demo: difference is subtle but important because it can cause unexpected behavior that will take forever to track down.

Tags: pretty big deal, NGRX Effect, simple effect, HTTP service, Bonnie Brennan

  • // enable or disable SSL – –ssl boolean: defaults to false// path to root certificate – –ssl-cert string: defaults to ssl/server.
  • keyExample #1ng serve -ssl trueSSL is enabledCheck whether there is a certificate and private key in the default ssl folderIf nothing is found, the CLI will generate his own certificate and private keyExample #2ng serve \ – –ssl true \ – –ssl-cert /home/john/ssl/example.crt \ – –ssl-key is enabledCheck whether there…
  • If you dont experience the second problem and you can live with the fact you have an untrusted certificate, you can just stop right here and keep on developing your awesome application.
  • jsonCopy the private key and root certificate from step 1 into the ssl folder.
  • Make sure the file names are like this: – server.key (private key) – server.crt (root certificate)Before we run our application, make sure you have restarted your browser and updated the start script in package.json.

Tags: certificate, git bash, application, new trusted certificate, Angular CLI

  • – Whats new?There are so many new things in webpack 4, that I cant list them all or this post would last forever.
  • Currently built, we now have 5 module types implemented: – javascript/auto: (The default one in webpack 3) JavaScript module with all module systems enabled: CommonJS, AMD, ESMjavascript/esm: EcmaScript modules, all other module system are not available (the default for.
  • json extensions in this order to resolveWhats most exciting about this feature, is that now we can continue to work on our CSS and HTML module types (slated for webpack 4.
  • If you use HtmlWebpackPluginFor this release, we gave the ecosystem a month to upgrade any plugins or loaders to use the new webpack 4 APIs. However, Jan Nicklas has been away with work obligations and therefore, we have provided a patched fork of html-webpack-plugin.
  • Ill personally send you a screen shot of each one if youd like Whatsnext?We have already started planning our next set of features for webpack 4.

Tags: webpack, webpack presets design, legato, old JS Framework, largest OpenCollective sponsor

  • Today, we’re very excited to announce the early-adopter release of Aurelia’s Server Side Rendering!
  • With Server Side Rendering, the server returns the HTML of a fully rendered page, which is great for Search Engine Optimization and initial render times.
  • For this to work, your Aurelia application has to run on the server, which we’ve now enabled through the combination of Node.js and Koa .
  • We’d love for you to play around with Aurelia Server Side Rendering.
  • We think that next milestones should be to add a Server Side Rendering option to the Aurelia CLI for the Webpack bundler, so that the Aurelia CLI can set it up for you when you create new Webpack projects using .

Tags: Server Side Rendering, Aurelia SSR implementation, initial render times, Aurelia Server, Aurelia application

  • Similarly to a real store, at any given time your apps storehas a current state.
  • If the user interacts with the UI, or the server sends new data, these actions should ask the store object to update the state.
  • The app component subscribes to the store, receives the new state object and updates the UI accordingly.
  • Besides the property type, and action object can optionally have another property with the payload of data that should somehow change the app state, for example: – – This object only describes the action and provides the payload, but it doesnt know how the state should be changed.
  • While the Redux is widely used in the web apps developed with the React framework, for Angular apps you can use the ngrx library that also implements the unidirectional data flow and can be used for implementing the app state management.

Tags: state, app, app state, current state, state object

Top Angular Courses

Angular 5 (formerly Angular 2) - The Complete Guide (139,105 students enrolled)

By Maximilian Schwarzmüller
  • Develop modern, complex, responsive and scalable web applications with Angular 4
  • Fully understand the architecture behind an Angular 4 application and how to use it
  • Use their gained, deep understanding of the Angular 4 fundamentals to quickly establish themselves as frontend developers
  • Create single-page applications with on of the most modern JavaScript frameworks out there

Learn more.

The Complete Angular Course: Beginner to Advanced (40,747 students enrolled)

By Mosh Hamedani
  • Establish yourself as a skilled professional developer
  • Build real-world Angular applications on your own
  • Troubleshoot common Angular errors
  • Master the best practices
  • Write clean and elegant code like a professional developer

Learn more.

Learn and Understand AngularJS (66,998 students enrolled)

By Anthony Alicea
  • Learn fundamental Javascript concepts that power AngularJS.
  • Write quicker, better AngularJS code by discovering how AngularJS itself is built.
  • Become fluent in AngularJS terminology, such as dependency injection, services, directives, transclusion, and more.
  • Realize the power of dependency injection, and how AngularJS accomplishes it.
  • Design custom directives and save time and energy with easily reusable components.
  • Understand what a Single Page Application (SPA) is, and how they work.
  • Build a Single Page Application (SPA) in AngularJS.
  • Be the coder that explains AngularJS to everyone else, because you understand it better than anyone else.
  • Get new free lectures during 2015, keep up with the development of AngularJS 2.0, and get a MASSIVE discount on a future AngularJS 2.0 course in 2016!

Learn more.

Angular 5 NgRx Store Masterclass & FREE E-Book (3,038 students enrolled)

By Angular University
  • Build a Chat Application From top to bottom!
  • Understand the Flux Architecture, its benefits, strong points and most beneficial use cases
  • Understand Single Store Architecture solutions like Redux or Ngrx Store
  • Know all the usual notions of Store solutions, like Actions and Reducers
  • Know how to model the application state of a single store architecture, leveraging Typescript custom types to do so
  • Know the difference between a model and a view model and what to put inside the store
  • know how to derive a view model from a model and how to do that
  • understand the notion of selector in the context of store solutions
  • know the difference between smart components and presentation components
  • know how to build smart components using the Ngrx Store library
  • know how to use the Ngrx Effects library
  • know not only the Ngrx libraries but know also how they all fit together and what are the benefits of a store solution
  • know how to setup the Ngrx store developers tools
  • know how to debug RxJs applications in general

Learn more.

Angular Front To Back (6,984 students enrolled)

By Brad Traversy
  • Build amazing single page applications using Angular 5+
  • Master Angular concepts
  • Understand the file and folder structure of an Angular application
  • Build a client management application with authentication and Firebase's Firestore
  • Integrate Bootstrap 4 into Angular projects

Learn more.

Angular Crash Course for Busy Developers (44,316 students enrolled)

By Mosh Hamedani
  • Master the essential Angular concepts
  • Troubleshoot common runtime errors
  • Write cleaner, more maintainable code

Learn more.

Angular (Angular 2+) & NodeJS - The MEAN Stack Guide (26,806 students enrolled)

By Maximilian Schwarzmüller
  • Build real Angular + NodeJS applications
  • Understand how Angular works and how it interacts with Backends
  • Connect any Angular Frontend with a NodeJS Backend
  • Use MongoDB with Mongoose to interact with Data on the Backend
  • Use ExpressJS as a NodeJS Framework
  • Provide a great user experience by using Optimistic Updating on the Frontend
  • Improve any Angular (+ NodeJS) application by adding Error Handling

Learn more.